如何判断应用@ font-face规则的时间
-
08-07-2019 - |
题
有什么方法可以判断何时应用@ font-face规则?我正在创建使用数据的@ font-face规则:来自在JavaScript中使用同步XMLHttpRequest请求的字体文件中的URI,然后立即使用该字体将文本写入canvas元素。事实是,在最初的几毫秒内绘制文本时,它实际上并没有使用字体。我目前的解决方案是通过发送同步XMLHttpRequest来阻止执行几毫秒,这是一个糟糕的解决方案。
我无法使其异步,因为它是用于实现处理的 loadFont()
函数,它是同步的,在 Processing.js 中。
我希望解决方案不检查字符的尺寸,因为不能保证字体具有某个字符,并且其尺寸与当前字体的相同字符不同。
解决方案
简短的回答:浏览器尚不足以让我们测试“已加载并准备好使用”。没有实际使用字体并验证它。
答案很长:Pjs附带了一个用于字体预加载的内置字体验证器(与 https:// github相关) .com / pomax / font.js )但是正如你所指出的那样,这对使用data-uri的@ font-face规则不起作用。我建议的一种解决方法(虽然我还没有尝试过这个。我只是猜测它可以根据我在Processing.js和浏览器中的字体加载的工作而工作)是使用两个PGraphic屏幕外缓冲区。使它们都是黑色填充文本的白色背景,在第一个缓冲区上执行文本(“X”,0,0),然后在字体加载后,使用第二个缓冲区执行相同的文本(“X”, 0,0&QUOT)。抓取每个缓冲区的像素[],并进行并排比较:
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;
}
当你加载你的字体时,在一个指示字体加载状态的地方有一个跟踪布尔值,在“加载”字体后,在加载你的字体后,在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导致它无法使用一个或多个帧)
其他提示
即使您不喜欢维度检查,也就是 Modernizr @ font-face 特征检测有效并且可能是最佳方式:
Modernizr嵌入了一个很小的字体字形 使用数据:URI。在此,单身 &QUOT;。&QUOT;字符被创建;就是这样 适用于临时元素 innerHTML设置为'........'和 测量其宽度,首先用a 基本的衬线字体然后用 应用自定义字体。如果宽度是 不同,我们知道浏览器 渲染了我们的新字体数据 提供。