A partir de Chrome 83, Verknüpfung rel = «preload» y font-display: opcional se puede combinar para borrar el jank de diseño por completo
En Chrome 83, se han realizado nuevas mejoras en la carga de fuentes para borrar por completo el cambio de diseño y el destello de texto invisible (FOIT) cuando las fuentes opcionales están precargadas.
Al aprovechar al máximo los ciclos de renderizado, Chrome 83 elimina el cambio de diseño al precargar fuentes opcionales. Combinatorio <enlace rel="preload"> mit Schriftanzeige: optional es la forma más eficaz de asegurar que no haya problemas de diseño al renderizar fuentes personalizadas.
Compatibilidad del Browser
Consulte los datos de MDN para conseguir información actualizada sobre compatibilidad entre Browser:
Schriftdarstellung
El cambio de diseño, o rediseño, ocurre cuando un recurso en una página Netz cambia dinámicamente, lo que resulta en un «cambio» de Inhalt. Conseguir y renderizar fuentes web puede provocar cambios de diseño de forma directa de una de estas dos formas:
- Eine alternative Schriftart wird in eine neue geändert ("nicht gestylter Textblitz").
- "Unsichtbarer" Text wird angezeigt, bis eine neue Schriftart auf der Seite gerendert wird ("unsichtbarer Textblitz").
Das CSS Schriftanzeige Die Eigenschaft bietet eine Möglichkeit, das Renderverhalten von benutzerdefinierten Schriftarten über eine Reihe verschiedener unterstützter Werte zu ändern (Wagen, Block,
Tauschen, Zurückfalleny Optional). La elección del valor a usar depende del comportamiento preferido de las fuentes cargadas de forma asincrónica. A pesar de todo, cada uno de estos valores admitidos puede desencadenar un rediseño de una de las dos formas enumeradas previamente, ¡hasta ahora!
Optionale Schriftarten
das Schriftanzeige La propiedad usa una línea de tiempo de tres períodos para manejar las fuentes que deben descargarse antes de que se puedan procesar:
- Blockieren: Rendert "unsichtbaren" Text, wechselt jedoch zur Web-Schriftart, sobald der Ladevorgang abgeschlossen ist.
- Wechseln: Renderice el texto utilizando una fuente del sistema de reserva, pero cambie a la fuente web tan pronto como termine de cargarse.
- Scheitern: Rendern Sie den Text mit einer Schriftart aus dem Reservierungssystem.
Previamente, las fuentes designadas con Schriftanzeige: optional tenía un período de bloqueo de 100 ms y ningún período de intercambio. Esto significa que el texto «invisible» se muestra muy brevemente antes de cambiar a una fuente alternativa. Si la fuente no se descarga en 100 ms, se utiliza la fuente alternativa y no se produce ningún intercambio.
Schriftanzeige: optional Verhalten in Chrome beim Herunterladen der Schriftart anschließend die Sperrzeit von 100 msA pesar de todo, en el caso de que la fuente se descargue antes de que finalice el período de bloque de 100 ms, la fuente personalizada se procesa y utiliza en la página.
Schriftanzeige: optional Verhalten in Chrome beim Herunterladen der Schriftart vorher die Sperrzeit von 100 msChrome rendert die Seite erneut zweimal en ambos casos, independientemente de si se usa la fuente alternativa o si la fuente personalizada termina de cargarse a tiempo. Esto provoca un ligero parpadeo de texto invisible y, en los casos en que se renderiza una nueva fuente, un tirón de diseño que mueve parte del contenido de la página. Esto sucede inclusive si la fuente se almacena en la memoria Zwischenspeicher del disco del navegador y puede cargarse mucho antes de que finalice el período de bloqueo.
Optimierungen han aterrizado en Chrome 83 para borrar por completo el primer ciclo de renderizado para fuentes opcionales que están precargadas con <enlace rel="preload'>. En cambio, la renderización se bloquea hasta que la fuente personalizada haya finalizado de cargarse o haya transcurrido un cierto período de tiempo. Este período de tiempo de espera se define en este momento en 100 ms, pero ciertamente cambie en un futuro próximo para aprovechar al máximo el rendimiento.
Schriftanzeige: optional Verhalten in Chrome, wenn Schriftarten vorinstalliert und Schriftarten heruntergeladen werden anschließend die 100 ms Blockperiode (kein blinkender unsichtbarer Text)
Schriftanzeige: optional Verhalten in Chrome, wenn Schriftarten vorinstalliert und Schriftarten heruntergeladen werden vorher die 100 ms Blockperiode (kein blinkender unsichtbarer Text)La precarga de fuentes opcionales en Chrome elimina la oportunidad de alteraciones en el diseño y destellos de texto sin estilo. Esto coincide con el comportamiento requerido como se especifica en Modul für CSS-Schriftarten der Stufe 4 donde las fuentes opcionales nunca deberían causar un rediseño y los agentes de Nutzername pueden, en cambio, retrasar el renderizado durante un período de tiempo adecuado.
Aún cuando no hace falta precargar una fuente opcional, mejora enormemente la oportunidad de que se cargue antes del primer ciclo de renderizado, fundamentalmente si todavía no está almacenada en la caché del navegador.
Fazit
Das Chrome-Team ist daran interessiert, Ihre Erfahrungen mit dem Vorladen optionaler Schriftarten mit diesen neuen Optimierungen zu hören. Sende ein Ärger Wenn Sie ein Problem haben oder einen Funktionsvorschlag hinterlassen möchten.
