web font loading recipes
1.0.0
Un montón de demostraciones para diferentes estrategias de carga de fuentes web. Algunos de estos se incluyen en una guía completa para las estrategias de carga de fuentes, algunas de ellas son más experimentales .
Las demostraciones están alojadas en https://www.zachleat.com/web-tonts/demos/
Como las fuentes web son una mejora progresiva y con un soporte creciente para la API de carga de fuentes CSS, podemos esperar un momento en el que no necesitaremos en línea un polifle en el encabezado (para una carga de fuente aún más rápida). Las recetas de API de carga CSS simplificadas son los valores predeterminados, pero las versiones polyfriadas se incluyen para un soporte de navegador más amplio, no solo las versiones polyfriadas mostrarán fuentes web en los navegadores web de Internet Explorer y Edge (que no tienen soporte para la API de carga de fuentes CSS).
font-display: swap@font-facepreload<link> etiquetafont-display: swap con preload<link> etiqueta y css : @font-facefont-display y preloadSimilar a lo anterior, pero sin usar una clase, utilizando solo la API de carga de fuentes CSS. Esto no requiere ninguna modificación del CSS, inyecta las fuentes web utilizando JS programáticamente. Primero vi este método en el manual webfont de @bramstein.
.style.fontFamily Method (solo funciona bien con una familia por página), primero lo vi en un tweet de @simevidasCarga de dos etapas, utilizando un archivo de fuente romana en la primera etapa (con síntesis de fuentes).
preload<link> etiqueta y javascript : CSS Font Loading APIfont-display: optional con JavaScript.preload , con un polyfill alternativo emulando a font-display: optional<link> etiqueta y javascript : CSS Font Carging API y FontFaceObserver PolyfillEstas no son necesariamente estrategias de carga de fuentes por su cuenta, pero son mejoras adicionales en las que puede superponerse y combinarse con las estrategias existentes.
Opta fuera de las fuentes web en velocidades de conexión lentas.
prefers-reduced-motion Opta fuera de las fuentes web cuando el usuario ha habilitado Reduce Motion .
save-data Opta fuera de las fuentes web cuando el usuario ha habilitado el modo de Data Saver .
Probablemente verás publicaciones de blog sobre estas en algún momento.
font-display: optionalVamos. ?
Los viejos navegadores solían renderizar a FOIT sin un tiempo de espera, lo que en la práctica hizo de las fuentes web un solo punto de falla. El uso de Woff2 solo corta la mostaza a los navegadores modernos que tienen un tiempo de espera de tres segundos para FOIT para fuentes web. Somos un texto anti-invisible aquí, pero vale la pena mencionar este enfoque.
font-synthesis no es un buen producto final.
<style> inyección Cualquier cosa que use JavaScript para inyectar un nuevo <style> con los bloques @font-face en el interior. Mal mal costo de repintado, evite esto. Esto se usa en el método de URI de datos asincrónicos anteriores, pero también es común en métodos de peor rendimiento.
font-display: optional y preloadpreload con font-display: optional es un antipatrónfont-display (mezclar valores de font-display en una font-family )Este método actualmente no tiene soporte de navegador cruzado. Espero que esto cambie, aprende más.
swap / 3 optional ) Esto es algo común que la gente intenta: cargan asincrónicamente el CSS (y solo el CSS). Diablos, usé este comportamiento antes de comenzar a estudiar la carga de fuente web.
@supports y font-displayfont-displayfont-display no es compatible (y funciona bien sin dependencias de JS)@supports no funciona con descriptores de fuentes de fuentes.font-family Coloque dos o más fuentes web font-family en una sola pila font-family .
Falló : el algoritmo de coincidencia de fuentes selecciona la primera fuente web que coincide e intenta cargarla (ignorando las familias de fuentes web posteriores). Incluso si preload la primera etapa del subconjunto, se cambiará debido a la prioridad del pedido de font-family .
Código
Manifestación
ACTUALIZACIÓN : Si bien puede mitigar el problema anterior con font-display , tal vez modificando el orden de la pila font-family y el pedido en el bloque @font-face , todavía hay problemas para eliminar la fuente web de subconjunto innecesario de la página después de que se ha cargado la versión más grande. Las características de la fuente que ocurren con los glifos que cruzan estos límites de archivo de fuente se romperán (kerning, ligaduras, etc.). Relacionado, no puede eliminar un objeto FontFace pareado a CSS utilizando la API de carga de fuente CSS (según la especificación).
** Tenga en cuenta que estos métodos se realizarán en Internet Explorer y Edge aprovechando su comportamiento de carga predeterminado de fuentes.
