Fuentes web CSS3 - El @font-face Regla
Las fuentes web permiten a los diseñadores web para utilizar las fuentes que no están instaladas en el ordenador del usuario.
Cuando haya encontrado / comprado la fuente que desea utilizar, basta con incluir el archivo de fuente en su servidor web, y se descargará automáticamente al usuario cuando sea necesario.
Sus fuentes "propias" se definen en el CSS3 @font-face regla.
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Diversos formatos de caracteres
TrueType Fuentes (TTF)
TrueType es una fuente estándar desarrollado a finales de 1980, por Apple y Microsoft. TrueType es el formato de la fuente más común para los sistemas operativos Mac OS y Microsoft Windows.
OpenType Fuentes (OTF)
OpenType es un formato para fuentes de la computadora escalables. Fue construido en TrueType , y es una marca registrada de Microsoft. OpenType tipos se utilizan comúnmente en la actualidad en las principales plataformas informáticas.
La Web Open Font Format (WOFF)
WOFF es un formato de fuente para su uso en páginas web. Fue desarrollado en 2009, y ahora es una Recomendación del W3C. WOFF es esencialmente OpenType o TrueType con compresión y metadatos adicionales. El objetivo es apoyar la distribución de la fuente a partir de un servidor a un cliente en una red con restricciones de ancho de banda.
La Web Open Font Format (WOFF 2.0)
TrueType/OpenType fuente que proporciona una mejor compresión que WOFF 1.0.
Fuentes SVG / Formas
fuentes SVG permiten SVG para ser utilizado como glifos al mostrar texto. La especificación SVG 1,1 definir un módulo de fuente que permite la creación de fuentes dentro de un documento SVG. También puede aplicar CSS a documentos SVG, y el @font-face regla se puede aplicar al texto en los documentos SVG.
Embedded OpenType Fuentes (EOT)
Fuentes EOT son una forma compacta de OpenType fuentes diseñadas por Microsoft para su uso como fuentes incrustadas en las páginas web.
Soporte del navegador para la fuente Formatos
Los números de la tabla especifica la primera versión del navegador que es totalmente compatible con el formato de fuente.
| formato de fuente | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9,0 * | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | No soportado | 36.0 | 35.0 * | No soportado | 26.0 |
| SVG | No soportado | 4.0 | No soportado | 3.2 | 9.0 |
| EOT | 6.0 | No soportado | No soportado | No soportado | No soportado |
* IE: El formato de fuente sólo funciona cuando está ajustado para ser "instalable".
* Firefox: No se admite de forma predeterminada, pero se puede habilitar (necesidad de establecer un indicador en "true", para usar WOFF2).
El uso de la fuente que desea
En el CSS3 @font-face regla primero debe definir un nombre para el tipo de letra (por ejemplo myFirstFont ), a continuación, seleccione el archivo de fuente.
 | Consejo: Utilice siempre letras minúsculas para la dirección URL de la fuente. Las letras mayúsculas se pueden producir resultados inesperados en el IE. |
|---|
Para utilizar la fuente para un elemento HTML, mencione el nombre de la fuente ( myFirstFont ) a través de la font-family de propiedad:
Ejemplo
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Inténtalo tú mismo " Usando el texto en negrita
Debe añadir otra @font-face regla que contiene descriptores para el texto en negrita:
Ejemplo
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Inténtalo tú mismo " El archivo "sansation_bold.woff" es otro archivo de fuente, que contiene los caracteres en negrita para la fuente Sansation.
Los navegadores utilizar este cada vez que un trozo de texto con la fuente-familia " myFirstFont " Se debería mostrar en negrita.
De esta manera usted puede tener muchas @font-face reglas para la misma fuente.
Ponte a prueba con los ejercicios!
CSS3 Fuentes descriptores
La siguiente tabla enumera todos los descriptores de fuentes que se pueden definir en el interior del @font-face regla:
| descriptor | Valores | Descripción |
|---|---|---|
| font-family | name | Necesario. Define un nombre para el tipo de letra |
| src | URL | Necesario. Define la URL del archivo de fuente |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Opcional. Define la forma en la fuente debe ser estirado. El valor predeterminado es "normal" |
| font-style | normal italic oblique | Opcional. Define la forma en la fuente debe ser de estilo. El valor predeterminado es "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Opcional. Define la constancia de la fuente. El valor predeterminado es "normal" |
| unicode-range | unicode-range | Opcional. Define el rango de caracteres UNICODE compatible con la fuente. El valor predeterminado es "U + 0-10FFFF" |