本代码实验将向您展示如何使用 Font Face Observer 立即显示文本。
添加字体观察器
Font Face Observer 是一个脚本,用于检测字体何时加载。fontfaceobserver.js
文件已保存到项目目录中,因此您无需单独添加该文件。不过,您需要为其添加脚本标记。
- 点击 Remix to Edit 即可修改项目。
- 将
fontfaceobserver.js
的脚本标记添加到index.html
:
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
使用字体观察器
创建观察器
为页面上使用的每个字体系列创建一个观察器。
- 在
fontfaceobserver.js
脚本后面添加以下脚本。这会为“Pacifico”和“Roboto”字体系列创建观察者:
<script src="fontfaceobserver.js" type="text/javascript"></script>
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
</script>
<body>
如果您不确定需要创建哪些字体观察器,只需在 CSS 中查找 font-family
声明即可。将这些声明的 font-family
名称传递给 FontFaceObserver()
。无需为回退字体创建字体观察器。
例如,如果您的 CSS 是:
font-family: "Times New Roman", Times, serif;
您需要添加 FontFaceObserver('Times New Roman')
。时间和 serif 是后备字体,因此您无需为它们声明 FontFaceObserver。
检测字体加载
用于检测字体加载的代码如下所示:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
是一个 promise,会在字体加载时解析。
演示网站使用两种不同的字体,因此您需要使用 Promise.all()
等待两种字体都加载完成。
- 将以下 promise 添加到脚本中,紧挨您刚刚声明的 FontFaceObservers 下方:
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️签到
现在,您的脚本应如下所示:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
</script>
应用 fonts-loaded
类
- 将脚本中的
/* Do things */
注释替换为以下代码行:
document.documentElement.classList.add("fonts-loaded");
这会在两个字体都加载完毕后,将 fonts-loaded
类添加到文档的根元素(<html>
标记)中。
✔️签到
完成后的脚本应如下所示:
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
document.documentElement.className += " fonts-loaded";
});
</script>
更新 CSS
您应将页面的样式设置为在应用 fonts-loaded
类之前使用系统字体,在应用 fonts-loaded
类后使用自定义字体。
- 更新 CSS:
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
验证
- 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)。
如果页面看起来像这样,则表示您已成功实现 Font Face Observer,并消除了“不可见文本闪烁”问题。