Fuentes CSS es un módulo de CSS que define las propiedades relacionadas con la fuente y cómo se cargan los recursos de la fuente. Le permite definir el estilo de una fuente, como su familia, tamaño y peso, altura de línea y las variantes de glifos para usar cuando hay varios disponibles para un solo carácter.

Ejemplo básico

El siguiente ejemplo muestra un uso simple de propiedades de fuente básicas para aplicar estilo a un párrafo de texto.

pwidth: 600px;margin: 0 auto;font-family:"Helvetica Neue","Arial", sans-serif;font-style: italic;font-weight: 100;font-variant-ligatures: normal;font-size: 2rem;letter-spacing: 1px;
<p>Three hundred years ago<br>
  I thought I might get some sleep<br>
  I stretched myself out onna antique bed<br>
  An' my spirit did a midnite creepp>

El resultado es el siguiente:

Ejemplos de fuentes variables

Puede encontrar varios ejemplos de fuentes variables en v-fonts.com y axis-praxis.org; consulte también nuestra guía de fuentes variables para obtener más información e información de uso.

Referencia

Propiedades

  • font
  • font-family
  • font-feature-settings
  • font-kerning
  • font-language-override
  • font-optical-sizing
  • font-size
  • font-size-adjust
  • font-stretch
  • font-style
  • font-synthesis
  • font-variant
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-ligatures
  • font-variant-numeric
  • font-variant-position
  • font-variation-settings
  • font-weight
  • line-height

En reglas

@font-face
@font-feature-values

Guías

Estilo de fuente y texto fundamental
En este artículo de aprendizaje para principiantes, analizamos todos los fundamentos básicos del estilo de texto / fuente en detalle, incluida la configuración del peso de la fuente, la familia y el estilo, la taquigrafía de la fuente, la alineación del texto y otros efectos, y el espaciado entre líneas y letras.
Guía de funciones de fuentes OpenType
Las características o variantes de fuente se refieren a diferentes glifos o estilos de carácter contenidos en una fuente OpenType. Estos incluyen cosas como ligaduras (glifos especiales que combinan caracteres como ‘fi’ o ‘ffl’), kerning (ajustes al espaciado entre pares de formas de letras específicas), fracciones, estilos numéricos y muchos otros. Todos estos se denominan características OpenType y están disponibles para su uso en la web a través de propiedades específicas y una propiedad de control de bajo nivel: font-feature-settings. Este artículo le proporciona todo lo que necesita saber sobre el uso de las funciones de fuente OpenType en CSS.
Guía de fuentes variables
Fuentes variables son una evolución de la especificación de fuente OpenType que permite incorporar muchas variaciones diferentes de un tipo de letra en un solo archivo, en lugar de tener un archivo de fuente separado para cada ancho, peso o estilo. Este artículo le brindará todo lo que necesita saber para comenzar a usar fuentes variables.

Especificaciones

Especificación Estado Comentario
Módulo de fuentes CSS, nivel 4 Borrador de trabajo Agrega font-variation-settings (y propiedades de nivel superior relacionadas) y font-optical-sizing.
Módulo de fuentes CSS nivel 3 Recomendación Agrega font-feature-settings (y propiedades de nivel superior relacionadas)
CSS Nivel 2 (Revisión 1) Recomendación
Nivel 1 de CSS Recomendación Definición inicial