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

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

我无法将此设置为异步，因为它用于在中实现同步的函数

loadFont（）

---

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

即使您不喜欢尺寸检查，这也是功能检测的工作方式，可能是最好的方法：

Modernizer嵌入了一个很小的字体标志符号 使用data:URI。在这本书中，单曲 “.”字符被创建；那就是 应用于其 innerHTML设置为“…..”并且 首先用一个 基本衬线字体，然后用 应用自定义字体。如果宽度是 不同的是，我们知道浏览器 呈现了我们需要的新字体数据 供应

---

简短回答：浏览器还不够好，我们还不能在不实际使用字体和验证字体的情况下测试“已加载并可供使用”

详细回答：Pjs附带了一个用于字体预加载的内置字体验证器（与相关），但正如您所指出的，它不适用于使用数据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;
}

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

---

（此时使用字体设置DOM元素的样式实际上可以很好地工作，实际上是将其交给Canvas2D，这导致它在一个或多个帧中不可用）

抱歉，但这不能用于

loadFont（）

，因为它不是测试

@font-face

支持，而是实际加载任意字体，我无法事先知道其尺寸。

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