如何偵測網頁中使用的活動字體？

偵測網頁中的活動字體

在設計具有多種字體的網頁時，確保所需的字體是至關重要的在使用者的瀏覽器上呈現。當 CSS 中定義了多種字體時，這可能是一個挑戰。

解決此問題的一種方法是確定實際使用的是哪種指定字體。透過識別活動字體，您可以採取適當的操作，例如顯示使用者係統上未安裝的字體的下載連結。

字體檢測技術

用於字體檢測的常用技術涉及使用特定字體測量渲染文字的寬度。如果測量的寬度與所需字體的預期寬度相符，則表示使用者裝置上存在目標字體。但是，此方法對於等寬字體較不可靠。

範例實作

以下程式碼片段說明如何實現此技術：

<div>
<pre class="brush:php;toolbar:false">// Get the element's width with the desired font
var desiredWidth = document.getElementById("font-detector").offsetWidth;

// Set the element to use a fallback font
document.getElementById("font-detector").style.fontFamily = "monospace";

// Measure the width again using the fallback font
var fallbackWidth = document.getElementById("font-detector").offsetWidth;

// Check if the desired font is installed
if (desiredWidth === fallbackWidth) {
  // The desired font is not installed
} else {
  // The desired font is installed
}

好處和限制

這種字體檢測技術實現起來相對簡單，可用於根據特定字體的可用性動態調整頁面的行為。但是，它可能並非萬無一失，可能會受到瀏覽器設定或使用者安裝的修改字體渲染的擴充功能等因素的影響。