我的项目需要大约150种字体。最初加载所有字体会增加页面加载时间。
我试过谷歌搜索但找不到答案。
场景:
用户将从option
标签中选择字体<select>
。点击后,我必须动态检索字体并确保浏览器呈现字体,然后使用字体来避免无格式文本Flash(FOUT)
目前我正在使用AJAX
来请求该字体文件
$.ajax({
type: 'GET',
url: "font-file-url",
async:false,
success: function(data) {
$("style").prepend("@font-face {\n" +
"\tfont-family: \""+fontValue+"\";\n" +
"\tsrc: local('☺'), url("font-file-url") format('opentype');\n" +
"}");
}
});
问题
我不知道浏览器何时正好呈现字体,所以我最终显示FOUT
可能有点晚了,但我用Google的WebfontLoader Library完成了它。它为我做了这个工作。
这就是我实施的方式:
第1步:包含库的JS文件
第2步:下面的代码为我做了诀窍
WebFont.load({
google: {
families: ['Droid Sans']
},
timeout:5000,
fontactive: function(familyName,fvd){ //This is called once font has been rendered in browser
// Your business logic goes here
},
});
您还可以加载谷歌字体以外的自定义字体。库还提供各种回调函数和其他很酷的东西。您可以查看以上链接。
很遗憾,JavaScript不支持100%加载字体。但是有一项工作可以在将来支持它:
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API https://drafts.csswg.org/css-font-loading/