Cómo saber cuándo se aplica una regla @ font-face

Question

¿Hay alguna forma de saber cuándo se aplica una regla @ font-face? Estoy creando reglas @ font-face que usan datos: URI de un archivo de fuente solicitado con un XMLHttpRequest síncrono en JavaScript y luego escribo texto en un elemento de lienzo usando la fuente de inmediato. La cuestión es que en realidad no usa la fuente al dibujar el texto durante los primeros milisegundos. Mi solución actual es bloquear la ejecución durante unos pocos milisegundos enviando un XMLHttpRequest síncrono, que es una solución terrible.

No puedo hacer esto asíncrono ya que es para implementar Procesando ' loadFont () función, que es síncrona, en Processing.js .

Preferiría que la solución no verifique las dimensiones del carácter, ya que no hay garantía de que la fuente tenga un cierto carácter y que sus dimensiones sean diferentes del mismo carácter de la fuente actual.

Answer 1

Respuesta corta: los navegadores aún no son lo suficientemente buenos como para permitirnos probar "cargados y listos para usar" sin usar realmente la fuente y verificarla.

Respuesta larga: Pjs viene con un validador de fuente incorporado para precargas de fuentes (relacionadas con https: // github .com / pomax / font.js ) pero como usted señala, eso no funcionará con las reglas @ font-face que usan un uri de datos. Una solución alternativa que sugeriría (aunque todavía no lo he probado. Supongo que funcionará en función de mi trabajo en Processing.js y la carga de fuentes en los navegadores) es usar dos búferes PGraphic fuera de pantalla. Haga que ambos sean fondo blanco con texto de relleno negro, escriba un texto (" X ", 0,0) en el primer búfer, y luego, después de cargar la fuente, use el segundo búfer para realizar el mismo texto (" X " ;, 0,0 ''). Tome el píxel [] para cada búfer y haga una comparación lado a lado:

boolean verifyFontLoad() {
  buffer1.loadPixels();
  buffer2.loadPixels();
  for (int i=0; i<buffer1.pixels.length; i++) {
    if (buffer1.pixels[i] != buffer2.pixels[i]) {
      return false; }}
  return true;
}

cuando cargue su fuente, tenga un booleano de seguimiento en alguna parte que indique el estado de carga de la fuente, inclinado a " falso " ;, y después de cargar su fuente, al comienzo de la llamada draw ()

void draw() {
  // code that does not rely on your font
  [...]

  // check state
  if(!fontLoaded) { fontLoaded = verifyFontLoaded(); }
  // not ready? "stop" drawing.
  if(!fontLoaded) { return; }
  // font ready. run code that relies on the font being ready
  else {
    // code that depends on your font being available goes here.
  }
}

Ahora al menos puede evitar los primeros fotogramas en los que el navegador ha terminado de desempaquetar su fuente de datos-uri y la ha cargado como recurso @ font-face, pero no ha tenido tiempo de pasarla al sistema de representación Canvas2D todavía.

(diseñar un elemento DOM en este punto con la fuente realmente funcionaría bien, en realidad lo está entregando a Canvas2D lo que hace que no se puedan usar uno o más marcos)

Answer 2

Aunque no prefiere una verificación de dimensiones, así es como Modernizr @ font-face la detección de funciones funciona y puede ser la mejor manera:

  

Modernizr incorpora un pequeño glifo de fuente   utilizando un dato: URI. En esto, el single   ". " se crea el personaje; es entonces   aplicado a un elemento temporal cuyo   innerHTML se establece en '........' y   cuyo ancho se mide, primero con un   fuente serif básica y luego con el   fuente personalizada aplicada. Si el ancho es   diferente, conocemos el navegador   prestados los nuevos datos de fuente que   suministrado.