Chrome 開發人員工具現在可以告訴您確切的字體類型,用於轉譯文字。
字型堆疊是個有趣的概念,它更像是建議,而非需求。由於您建議的家族可能不存在,因此您讓每位使用者的瀏覽器處理未處理的情況,並提取可用的內容並加以使用。
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
開發人員想知道實際使用的字型。運作方式如下:

在「已計算的樣式」下方,您現在會看到該元素所使用的字體摘要。請注意以下幾點:
- 開發人員工具會回報 Chrome 文字轉譯層使用的實際字體。您不必再猜測
serif
或sans-serif
實際解析為哪種字型。 - 我的網頁字型是否正常運作?有時很難判斷您看到的是網路字型還是備用系統字型。您現在可以確認是否已套用網路字型。在上述範例中,我們將使用 Lobster 做為
::first-line
樣式的網路字型。 - 堆疊中的落格字型很容易辨識。上方有個錯字「Merriweather」Merriweather,因此系統不會使用這個字,而是改用「Lobster」。
- 是 Arial 還是 Helvetica?請向設計人員或開發人員工具提出問題。;)
- 可搭配 Google 網路字型、Typekit、本機字型、@font-face 字體、Unicode 字形,以及所有其他有趣的字型來源使用。
歡迎使用這項功能,並在留言中提供意見。