Cómo incrustar letra utilizando CSS3

Los diseñadores web han sido limitados por la tipografía utilizando sólo fuentes web de fallos durante muchos años. Las alternativas incluyen el uso de imágenes previamente, Flash, JavaScript o los scripts PHP. El advenimiento de CSS3 trae nuevas opciones de diseño para el diseño de Web. Esto incluye la fuente cara selector @, que permite que la fuente seleccionada en la hoja de estilo para ser utilizado como un elemento de la familia de la fuente. Sube la fuente a la red de acogida a fin de que el selector @ font-face para trabajar. La mayoría de los navegadores soportan el selector @ font-face, por lo que es ideal para presentaciones en varios navegadores en el diseño web.

Instrucciones

1 Abra el editor de texto. Haga clic en "Archivo" y "Abrir" y seleccione el archivo CSS. Cualquier editor de texto se abrirá un archivo .css.

2 Añadir el selector @ font-face a su archivo CSS, junto con los elementos font-family y src. Por ejemplo, si su archivo de fuente es times.ttf, entonces el font-face código selector @ aparecerá de la siguiente manera:

@ Font-face {font-family: Los tiempos; src: formato local (times.ttf) ( "True Type"); }

3 Convertir el archivo de fuentes EOT de apoyo para el navegador Internet Explorer de @ font-family. Haga clic en "Examinar" para cargar el archivo TTF y hacer clic en "Convertir TTF a EOT!" para convertir el archivo.

4 Añadir el selector de dirección del archivo EOT a su archivo CSS, como en el siguiente ejemplo:

@ Font-face {font-family: Los tiempos; src: url (Times.eot); src: local ( "Tiempos"), formato de URL (times.ttf) ( "True Type"); }

Esta carga la fuente de IE antes de la fuente True Type, que cubre todos los navegadores que soportan @ font-face incrustación.

5 Utilizar el elemento familia de fuentes para utilizar la fuente incrustada. Por ejemplo, debería escribir lo siguiente para utilizar Times.tff para toda la página Web:

body {font-family: "Times", Verdana, Helvetica, sans-serif; }

Esto carga los tiempos de fuentes incorporadas para toda la página web. Sin embargo, si el navegador no soporta @ font-face, el navegador va a elegir una de las otras fuentes compatibles con Internet que figuran después de los tiempos.

Consejos y advertencias

• Utilice sólo las fuentes que ha comprado para su uso en línea.