Al usar fuentes web, el texto será invisible hasta que se cargue la fuente web o pasen tres segundos, momento en el que se usa la fuente alternativa.
Font-display permite personalizar cómo se muestran las fuentes web cuando se representa la página.
Se aplica utilizando la regla @font-face que define las fuentes personalizadas en una hoja de estilo.
Sintaxis:
@font-face {
font-family: Sample;
src: url(samplefont.woff) format('woff'),
url(samplefontbold.woff) format('woff');
font-weight: normal;
font-style: normal;
font-display: optional;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>CSS | font-display</title>
<meta name='viewport' content="width=device-width, initial-scale=1">
<style>
@font-face {
font-family: Roboto;
src: url(Roboto\Roboto-BoldItalic.ttf) format('truetype');
font-style: italic;
font-weight: bold;
font-display: block;
}
div{
font-family: Roboto;
font-style: italic;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Usage of font-display</h1>
<div>Downloaded font</div>
<p>Normal font</p>
</body>
</html>
Producción:
La fuente descargada aparece después de un breve espacio de tiempo. Intente ejecutarlo en IDE para verlo.
La línea de tiempo de la propiedad font-display se divide en tres períodos:
- Bloquear
- Intercambio
- Falla
Período de bloqueo: el texto será invisible hasta que la fuente web no se haya cargado, el procesamiento está bloqueado en este período.
Período de intercambio: Originalmente, la fuente alternativa se usa para representar texto, si la fuente web se carga correctamente durante el período de intercambio, la fuente alternativa se intercambia con la fuente web.
Período de error: En este punto, se considera que la carga ha fallado y se debe utilizar la fuente alternativa.
Esta propiedad acepta los siguientes valores:
- Automático (valor inicial): en este valor, el navegador elige la técnica de visualización de fuente. Esto suele ser similar al valor de bloque.
- Bloque: va por un período de bloque pequeño y luego pasa a un período de intercambio infinito, por lo que la representación se permite infinitamente. En una forma más simple, oculta el texto hasta que se carga la fuente web.
- Intercambio: con este valor, la fuente se proporciona con un período de bloque mínimo y un período de intercambio infinito. Utiliza una fuente alternativa hasta que se carga la fuente web
- Fallback: le da a la fuente un período de bloqueo mínimo (100 ms) y un período de intercambio pequeño (alrededor de 3 segundos). Intenta cargar la fuente web durante un período breve, luego entra en un período de error y utiliza una fuente alternativa.
- Opcional: le da a la fuente un período de bloqueo mínimo y ningún período de intercambio. Oculta el texto durante un breve período de tiempo y luego utiliza una fuente alternativa hasta que la fuente web es la fuente personalizada que está disponible para su uso.
Publicación traducida automáticamente
Artículo escrito por jnikita356 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA