Como dizer quando uma regra font-face @ é aplicada

Question

Existe alguma maneira de dizer quando uma regra font-face @ é aplicada? Estou criando @ regras font-face que os dados de uso: URIs de um arquivo fonte solicitada com um XMLHttpRequest síncrono em JavaScript e um texto em seguida, escrever a um elemento de tela usando a fonte de imediato. A coisa é que ele realmente não usar a fonte ao desenhar o texto para os primeiros milissegundos. Minha solução atual é a de bloquear a execução de alguns milissegundos enviando um XMLHttpRequest síncrona, que é uma solução terrível.

Eu não posso fazer isso assíncrona como é para implementar a função loadFont() de Processamento, que é síncrono, em < a href = "http://processingjs.org/" rel = "nofollow noreferrer"> Processing.js .

Eu preferiria que a solução não verificar as dimensões do personagem como não há nenhuma garantia de que a fonte tem um certo caráter e que suas dimensões são diferentes do mesmo caráter da fonte atual.

Answer 1

Resposta curta: navegadores não são bons o suficiente ainda para nos deixar teste para "carregado e pronto para uso" sem realmente usando a fonte e verificando-lo

.

Resposta longa: Pjs vem com um construído em validador fonte para preloads fonte (relacionado a https: // github .com / pomax / font.js ), mas como você aponta, que não vai funcionar com regras @ font-face que usam um conjunto de dados-URI. A solução que eu sugeriria (embora eu não tentei isso ainda. Estou apenas supondo que ele vai trabalhar com base em meu trabalho na Processing.js e carregamento da fonte em navegadores) é usar dois PGraphic offscreen buffers. Torná-las simultaneamente fundo branco com texto preenchimento preto, faça um texto ( "X", 0,0) no primeiro buffer, e depois de sua carga da fonte, use o segundo buffer para executar o mesmo texto ( "X", 0, 0" ) Grab o pixel [] para cada buffer, e fazer uma comparação 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;
}

quando você carregar a sua fonte, tem um lugar boolean rastreamento que indica o estado de carga da fonte, intiliased para "false", e depois de carregar a sua fonte, no início do draw () chamada

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

Agora, pelo menos, você pode evitar os primeiros quadros em que o navegador tenha terminado desembalar os seus dados URI-fonte e carregá-la como recurso @ font-face, mas não teve um tempo para passá-lo para o sistema de renderização Canvas2D ainda.

(denominar um elemento DOM neste momento com a fonte que realmente funcionam bem, é realmente começá-lo entregue a Canvas2D que está fazendo com que ele não ser um utilizável ou mais quadros)

Answer 2

Mesmo que você não prefere um cheque dimensão, que é como a Modernizr @ font-face recurso funciona de detecção e pode ser a melhor maneira:

Modernizr incorpora uma pequena glifo fonte usando uma data: URI. Neste, o único "" personagem é criado; é então aplicado a um elemento temporário cujo innerHTML é definido como '........' e cuja largura é medida, primeiro com um fonte básica serif e depois com o fonte personalizada aplicada. Se a largura é diferente, sabemos que o navegador tornou o novo que os dados da fonte fornecido.