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

Question

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

我不能让它异步，因为它是为了在Processing.js 中实现Processing 的loadFont() 函数，它是同步的。

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

Answer 1

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

长答案：Pjs 带有用于字体预加载的内置字体验证器（与 https://github.com/pomax/font.js 相关），但正如您所指出的，这不适用于使用 data-uri 的 @font-face 规则。我建议的一种解决方法（尽管我还没有尝试过。我只是猜测它会根据我在 Processing.js 上的工作和浏览器中的字体加载工作）是使用两个 PGraphic 屏幕外缓冲区。使它们都带有黑色填充文本的白色背景，在第一个缓冲区上执行 text("X",0,0) ，然后在字体加载后，使用第二个缓冲区执行相同的 text("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;
}

当您加载字体时，在某处有一个跟踪布尔值，指示字体加载状态，初始化为“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 导致它无法使用一帧或多帧）

Answer 2

即使您不喜欢维度检查，Modernizr @font-face 特征检测就是这样工作的，并且可能是最好的方法：

Modernizr 嵌入了一个微小的字体字形 使用数据：URI。其中，单 “。”性格被创造出来；那时 应用于一个临时元素，其 innerHTML 设置为 '........' 和 测量其宽度，首先用 基本衬线字体，然后用 应用了自定义字体。如果宽度是 不同，我们知道浏览器 渲染了我们新的字体数据 提供。