Share
Las fuentes web ayudaron a dar vida a los diseños, y nos ayudaron a evitar los valores predeterminados del sistema tan ampliamente utilizados durante los primeros días del diseño web. Con tantas opciones disponibles en la actualidad, tenemos muchos trucos en nuestras mangas para servir y diseñar fuentes personalizadas. El nivel 4 del módulo de fuentes CSS describe las opciones más interesantes que te encantarán, incluidas algunas propiedades interesantes, como font-min / max-size. Este artículo no descubrirá todas las migajas del nivel 4, pero destacará las partes interesantes que aún se encuentran en su infancia. La aventura comienza ahora.!
Actualmente nos ubicamos entre dos niveles de especificaciones. Por un lado tenemos nivel 3; una especificación que se encuentra en la "Recomendación del candidato" desde octubre de 2013. De cara al futuro tenemos el nivel 4; una especificación que ha estado en "Borrador de trabajo" desde julio de 2017. Si necesita un recordatorio sobre el orden de las etapas de especificación W3C, tomemos un momento para revisarlas:
Ahora que entendemos las etapas de especificación, vamos a sumergirnos en las entrañas del nivel 4 y sacar a la luz algunas de las características conocidas y documentadas que son nuevas en este módulo..
Las partes del nivel 3 que se estandaricen se trasladarán al nivel 4, pero el nivel 4 también incluirá sus propias adiciones únicas. Secciones como Variaciones de fuente, Controles de representación de fuentes, Compatibilidad con fuentes de color, Propiedades de fuente básicasyLos recursos de fuentes contendrán elementos nuevos que muchos desarrolladores encontrarán útiles.
La fuente de fuente particular representada está determinada por la Familia tipográfica y otras propiedades de fuente que se aplican a un elemento dado, como peso de fuente y Estilo de fuente por ejemplo. Esta estructura permite que los ajustes varíen independientemente entre sí y lo que abarca Propiedades de fuente básicas. Entonces, ¿qué hay planeado para este grupo??
.elemento font-min-size: 0.875rem; font-max-size: 5rem;
De todo lo que se describe en el nivel 4, estas dos propiedades son mis favoritas porque ambas permitirán un elemento tamaño de fuente para “sujetarse” entre los valores suministrados. Esta es, sin duda, una noticia estupenda para los fanáticos del diseño. Los valores pueden ser un tamaño absoluto, un tamaño relativo o un porcentaje de longitud..
No hay ninguna documentación en este momento que indique cómo el evento de cambio de tamaño del navegador activa cualquiera de las propiedades, y si está buscando experimentar con esta característica utilizando la marca de características de la plataforma web experimental en Chrome, no tiene suerte..
La mayoría de los elementos descritos en esta sección ayudan a controlar aspectos relacionados con la obtención, referencia y visualización de la familia de fuentes de su elección..
@ font-face font-display: auto | bloque permuta repliegue Opcional;
Esta propiedad determina cómo se muestra la fuente de una fuente, en función de si se ha descargado y está lista para usar con el navegador. También está destinado para su uso dentro de su @Perfil delantero o @ font-feature-values declaración.
Accentsconagua
auto: La política de visualización de la fuente está definida por el usuario-agente (es decir, el navegador) a menos que se defina explícitamente en CSS.bloquear: Le da a la fuente un corto período de bloque (se recomienda 3s en la mayoría de los casos) y un período de intercambio infinito.intercambiar: Le da a la fuente un período de bloque de 0s y un período de intercambio infinito.retroceder: Le da a la fuente un período de bloque extremadamente pequeño (se recomienda 100 ms o menos en la mayoría de los casos) y un período de intercambio corto (se recomienda 3s en la mayoría de los casos).Opcional: Le da a la fuente un período de bloque extremadamente pequeño (en la mayoría de los casos se recomienda 100 ms o menos) y un período de intercambio de 0s.Para cualquiera que preste mucha atención al rendimiento de la fuente web y que esté ocupado a diario debatiendo FOUT o FOIT, Entonces esta propiedad te hará extremadamente satisfecho.
@ font-feature-values font-display: auto | bloque permuta repliegue Opcional;
Cuando fuente de visualización se omite en un @Perfil delantero regla, el agente de usuario utiliza la fuente de visualización valor establecido a través de @ font-feature-values para el relevante Familia tipográfica si uno está configurado, de lo contrario, por defecto fuente-pantalla: auto. Ver la explicación previa sobre fuente de visualización valores.
El conjunto de reglas es perfecto para los casos en que una fuente se sirve a través de un tercero y usted no tiene control sobre la fuente. @Perfil delantero reglas, pero todavía son capaces de establecer un valor predeterminado fuente de visualización política para el proporcionado Familia tipográfica. Esta es una buena noticia para aquellos sitios de construcción con acción de terceros sin parar.
@ font-feature-values font-family: "Nombre de fuente personalizado", sans-serif; fuente-pantalla: alternativa;
Aunque todavía es nuevo y algo vago, solo puedo asumir para controlar un determinado Familia tipográfica comportamiento de la pantalla, el desarrollador debe utilizar el Familia tipográfica propiedad dentro de este conjunto de reglas para apuntar a la fuente deseada. Nuevamente, esto es solo una suposición de mi parte y no es un hecho de ninguna manera..
Esta sección es 100% nueva y específica para el nivel 4. La mayoría de las funciones actualmente documentadas se refieren al tamaño y la configuración de cada fuente..
Esta propiedad se utiliza para mantener rasgos estilísticos y mejorar la legibilidad en diferentes tamaños ópticos. Con el tipo digital tenemos la capacidad de escalar una fuente a cualquier tamaño, pero esto no tiene en cuenta la apariencia del tipo en estos tamaños variables.
“El texto que se representa en diferentes tamaños a menudo se beneficia de representaciones visuales ligeramente diferentes. Por ejemplo, para facilitar la lectura en tamaños de texto pequeños, los trazos suelen ser más gruesos con remates más grandes. El texto más grande a menudo tiene una figura más delicada con más contraste entre trazos más gruesos y más finos ".
.element font-optical-sizing: auto | ninguna
auto: El agente de usuario puede modificar la forma de los glifos en función de la tamaño de fuente y la densidad de píxeles de la pantalla. Para las fuentes OpenType y TrueType que usan variaciones de fuente, esto se hace a menudo usando el opsz variación de fuente.ninguna: El agente de usuario no debe modificar la forma de los glifos para el tamaño óptico..elemento fuente-variación-configuración: normal | El]
Esta propiedad proporciona un control de bajo nivel sobre las variaciones de fuente OpenType o TrueType. Está pensado como una forma de proporcionar acceso a las variaciones de fuente que no se utilizan ampliamente, pero que son necesarias para un caso de uso particular.
normal: El texto se presenta utilizando la configuración predeterminada. .elemento / * nombre y número de eje de cuatro letras * / font-documentation-settings: "opsz" 0.5;
El valor de cadena utilizado en el código anterior se conoce como el nombre del eje de cuatro letras que describe la característica que desea modificar, junto con el valor de variación que generalmente varía de 0 a 1, pero también pueden ser valores negativos cuando sea necesario. Las variaciones permitidas dependerán siempre de la fuente elegida..
Las fuentes de color son nuevas en el nivel 4 y permiten que los archivos de fuente describan no solo los contornos que describen los bordes de los glifos, sino también los colores presentes dentro de los glifos. ¿Por qué querrías usar alguna de estas características? Sugiero leer este artículo de Grace Fussell para ponerse al día:
.elemento font-palette: normal | luz | oscuro |;
Muchos formatos de archivo de fuente de color permiten parametrizar los colores dentro de los glifos. En estas fuentes, los colores están referenciados por índice al describir la geometría de cada glifo. Estos índices se resuelven dentro de una paleta activa actual usando una tabla de búsqueda presente dentro de la fuente. Sin embargo, muchas fuentes contienen múltiples paletas, cada una con un conjunto de colores complementarios elegidos por el diseñador de fuentes para proporcionar resultados visuales agradables. Los desarrolladores pueden definir una paleta usando el @ font-palette-valores regla mencionada en la siguiente sección.
/ * Sintaxis * / @ font-palette-values/ * Ejemplo * / @ font-palette-values Augusta font-family: Handover Sans; paleta base: 3; 1: rgb (43, 12, 9); 3: var (- resaltar);
Esto representa una paleta de colores utilizados en una fuente. Define una paleta de colores y asocia esa paleta de colores con una fuente específica. Esto permite que un autor web seleccione colores arbitrarios para usar dentro de una fuente de color en lugar de limitarse a las paletas preexistentes dentro de los archivos de fuentes
paleta base: Este descriptor especifica una paleta en la fuente que la regla que contiene @ font-palette-values usa como un valor inicial. Si no .element font-family: 'Custom Font Name'; fuente-presentación: auto | texto | emoji;
Esta propiedad permite a los autores web seleccionar si la presentación de emoji o la presentación de texto se utilizan para ciertos puntos de código de emoji. Una gran victoria para los fanáticos del emoji 😎
Ciertamente, hay muchas características nuevas y emocionantes en el futuro para las fuentes web y te animo a que comiences a experimentar con tus favoritos a medida que estén disponibles. Si tiene un favorito en particular del nivel 4 o incluso del nivel 3, háganoslo saber en los comentarios, incluidas las opiniones que tenga sobre las funciones que hemos analizado..
!
