本程式碼研究室將說明如何使用 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 為
因此您不需要為這些字型宣告 FontFaceObservers。
偵測字型載入
用於偵測字型載入的程式碼如下所示:
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
是可在字型載入時解決的承諾。
示範網站使用兩種字型,因此您需要使用 Promise.all()
等兩種字型都載入完成
- 請在指令碼中,將這項承諾加到指令碼的 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
類別。
- 更新 CSS:
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
驗證
- 如要預覽網站,請按下「查看應用程式」。然後按下
全螢幕
。
如果頁面看起來像這樣,表示已成功實作「字型」 觀察器並去除「隱形文字」的「Flash of Invisible Text」。