Tipografías web de CSS
- Página anterior Efectos de texto de CSS
- Página siguiente Transformaciones 2D CSS
Regla @font-face de CSS
Las tipografías web permiten que los diseñadores web utilicen tipografías que no estén instaladas en la computadora del usuario.
Después de encontrar/comprar la tipografía que desea usar, simplemente incluya el archivo de tipografía en su servidor web y se descargará automáticamente para el usuario cuando sea necesario.
Sus tipografías 'propias' en CSS @font-face se definen en las reglas.
Diferentes formatos de tipografía
Tipografía TrueType (TTF)
TrueType es un estándar de tipografía desarrollado por Apple y Microsoft a finales de la década de 1980. TrueType es el formato de tipografía más utilizado en los sistemas operativos Mac OS y Microsoft Windows.
Tipografía OpenType (OTF)
OpenType es un formato de tipografía escalable para computadoras. Se basa en TrueType y es una marca registrada de Microsoft. Hoy en día, las tipografías OpenType se utilizan ampliamente en las principales plataformas de computadoras.
Formato de tipografía abierta de la Web (WOFF)
WOFF es un formato de tipografía utilizado para la web. Desarrollado en 2009, ahora es una recomendación del W3C. WOFF es esencialmente un OpenType o TrueType con compresión y otros metadatos. El objetivo es soportar la distribución de tipografías desde el servidor al cliente en redes con limitaciones de ancho de banda.
Formato de tipografía abierta de la Web (WOFF 2.0)
La tipografía TrueType/OpenType ofrece una mejor compresión que WOFF 1.0.
Tipografía/Shape SVG
Las tipografías SVG permiten usar SVG como glifos en la visualización de texto. La especificación SVG 1.1 define un módulo de tipografía que permite crear tipografías en documentos SVG. También se puede aplicar CSS a los documentos SVG, y la regla @font-face se puede aplicar al texto en documentos SVG.
Tipografía OpenType integrada (EOT)
El tipo de fuente EOT es la forma compacta del OpenType diseñada por Microsoft, utilizada como fuente incrustada en la web.
soporte del navegador para el formato de fuente
Los números en la tabla indican la versión del navegador que admite completamente 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 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | No se admite | No se admite | No se admite | 3.2 | No se admite |
| EOT | 6.0 | No se admite | No se admite | No se admite | No se admite |
*IE:Este formato de fuente solo es válido cuando se establece en "installable".
*Firefox:No se admite por defecto, pero se puede activar (es necesario establecer el indicador en "true" para usar WOFF2).
Usa la fuente que necesites
Dentro de la regla @font-face: primero defina el nombre de la fuente (por ejemplo, myFirstFont) y luego diríjase al archivo de fuente.
consejo:El URL de la fuente siempre debe usar minúsculas. Las mayúsculas pueden causar resultados inesperados en IE.
Para usar la fuente en un elemento HTML, refiérase al nombre de la fuente a través de la propiedad font-family (myFirstFont):
ejemplo
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Usando texto en negrita
Debe agregar otra regla @font-face que contenga los descriptores del texto en negrita:
ejemplo
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
El archivo "sansation_bold.woff" es otro archivo de fuente que contiene caracteres en negrita de la fuente Sansation.
Cada vez que un texto con la familia de fuentes "myFirstFont" debe presentarse en negrita, el navegador lo usará.
De esta manera, puede configurar muchas fuentes para el mismo tipo de letra. @font-face reglas.
descripción de fuente CSS
La siguiente tabla enumera las fuentes que pueden estar @font-face Todos los descriptores de fuente definidos dentro de la regla (font descriptor):
| descriptores | valor | descripción |
|---|---|---|
| font-family | name | es necesario. Define el nombre de la fuente. |
| src | URL | es necesario. Define la URL del archivo de fuente de fuente. |
| font-stretch |
|
Opcional. Define cómo se debe estirar la fuente. El valor por defecto es "normal". |
| font-style |
|
Opcional. Define el estilo de la fuente. El valor por defecto es "normal". |
| font-weight |
|
Opcional. Define el grosor de la fuente. El valor por defecto es "normal". |
| unicode-range | unicode-range | Opcional. Define el rango de caracteres UNICODE que admite la fuente. El valor por defecto es "U+0-10FFFF". |
- Página anterior Efectos de texto de CSS
- Página siguiente Transformaciones 2D CSS
