Valor de font-display
Última actualización el
11 jul 2023
Descubra cómo utilizar los ajustes de font-display para modificar el funcionamiento de las fuentes web.
Los parámetros de font-display (visualización de fuentes) le permiten especificar cómo se cargan las fuentes web en el navegador web y cómo se aplican en su sitio web. Hay cinco opciones de font-display:
|
|
Acción resultante |
|---|---|
|
auto (automático) |
Permite al explorador usar su método predeterminado para cargar la fuente. |
|
block (bloqueo) |
Oculta el texto en su sitio web hasta que se descargue la fuente web. Los que visiten su sitio web podrán ver un parpadeo de texto invisible o FOIT con esta opción. |
|
swap (intercambio) |
Muestra la fuente alternativa que haya indicado en el CSS hasta que se descargue la fuente web. Es posible que los visitantes de tu sitio web vean un destello de texto sin estilo o FOUT con esta opción. |
|
fallback (alternativa) |
Ejecuta la acción resultante del valor block durante un breve período, luego pasa a la acción de swap y finalmente aplica la fuente alternativa al texto.Si las Web Fonts no se han cargado al final del período de intercambio, se sigue usando la fuente de reserva. |
|
optional (opcional) |
Ejecuta la acción resultante de block durante un breve período y luego aplica la fuente alternativa al texto. El Valor le da al explorador web la opción de no descargar la fuente web en absoluto, por ejemplo, si el visitante del sitio web tiene una conexión a Internet lenta. |
Para consultar los datos técnicos sobre la propiedad font-display y los valores admitidos, consulte la Especificación de nivel 4 del módulo de fuentes CSS.
Nota
De forma predeterminada, los proyectos de fuentes web se crean mediante la propiedad font-display con el valor auto.
Para personalizar los parámetros de font-display, realice los siguientes pasos:
En su página de proyectos web, haga clic en Editar proyecto.
Seleccione cualquiera de los siguientes valores de font-display en la barra lateral.De forma predeterminada, la configuración de font-display de los proyectos de fuente web está establecida en auto.
Haga clic en Guardar cambios y el valor de font-display se aplicará a su sitio web en cuestión de minutos.
El nuevo parámetro de font-display se incluye automáticamente en su sitio web dentro del código incrustado existente.
Modificar proyectos web existentes
La compatibilidad con font-display se añadió al sistema de carga de fuentes web de Adobe en septiembre de 2020. Los proyectos web creados antes de septiembre de 2020 se han actualizado para usar la configuración predeterminada font-display: auto .
El parámetro de font-display de cualquier proyecto existente se puede cambiar siguiendo los pasos anteriores. Una vez guardados los cambios, el nuevo parámetro de font-display se incluirá en su sitio web dentro del código incrustado existente. No es necesario realizar cambios en el sitio web.
Explorar Adobe Fonts
Encuentra el tipo de letra perfecto para cualquier proyecto web o de impresión.
