如何在網頁上使用本地安裝的字體文件？

網頁中應用本地已安裝字體

在網頁設計中，你可能希望使用系統中已安裝的特定字體，但直接在css中使用字體名稱卻無效。本文將演示如何正確地在網頁中調用本地安裝的字體。

問題：本地字體無法在網頁中顯示

假設你已安裝字體“荊南麥圓體”，但CSS代碼：

html, body {   font-size: 18px;   font-family: "荊南麥圓體", "微軟雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif; }

仍然顯示“微軟雅黑”，而非“荊南麥圓體”。你不想通過src屬性加載字體文件，因為字體文件體積較大。

解決方法：利用@font-face規則

解決這個問題的關鍵在于使用@font-face規則，它允許你定義自定義字體，并將其應用于網頁元素。 由于你希望使用本地已安裝字體，無需指定src路徑。 瀏覽器會自動查找并使用系統中已安裝的字體。

正確的CSS代碼如下：

@font-face {   font-family: 'JingNanMaiYuanTi'; /* 定義字體名稱，建議使用英文名稱 */ }  html, body {   font-size: 18px;   font-family: 'JingNanMaiYuanTi', "微軟雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif; }

關鍵在于：

1. 定義字體名稱: @font-face 規則中定義一個易于識別的字體名稱（例如英文名稱），避免中文名稱可能帶來的兼容性問題。
2. 使用字體名稱: 在font-family 屬性中使用步驟1中定義的字體名稱。 瀏覽器會優先查找這個名稱對應的字體。如果找不到，則會依次使用備選字體。

修改CSS代碼后，如果仍然無法顯示，請嘗試刷新瀏覽器緩存或重啟瀏覽器。 確保你的操作系統已正確安裝并啟用該字體。