Posteriormente a investigar en varios repositorios y foros al final nos hemos encontrado la respuesta que te enseñaremos aquí.
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-family
font-feature-settings
font-style
font-variant
font-weight
font-stretch
src
unicode-range
@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 |
Si crees que ha sido de ayuda este post, sería de mucha ayuda si lo compartieras con otros entusiastas de la programación de este modo contrubuyes a difundir nuestra información.