首頁 > web前端 > css教學 > 如何使用 @font-face 阻止瀏覽器下載使用者係統上已安裝的字型?

如何使用 @font-face 阻止瀏覽器下載使用者係統上已安裝的字型?

Patricia Arquette
發布: 2024-10-28 09:42:29
原創
657 人瀏覽過

How to Prevent Browsers from Downloading Fonts Already Installed on the User's System Using @font-face?

@font-face src: local - 確保本機字型使用

此問題解決如何防止瀏覽器下載以下字型的問題使用@ font-face 規則時已經安裝在使用者的系統上。

問題中提供的 CSS 使用 Font Squirrel 推薦的語法。然而,該問題在 Chromium 中仍然存在,表明存在特定於瀏覽器的問題。

解決方案在於利用「local()」關鍵字來優先考慮本地字體檔案。透過如下所示修改src 屬性,瀏覽器將首先嘗試從本機系統載入字型:

src: local('DejaVu Serif'), url('DejaVuSerif-webfont.woff') format('woff'), url('DejaVuSerif-webfont.ttf') format('truetype'), url('DejaVuSerif-webfont.svg#webfontCFu7RF0I') format('svg');
登入後複製

在此修改後的程式碼中, 'local('DejaVu Serif')' 確保Chromium 檢查在嘗試從網頁下載前,先檢查使用者係統上安裝的DejaVu Serif 字型。

這種方法可保證最佳字體加載,因為瀏覽器將使用本地副本(如果可用),從而避免不必要的下載並減少頁面加載時間。

以上是如何使用 @font-face 阻止瀏覽器下載使用者係統上已安裝的字型?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
上一篇:如何在 Android 中使用 WebView 將自訂 CSS 注入網站? 下一篇:如何停用或自訂