Question

在下载自定义css字体资源之前，有没有办法不运行Javascript函数。

我在＆lt; pre＆gt;中显示代码并使用自定义下载的字体Liberation Mono。＆lt; pre＆gt;也使用自定义滚动条。自定义滚动条Javascript（flexcroll）在设置时需要设置静态宽度。但是在下载Liberation Mono字体之前我无法知道宽度。

加载字体的CSS如下（完整的smilie-face语法）：

@font-face {
  font-family: 'LiberationMonoRegular';
  src: url('liberationmono-regular.eot');
  src: local('☺'),
    url('liberationmono-regular.woff') format('woff'),
    url('liberationmono-regular.ttf') format('truetype'),
    url('liberationmono-regular.svg#webfontkIKtf5pm') format('svg');
  font-weight: normal;
  font-style: normal;
}

我想要做的Javascript函数如下所示。我在黑暗中拍摄，真的不认为这是可能的..

$(function() {
    waitForFontExists('LiberationMonoRegular', function() {
        <do something>
    });
});

Answer 1

Google WebFont Loader项目允许您与各种网络字体提供商合作，并公开回调，包括fontloading和fontactive。这可能有所帮助，具体取决于您对字体来源的灵活性。我没有用它，但文档声明：

除了google和typekit之外选项，还有一个自定义模块可以加载任何样式表网络字体提供商。

除此之外，还有很多hackier things to try - 就像检查目标字体中样本渲染的宽度一样。

Answer 2

您只需通过异步XMLHTTPRequest加载字体文件即可。加载文件后，您的请求对象将提交就绪事件。这听起来效率低下但是如果您的字体文件正在被缓存，它应该只产生一个额外的HTTP请求和304响应。主要的缺点是，如果没有浏览器嗅探（据我所知），您无法真正知道浏览器支持哪种字体格式。即使用户在本地安装了字体，您也最终会下载字体。

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "/path/to/font.ttf",true);
xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4) {
     alert("font loaded");
  }
}
xmlhttp.send(null)

在自定义字体下载之前不要运行Javascript函数？

2 个答案: