La instrucción font face nos permite agregar cualquier fuente (letra), a nuestra pagina web, mediante estilos css, aquí un ejemplo:
@font-face {font-family: "treb";
src: url(../font/Trebuchet_MS.ttf)}
Donde "treb" es el nombre de la letra que vamos a poner (es opcional), en donde dice url ponemos la ubicación física del archivo.
Es posible utilizarla encualquier clase de nuestro archivo de estilos, usamos esta linea:
font-family: "treb";
Hasta ahora todo bien, pero tiene un pequeño detalle con Internet Explorer (para variar) no funciona!!, y no solo eso, sino que nos puede llegar a mostrar un verdadero desastre en la pagina, aveces sale una letra gigantesca que arruina nuestro diseño.
Esto se soluciona al cambiar el formato de las letras TTF a EOT, para eso hay varios sitios en linea que rápidamente pueden hacer el trabajo, aquí están algunos:
http://everythingfonts.com/otf-to-eot#.Ujc5e9Jg-3k
http://www.font2web.com/
También hay otro tipo de archivos con extensión otf con el mismo caso, de igual manera se pueden transformar al formato eot y aquí esta la pagina para transformarlo:
http://everythingfonts.com/otf-to-eot
Veamos un ejemplo de código:
<html>
<head>
<link rel="stylesheet" media="all" href="css/style.css"/>
</head>
<body>
<div id="letra_prueba">
Prueba
</div>
</body>
</html>
En el CSS agregamos esto:
@font-face {font-family: "treb";
src: url(../font/Trebuchet_MS.eot)}
#letra_prueba{
font-family: "treb";
}
La pagina html queda en la raíz de la carpeta, creamos una carpeta para meter el archivo css, y creamos otra carpeta con el nombre "font" para guardar el archivo de la letra.
Ahora ya funciona en Internet Explorer, pero que pasa con los otros exploradores, podría fallar y esto pasa por que IE tendría que usar los archivos eot mientras que los demás navegadores los archivos ttf.
Para esto vamos a modificar nuevamente el código para que nos incluya los dos tipos de fuentes:
@font-face {Con lo anterior, ya funciona correctamente en todos los navegadores.
font-family: 'treb';
src: url('../font/Trebuchet_MS.eot?') format('eot'), url('../font/Trebuchet_MS.ttf') format('truetype');}
#letra_prueba{
font-family: "treb";
}
-------------------------------------------------------------------------------------------------------------------
Nota importante: En Internet Explorer 9 y 10 no funciona pero una solución es agregar la fuente woff
aquí se puede transformar http://www.fontsquirrel.com/tools/webfont-generator
En el enlace anterior fue el único que no me salia la letra woff con error, hay que verificar que una vez que se haga el cambio de formato de letra, este funcione correctamente.
Para probar que el archivo este convertido correctamente, este puede ser instalando en el sistema y verificar con word, o mas fácil, tratar de abrir el archivo con el bloc de notas y si aparece el mensaje que dice que esta dañado el archivo, hay que probar con otra pagina.
Finalmente quedaría así:
@font-face {
font-family: 'treb';
src: url('../font/Trebuchet_MS.eot?') format('eot'), url('../fonts/tt0459m.woff') format('woff'), url('../font/Trebuchet_MS.ttf') format('truetype');}
#letra_prueba{
font-family: "treb";
}
0 comentarios:
Publicar un comentario