Cómo usar fuentes web

Sep 17, 2025
Cómo
[dieciséis]

El siguiente es un extracto tomado del manual de Webfont de Bram Stein. Cómpralo aquí .

Fuentes web se definen en CSS a través del @Perfil delantero regla. Si usted es un desarrollador web, lo más probable es que haya escrito, copiado y pegado, o en el mínimo visto un @Perfil delantero regla.

Sin embargo, por el bien de la integridad, vamos a correr rápidamente por un ejemplo básico: 

 @ FUTT-FACE {
  Fuente-familia: Elena;
  SRC: URL (Elena-regular.woff);
}

Esto crea una nueva familia de fuentes web que se puede hacer referencia a través de la Familia tipográfica o fuente propiedad de taquigrafía. Pero algo falta aquí. Cuando se hace referencia a una fuente web en una pila de fuentes, asegúrese de incluir al menos una fuente de retroceso en caso de que la fuente web no se cargue.

Aquí, si Elena no se carga, el navegador se volverá a caer en el genérico. serif Familia tipográfica: 

 P {
  Fuente-Familia: Elena, Serif;
}

Hay más en las fuentes de Fallback, pero por ahora, mantendremos a nuestra pila de fuente simple, incluyendo solo el genérico serif y sans-serif Fuentes familias.

Fuentes Familias

Crear una familia de fuentes con múltiples estilos se realiza creando un @Perfil delantero Regla para cada estilo y usando el mismo. Familia tipográfica nombre. El seguimiento @Perfil delantero Las reglas crean una familia con un estilo normal y audaz: 

 @ FUTT-FACE {
     Fuente-familia: Elena;
     SRC: URL (Elena-regular.woff);
     Peso de fuente: normal;
}
   @Perfil delantero {
     Fuente-familia: Elena;
     SRC: URL (Elena-Bold.Woff);
     Peso de fuente: negrita;
}

Puede usar esta familia de fuentes en su CSS haciendo referencia al nombre y el peso de la familia en sus selectores. Esto aplica el estilo regular a los párrafos y el estilo audaz a fuerte Párrafos: 

 P {
  Fuente-Familia: Elena, Serif;
}

p fuerte {
  Peso de fuente: negrita;
}

además peso De @Perfil delantero También acepta el Estilo de fuente y estiramiento de fuentes Descriptores de propiedades, que definen estilos como cursiva y condensado. Los tres descriptores de propiedad se pueden usar para crear una sola familia de fuentes con varios estilos. Teóricamente, esto le permite crear una familia que contenga 243 estilos individuales (nueve peso Valores × tres Estilo de fuente Valores × nueve estiramiento de fuentes valores).

En la práctica, sin embargo, está limitado a 27 valores, ya que algunos navegadores no apoyan estiramiento de fuentes . Eche un vistazo a la tabla a continuación para ver qué navegadores puede usar, y mirar aquí Para información más detallada.

Click the icon in the top right to enlarge the image

[dieciséis] Haga clic en el icono en la parte superior derecha para ampliar la imagen.

Con suerte, los navegadores restantes implementarán el estiramiento de fuentes Propiedad pronto, y podrá utilizar las 243 clasificaciones de la fuente.

Formatos de fuente

los SRC El descriptor le dice a un navegador donde para obtener un archivo de fuente. Los ejemplos anteriores utilizaron un formato de fuente único, pero a menudo verá las URL a múltiples formatos de fuente combinados con las sugerencias de formato, que se adjuntan después de la URL usando el Formato ("valor") sintaxis.

Las sugerencias de formato Dígales al navegador cuál es el formato del archivo de fuente en una URL dada. 

 @ FUTT-FACE {
  Fuente-familia: Elena;
  SRC: Formato de URL (Elena-regular.woff2) ("woff2"),
       Formato URL (ELENA-regular.woff) ("woff");
}

Si enumera varios formatos, los navegadores modernos elegirán el primer formato que admiten en función de la sugerencia de formato. Por lo tanto, es importante enumerar los formatos de fuente web en el orden de la mejor compresión al menos.

A pesar de que las sugerencias de formato son opcionales, siempre incluyenlas, permiten que el navegador sepa sobre el formato sin necesidad de descargar la fuente. Por ejemplo, si un navegador no admite WOFF2, pero admite WOFF, puede omitir el archivo de fuente de WOFF2 en función de la sugerencia de formato.

Los navegadores admiten varios formatos de fuente web: OpenType (TrueType), EOT, WOFF y WOFF2. Algunos navegadores también admiten fuentes SVG, pero están desaprobadas y ya no deben usarse (y no deben confundirse con el Nuevo formato OpenType-SVG ).

EOT, WOFF y WOFF2 son técnicamente no formatos de fuente. Son archivos opentype comprimidos con diversos grados de compresión. Woff2 ofrece la mejor compresión, seguida de WOFF y EOT.

En la investigación de cobertura para todos los navegadores, es posible que haya encontrado algo llamado a prueba de balas @Perfil delantero sintaxis por fontspring.

La sintaxis a prueba de balas utiliza archivos de fuente EOT, WOFF2, WOFF, RAW Opentype y SVG para obtener una cobertura máxima del navegador: 

 @ FUTT-FACE {
  Fuente-familia: Elena;
  SRC: url (elena.eot? #iefix) Formato ("Embedded-Opentype"),
       Formato URL (elena.woff2) ("woff2"),
       Formato URL (ELENA.WOFF) ("WOFF"),
       Formato URL (ELENA.OTF) ("OpenType"),
       Formato URL (ELENA.SVG # ELENA) ("SVG");
}

La primera línea de URL puede parecer un poco extraña para usted. Las versiones de Internet Explorer 8 y a continuación no admiten la sintaxis para múltiples formatos de fuente, y trata todo el valor de la SRC propiedad como la URL.

La sintaxis a prueba de balas truca Internet Explorer 8 y por debajo para pensar que las URL restantes son parte del identificador de fragmento de la primera URL. Debido a que los identificadores de fragmentos se ignoran al descargar archivos, Internet Explorer 8 y por debajo, simplemente use la primera URL.

Los navegadores que no sean Internet Explorer saltarán la línea porque no admiten EOT.

El resto de las entradas son lo que usted esperaría: Formatos de fuentes enumerados en orden de preferencia.

¿Pero la sintaxis a prueba de balas sigue siendo relevante? No. De hecho, creo que es dañino. Las fuentes SVG están desaprobadas y solo son compatibles con los navegadores que ya no están en uso.

La mayoría de los sitios web son compatibles con Internet Explorer 9 y más, pero la sintaxis enumera EOT como el primer formato de fuente preferido. A pesar de que Internet Explorer 9 y UP Support Woff, esas versiones aún descargarán el archivo EOT, simplemente porque se enumera primero.

Debido a que la mayoría de los sitios web ya no admiten los navegadores antiguos, recomiendo encarecidamente usar una sintaxis simplificada. Esta sintaxis simplificada cubre todos los navegadores modernos, así como los ligeramente mayores que aún están en uso activo, como Android 4.4 y antes: 

 @ FUTT-FACE {
  Fuente-familia: Elena;
  SRC: Formato URL (ELENA.WOFF2) ("WOFF2"),
       Formato URL (ELENA.WOFF) ("WOFF"),
       Formato URL (ELENA.OTF) ("OpenType");
}

A pesar de que aún se utilizan versiones anteriores de Android, la confianza en todo el mundo en estos navegadores está disminuyendo rápidamente. Pronto, es probable que usted también pueda eliminar el formato RAW OpenType, y simplificará aún más la sintaxis: 

 @ FUTT-FACE {
  Fuente-familia: Elena;
  SRC: Formato URL (ELENA.WOFF2) ("WOFF2"),
       Formato URL (ELENA.WOFF) ("WOFF");
}

En este caso, alguien que ejecuta un navegador anterior simplemente verá sus fuentes de deformación en lugar de la fuente web. Esta bien; Todavía pueden leer el contenido en la fuente Fallback.

Hay otro valor posible para el SRC Descriptor. los local La función toma el nombre de una familia de fuentes local. Si la fuente pasa a instalarse en el sistema, el navegador lo usará en su lugar, evitando así una descarga adicional. 

 @ FUTT-FACE {
  Fuente-familia: Elena;
  SRC: Local ("Elena"),
       Formato URL (Elena-regular.woff2) ("woff2"),
       Formato URL (ELENA-regular.woff) ("woff");
}

Si bien esto puede parecer una gran optimización, nada garantiza que la fuente local coincide con su fuente web.

Puede obtener una versión diferente de la fuente, una fuente con un soporte de idiomas diferente, o incluso una fuente completamente diferente. Por esa razón, generalmente recomiendo no usar el local Función a menos que encuentre estas desventajas aceptables.

Este es un extracto de Bram Stein. Manual de Webfont , de un libro aparte. En él, explora qué considerar al seleccionar fuentes web, cómo usarlas de manera efectiva y cómo optimizar para el rendimiento.

Artículos relacionados:

  • ¿Qué diablos es Blockchain?
  • 30 extensiones de cromo para diseñadores web y devs
  • 20 increíbles fuentes gratuitos web de Google

Cómo - Artículos más populares

Construye un chatbot AI-Powered

Cómo Sep 17, 2025

[dieciséis] Inteligencia artificial (AI) nos permite crear nuevas formas de ver los problemas existentes, de repensar estrategias ambi..

Cómo pintar arte de animación colorido en Photoshop

Cómo Sep 17, 2025

[dieciséis] Durante este tutorial de Photoshop, iré a través de varios conceptos clave que utilizo como ilustrador. Estaré hablando..

Haz animaciones de vehículos con IClone 7

Cómo Sep 17, 2025

[dieciséis] Creando animaciones o Películas en 3D Implicar vehículos con ruedas puede presentar algunas complicaciones, y..

Exportar After Effects Animations a HTML5

Cómo Sep 17, 2025

[dieciséis] La animación en la web está aquí para quedarse. Está en todo, desde los movimientos sutiles que ayudan a traer nuestro..

Entornos maestros a gran escala en 3DS MAX

Cómo Sep 17, 2025

[dieciséis] El objetivo de esta pieza era producir un pedazo de Arte 3d Eso está listo para ir directamente desde el búfe..

Cómo dibujar una nariz

Cómo Sep 17, 2025

[dieciséis] Dominar cómo dibujar una nariz es una de las partes más difíciles de dibujar una cara. Tal vez sea la diversidad de las..

Cómo crear efectos asombrosos con formas CSS

Cómo Sep 17, 2025

[dieciséis] Los desarrolladores frontend tienden a pensar en rectángulos; Rectángulos dentro de los rectángulos dentro de los rect�..

Comience con prototipos en Adobe XD

Cómo Sep 17, 2025

A medida que la demanda de profesionales de diseño de UX sigue creciendo, los diseñadores están buscando herramientas fáciles de usar que son lo suficientemente poderosas para crear proto..

Categorías