Guía del usuario Cancelar

Personalizar el funcionamiento de las fuentes web con los ajustes de font-display

  1. Guía del usuario de Adobe Fonts
  2. Introducción
    1. Requisitos del sistema y de suscripción
    2. Compatibilidad con navegadores y sistemas operativos
    3. Añadir fuentes en el ordenador
    4. Añadir fuentes al sitio web
    5. Añadir fuentes en CC Mobile
  3. Licencias de fuentes
    1. Licencias de fuentes
    2. Administrar la cuenta
    3. Licencias para clientes de Creative Cloud para empresas
    4. Añadir licencias de fuentes a la cuenta
    5. Eliminación de fuentes de la biblioteca de suscripción
    6. Adobe Fonts no está disponible para Adobe ID registrados en China
    7. ¿Por qué no se incluyen estas fuentes con mi suscripción a Creative Cloud?
    8. Retirada de fuentes de Morisawa en septiembre de 2021
  4. Obtener y usar fuentes
    1. Uso de Adobe Fonts en las aplicaciones de Creative Cloud
    2. Administrar las fuentes
    3. Resolver problemas por fuentes no disponibles en las aplicaciones de escritorio
    4. Uso de fuentes en InDesign
    5. Fuentes y tipografía
    6. Uso de fuentes web en documentos HTML5 Canvas
    7. Uso de fuentes en InCopy
    8. Cómo usar fuentes en Adobe Muse
    9. Uso de fuentes web en Muse
    10. Empaquetar archivos de fuentes
    11. Guía de solución de problemas: añadir fuentes
    12. Las fuentes añadidas no aparecen en el menú de fuentes
    13. “No es posible añadir una o más fuentes” o “Fuente con mismo nombre ya instalada”
    14. ¿Qué sucede cuando la fuente que estoy utilizando la modifica el creador o empresa tipográfica?
  5. Diseño y desarrollo web
    1. Añadir fuentes al sitio web
    2. Guía de solución de problemas: Añadir fuentes a un sitio web
    3. Uso de fuentes web en correos electrónicos HTML o newsletters
    4. Uso de fuentes web con Accelerated Mobile Pages (AMP)
    5. Selectores CSS
    6. Personalizar el funcionamiento de las fuentes web con los ajustes de font-display
    7. Códigos incrustados
    8. Subconjuntos dinámicos y alojamiento de fuentes web
    9. Eventos de fuentes
    10. ¿Por qué mis fuentes web proceden de use.typekit.net?
    11. El sitio no puede conectarse a use.typekit.net
    12. Uso de fuentes web con CodePen
    13. Compatibilidad con navegadores y sistemas operativos
    14. Dominios
    15. Uso de fuentes web al desarrollar de forma local
    16. Política de seguridad de contenido
    17. Impresión de fuentes web
  6. Compatibilidad con idiomas y funciones OpenType
    1. Compatibilidad con idiomas y subconjuntos
    2. Uso de funciones OpenType
    3. Sintaxis de funciones OpenType en CSS
  7. Tecnología de fuentes
    1. Fuentes de color de OpenType-SVG
    2. Ten Mincho: aspectos importantes sobre la actualización de la versión 1.000

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:

Valor 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:

  1. En su página de proyectos web, haga clic en  Editar proyecto.

    Editar proyecto
    Editar proyecto

  2. 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.  

    parámetros de font-display

  3. 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

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?