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

时间:2010-07-29 04:48:30

标签: javascript jquery

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

我在< pre>中显示代码并使用自定义下载的字体Liberation Mono。 < pre>也使用自定义滚动条。自定义滚动条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>
    });
});

2 个答案:

答案 0 :(得分:3)

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

  

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

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

答案 1 :(得分: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)