javascript - 如何判断何时应用 @font-face 规则

Question

有什么方法可以判断何时应用 @font-face 规则吗？我正在创建 @font-face 规则，该规则使用来自通过 JavaScript 中的同步 XMLHttpRequest 请求的字体文件的 data: URI，然后立即使用该字体将文本写入 Canvas 元素。问题是，在前几毫秒绘制文本时，它实际上并没有使用字体。我当前的解决方案是通过发送同步 XMLHttpRequest 来阻止执行几毫秒，这是一个糟糕的解决方案。

我无法使其异步，因为它是为了实现 Processing的 loadFont() 函数，该函数是同步的，位于 Processing.js .

我希望解决方案不检查字符的尺寸，因为不能保证字体具有特定字符并且其尺寸与当前字体的相同字符不同。

Answer 1

简短的回答:浏览器还不够好，无法让我们在不实际使用字体并验证它的情况下测试“已加载并准备使用”。

长答案:Pjs 附带了一个用于字体预加载的内置字体验证器(与 https://github.com/pomax/font.js 相关)，但正如您所指出的，这不适用于使用 data-uri 的 @font-face 规则。我建议的解决方法(虽然我还没有尝试过。我只是猜测它会根据我在Processing.js 上的工作和浏览器中的字体加载工作)是使用两个PGraphic 离屏缓冲区。将它们设置为白色背景和黑色填充文本，在第一个缓冲区上执行文本(“X”，0,0)，然后在字体加载后，使用第二个缓冲区执行相同的文本(“X”，0， 0")。抓取每个缓冲区的像素[]，并进行并排比较:

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

当你加载字体时，在某处有一个跟踪 bool 值来指示字体加载状态，初始化为“false”，加载字体后，在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.
  }
}

现在至少你可以避免浏览器完成解压 data-uri 字体并将其加载为 @font-face 资源的前几帧，但没有时间将其传递给 Canvas2D 渲染系统还没有。

(此时使用字体设计 DOM 元素实际上可以正常工作，它实际上将其移交给 Canvas2D，导致它在一个或多个帧中不可用)