網頁本地字體應用及顯示問題排查
網頁設計中，常常需要使用特定字體提升視覺效果。本文以“荊南麥圓體”為例，講解如何在網頁中應用本地已安裝字體，并解決可能出現的顯示問題。
假設用戶已在系統中安裝“荊南麥圓體”，但希望在網站上使用該字體時遇到顯示問題。其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;}
網頁卻顯示“微軟雅黑”，而非“荊南麥圓體”。用戶明確表示僅需在本地顯示該字體，且因字體文件較大，不希望通過src屬性引入。
解決方法：
關鍵在于調整CSS代碼，正確加載并應用本地字體。
首先，修改font-family屬性。將：
font-family:"荊南麥圓體", "微軟雅黑", "helvetica neue", helvetica, arial, sans-serif;
更改為：
font-family:"myfont", "微軟雅黑", "helvetica neue", helvetica, arial, sans-serif;
其次，啟用并修正@font-face規則，確保正確加載“荊南麥圓體”：
@font-face { font-family: 'MyFont'; /* 注意大小寫 */ src: local('荊南麥圓體'); /* 使用local()聲明本地字體 */ }
local() 函數告訴瀏覽器優先查找本地已安裝的字體。 如果本地沒有安裝該字體，瀏覽器會繼續使用后備字體（”微軟雅黑”等）。
最后，清除瀏覽器緩存或重啟瀏覽器，使CSS更改生效。 按照以上步驟操作后，本地測試環境下網頁應成功顯示“荊南麥圓體”。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
