在下载自定义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>
});
});
答案 0 :(得分:3)
Google WebFont Loader项目允许您与各种网络字体提供商合作,并公开回调,包括fontloading
和fontactive
。这可能有所帮助,具体取决于您对字体来源的灵活性。我没有用它,但文档声明:
除了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)