Valor de font-display
Última actualización el
23 jun. 2023
- Guía del usuario de Adobe Fonts
- Introducción
- Licencias de fuentes
- Licencias de fuentes
- Administrar la cuenta
- Licencias para clientes de Creative Cloud para empresas
- Añadir licencias de fuentes a la cuenta
- Eliminación de fuentes de la biblioteca de suscripción
- Adobe Fonts no está disponible para Adobe ID registrados en China
- ¿Por qué no se incluyen estas fuentes con mi suscripción a Creative Cloud?
- Retirada de fuentes de Morisawa en septiembre de 2021
- Obtener y usar fuentes
- Uso de Adobe Fonts en las aplicaciones de Creative Cloud
- Administrar las fuentes
- Resolver problemas por fuentes no disponibles en las aplicaciones de escritorio
- Uso de fuentes en InDesign
- Fuentes y tipografía
- Uso de fuentes web en documentos HTML5 Canvas
- Uso de fuentes en InCopy
- Cómo usar fuentes en Adobe Muse
- Uso de fuentes web en Muse
- Empaquetar archivos de fuentes
- Guía de solución de problemas: añadir fuentes
- Las fuentes añadidas no aparecen en el menú de fuentes
- “No es posible añadir una o más fuentes” o “Fuente con mismo nombre ya instalada”
- ¿Qué sucede cuando la fuente que estoy utilizando la modifica el creador o empresa tipográfica?
- Diseño y desarrollo web
- Añadir fuentes al sitio web
- Guía de solución de problemas: Añadir fuentes a un sitio web
- Uso de fuentes web en correos electrónicos HTML o newsletters
- Uso de fuentes web con Accelerated Mobile Pages (AMP)
- Selectores CSS
- Personalizar el funcionamiento de las fuentes web con los ajustes de font-display
- Códigos incrustados
- Subconjuntos dinámicos y alojamiento de fuentes web
- Eventos de fuentes
- ¿Por qué mis fuentes web proceden de use.typekit.net?
- El sitio no puede conectarse a use.typekit.net
- Uso de fuentes web con CodePen
- Compatibilidad con navegadores y sistemas operativos
- Dominios
- Uso de fuentes web al desarrollar de forma local
- Política de seguridad de contenido
- Impresión de fuentes web
- Compatibilidad con idiomas y funciones OpenType
- Tecnología de fuentes
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. Los que visiten su sitio web podrán ver un parpadeo 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 fuentes web no se han cargado al terminar de ejecutarse el valor swap, la fuente alternativa seguirá aplicándose. |
|
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 navegador web la opción de no descargar la fuente web, por ejemplo, si el visitante del sitio web tiene una conexión lenta a Internet. |
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.
Editar proyecto Editar proyecto -
Seleccione cualquiera de los siguientes valores de font-display en la barra lateral. De forma predeterminada, la propiedad font-display de los proyectos de fuentes web tiene activada la opción 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 modificado para que se aplique de manera predeterminada la acción de 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 en sí.
Adobe MAX
La conferencia de creatividad
Del 14 al 16 de octubre en Miami Beach y en línea
Adobe MAX
La conferencia de creatividad
Del 14 al 16 de octubre en Miami Beach y en línea