Uno de los problemas que tenemos al tratar de desarrollar una pagina mas los que vamos empezando es que la tipografía que yo tengo en mi computadora muchas veces va acorde a lo que tengo programando, pero recordemos que estas tras un mundo de posibles clientes a tu, por lo que puede ser que tu cliente no tenga el estilo de fuente que tu ves que en tu sitio es el adecuado, por lo que en la parte de CSS 3 tenemos la siguiente etiqueta font-face para importar la tipografía directamente el servidor o directamente desde un servicio publico.
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9 */
}
Por ejemplo en la imagen que estoy utilizando manejo un tipo de letra FiraSansOT-RegularItalic para el texto y para encabezado chango. La primera de ellas la traigo directamente de la carpeta de mi servidor y la otra la vinculo al servicio de google fonts
Primero voy a crear mi pagina
<!DOCTYPE html>
<html>
<head>
<title> Probando Css Externo</title>
<link href="theme.css" rel="stylesheet" type="text/css"></link>
<link href="http://fonts.googleapis.com/css?family=Chango" rel="stylesheet" type="text/css"></link>
</head>
<body>
<h1>
Pagina de prueba </h1>
<p>
Esta es una pagina para probar etiquetas con
formato en css en un archivo externo para mejor
acomodo</p>
</body>
</html>
Notemos la linea
<link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>
Esta linea hace referencia a que se manejara un servicio de google fonts para poder hacer la llamada, con eso ya tengo activado chango
Por ultima creamos nuestra hoja de estilo css
@font-face {
font-family: Propia;
src: url(FiraSansOT-RegularItalic.otf) format("opentype");
}
p{
font-family: Propia;
}
h1{
font-family: 'Chango', cursive;
}
No hay comentarios:
Publicar un comentario