本程式碼研究室將說明如何使用字型觀測工具立即顯示文字。
新增字型觀察器
「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')
。Times 和 Serif 是備用字型,因此您不必為這些字型宣告 FontFaceObserver。
偵測字型載入情形
用於偵測字型載入的程式碼如下所示:
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」。