Precarga de fuentes @ font-face?

Question

¿Es posible precargar o de otro tipo de letra caché @ font-face, muy probablemente con javascript, antes de que se cargue la página para que no se consigue ese feo salto cuando la página se carga finalmente no?

Answer 1

No estoy al tanto de cualquier técnica actual para evitar el parpadeo ya que las cargas de fuentes, sin embargo se puede minimizar mediante el envío de las cabeceras de caché apropiadas para su fuente y asegurándose de que esa petición pasa por la mayor rapidez posible.

Answer 2

Una técnica simple es poner esto en alguna parte en el índice:

<div class="font_preload" style="opacity: 0">
    <span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
    <span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
    ...
</div>

Probado en Chrome 34, Safari 7 y FF 29 y IE 11

Answer 3

Hay algunas técnicas para "precarga" aquí: http://paulirish.com/2009/fighting-the-font-face- fout /

Medio engañar al navegador para que descargue el archivo lo más rápido posible ..

También puede entregarlo como datos-uri, lo que ayuda mucho. y también se podría ocultar el contenido de la página y mostrarla cuando está listo.

Answer 4

2017: Ahora tiene precarga

  

MDN: El valor de precarga del atributo rel del elemento que permite   escribir declarativa ir a buscar solicitudes en el código HTML, especificando   los recursos de que sus páginas van a necesitar muy pronto después de la carga, que se   por lo tanto, que desee iniciar la precarga temprano en el ciclo de vida de una página   de carga, antes principales patadas maquinaria prestación de tu navegador. Esto   asegura que se ponen a disposición anterior y son menos propensos a   bloquear la página de primer render, que conduce a mejoras en el rendimiento.

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />

.

Es más útil para la precarga de fuente (no esperando a que el navegador para encontrar en un poco de CSS). También puede precargar algunos logotipos, iconos y secuencias de comandos.

Otras técnicas de pro / contras se discuten aquí (no es mi blog).

Answer 5

fuentes apropiado pre-carga es un gran agujero en la especificación HTML5. He pasado por todas estas cosas y la solución más fiable que he encontrado es utilizar Font.js:

http://pomax.nihongoresources.com/pages/Font.js/

Se puede utilizar para cargar fuentes utilizando la misma API que se utiliza para cargar imágenes

var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
  console.log("font loaded");
}

Es mucho más simple y más ligero que descomunal Fuente Web cargador de Google

Aquí está el repositorio GitHub para Font.js:

https://github.com/Pomax/Font.js

Answer 6

Este debería resolver su problema.

Para responder a su pregunta inicial: sí se puede . Sólo Gecko y WebKit navegadores soportan en la actualidad sin embargo.
Sólo tiene que añadir etiquetas de enlace en su cabeza:

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">

Answer 7

A través de Google webfontloader

var fontDownloadCount = 0;
WebFont.load({
    custom: {
        families: ['fontfamily1', 'fontfamily2']
    },
    fontinactive: function() {
        fontDownloadCount++;
        if (fontDownloadCount == 2) {
            // all fonts have been loaded and now you can do what you want
        }
    }
});

Answer 8

Lo hice añadiendo un poco de carta en el documento principal y lo hizo transparente y se le asigna el tipo de letra que quería cargar.

por ejemplo.

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>

Answer 9

Utiliza el estándar CSS Fuente Cargando API .

Esperar ( todos ) las fuentes a la carga, y luego mostrar su contenido:

document.fonts.ready.then((fontFaceSet) => {
    console.log(fontFaceSet.size, 'FontFaces loaded.');
    document.getElementById('waitScreen').style.display = 'none';
});

Demostración CodePen .

Answer 10

Hace poco estaba trabajando en un juego compatible con CocoonJS con DOM limitados para el elemento canvas - aquí está mi enfoque:

El uso de fillText con una fuente que no ha sido todavía cargado ejecutará correctamente, pero sin retroalimentación visual - por lo que el plano de la lona permanecerá intacta - todo lo que tiene que hacer es comprobar periódicamente el lienzo para cualquier cambio (por ejemplo, un bucle a través getImageData en busca de cualquier píxel no transparente) que va a pasar cuando se carga la fuente correctamente.

he explicado esta técnica un poco más en mi reciente artículo http: / /rezoner.net/preloading-font-face-using-canvas,686

Answer 11

Google tiene una buena biblioteca para esto: https://developers.google.com/webfonts/ docs / webfont_loader Se puede utilizar casi cualquier tipo de letra y los lib agregará clases a la etiqueta html.

Incluso le da Javascript eventos en cuando las fuentes certrain se cargan y activa!

No se olvide de servir a sus fontfiles gzip! sin duda va a acelerar las cosas!

Answer 12

Como ya he encontrado la mejor manera de precarga está haciendo es una hoja de estilo que contiene el tipo de letra, y luego dejar que el navegador para cargar automáticamente. Utilicé el font-face en otros lugares (en la página HTML), pero luego pude observar el efecto de fuente cambiando brevemente.

<link href="fonts.css?family=Open+Sans" rel="preload stylesheet" as="style">

A continuación, en el archivo font.css, especifique la siguiente manera.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('open-sans-v16-latin-regular.woff2') format('woff2'); /*  Super Modern Browsers */
}

No se puede asignar un nombre a las fuentes cuando está precargado a través etiqueta de enlace (corríjanme si me he equivocado no pude encontrar una manera aún), y por lo tanto usted tiene que utilizar font-face para asignar el nombre a la fuente. Aunque es posible cargar una fuente a través etiqueta de enlace, no es recomendable ya que no puede asignar un nombre a la fuente de la misma. Sin un nombre al igual que con font-face, usted no será capaz de utilizarlo en cualquier lugar de la página web. De acuerdo con GTmetrix, cargas de hojas de estilo en el inicio, a continuación, el resto de scripts / estilo por orden, entonces la fuente antes dom se carga, y por lo tanto no ven la fuente efecto de cambio.

Answer 13

Su cabeza debe incluir los rel precarga de la siguiente manera:

<head>
    ...
    <link rel="preload" as="font" href="/somefolder/font-one.woff2">
    <link rel="preload" as="font" href="/somefolder/font-two.woff2">
</head>

Esta woff2 manera estará precargado por los navegadores que soportan carga previa, y todos los formatos de repliegue se carga como lo hacen normalmente.
Y el tipo de fuente CSS debe ser similar a este

@font-face {
    font-family: FontOne;
    src: url(../somefolder/font-one.eot);
    src: url(../somefolder/font-one.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-one.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-one.woff) format('woff'),
    url(../somefolder/font-one.ttf)  format('truetype'),
    url(../somefolder/font-one.svg#svgFontName) format('svg'); 
}
@font-face {
    font-family: FontTwo;
    src: url(../somefolder/font-two.eot);
    src: url(../somefolder/font-two.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-two.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-two.woff) format('woff'),
    url(../somefolder/font-two.ttf)  format('truetype'),
    url(../somefolder/font-two.svg#svgFontName) format('svg');
}