如何在網頁上正確顯示本地安裝的“荊南麥圓體”？

網站集成本地字體：解決“荊南麥圓體”顯示問題

成功安裝系統字體后，如何在網頁中正確調用呢？本文將解決如何在網站上使用本地安裝的“荊南麥圓體”字體，并避免使用src屬性直接引入字體文件（因文件較大）。

以下是一個常見的css代碼片段，嘗試使用本地字體：

/* @font-face {     font-family: 'myfont';     src: url('/style1/font/荊南麥圓體.otf') format('truetype'); } */ html, body {     font-size: 18px;     font-family: "荊南麥圓體", "微軟雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif; }

盡管將“荊南麥圓體”置于字體列表首位，網頁仍顯示“微軟雅黑”。問題在于，瀏覽器無法直接識別本地安裝的字體文件路徑。

解決方案：

我們需要修正CSS代碼，正確地定義和應用自定義字體。

1. 定義字體（@font-face）： 雖然我們不直接使用src引入字體文件，但仍然需要@font-face規則來告訴瀏覽器字體名稱。 關鍵在于，我們無需指定字體文件路徑，瀏覽器會自動從系統字體庫中查找。

   @font-face {     font-family: 'JingNanMaiYuanTi'; /* 使用更簡潔的字體名稱 */ }

2. 應用字體： 在font-family屬性中，使用步驟1中定義的字體名稱。

   html, body {     font-size: 18px;     font-family: 'JingNanMaiYuanTi', "微軟雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif; }

通過以上修改，瀏覽器會優先嘗試使用名為“JingNanMaiYuanTi”的系統字體。如果系統已安裝該字體，網頁將正確顯示。 如果未安裝，則會依次使用備選字體。

額外建議：

• 字體名稱： 使用更簡潔、易于記憶的字體名稱，例如JingNanMaiYuanTi，避免使用包含空格或特殊字符的名稱。
• 瀏覽器緩存： 修改CSS后，清除瀏覽器緩存或重啟瀏覽器，確保瀏覽器加載最新的CSS規則。

通過這些調整，您應該能夠在網頁上成功顯示“荊南麥圓體”字體，同時避免因直接引入字體文件而導致的加載速度問題。