Abh*_*nav 5 html javascript css fonts webfont-loader
我的项目需要大约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
use*_*899 13
您可以使用本机字体加载 API，不再需要第 3 方包。这是一个工作示例：
document.getElementsByTagName('button')[0].onclick = async function() {
const myFont = new FontFace('Pacifico', 'url(https://fonts.gstatic.com/s/pacifico/v21/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)');
await myFont.load();
document.fonts.add(myFont);
document.getElementsByTagName('h1')[0].style.fontFamily = "Pacifico";
}<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Hello world!</h1>
<button>Dynamically load font</button>
</body>
</html>可能有点晚了,但我使用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
},
});
您还可以加载谷歌字体以外的自定义字体.库还提供各种回调函数和其他很酷的东西.您可以查看以上链接.