CSS @font-face 引用 icomoon 字體圖標無法加載的解決方案

問題現象

複製網頁代碼後，icomoon 字體文件（.eot/.woff/.ttf/.svg）無法下載，瀏覽器顯示亂碼或 404。

解決步驟

1. 獲取字體文件 URL：CSS 中 src:url(IcoMoon-Free-master/icomoon-MBT.eot)，在瀏覽器直接訪問完整 URL 下載
2. 下載所有格式：.eot、.woff、.ttf、.svg 四種格式全下載
3. 部署到項目：放入項目 fonts/ 目錄
4. 修正 CSS 路徑：

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon-MBT.eot');
    src: url('../fonts/icomoon-MBT.eot?#iefix') format('embedded-opentype'),
         url('../fonts/icomoon-MBT.woff') format('woff'),
         url('../fonts/icomoon-MBT.ttf') format('truetype'),
         url('../fonts/icomoon-MBT.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

關鍵：服務器 MIME 類型配置

Nginx/Apache 需添加字體 MIME 類型，否則返回 404 或 text/plain 導致加載失敗：

# Nginx
location ~* \.(eot|woff|woff2|ttf|svg)$ {
    add_header Access-Control-Allow-Origin *;
    types {
        application/vnd.ms-fontobject eot;
        application/font-woff woff;
        application/font-woff2 woff2;
        application/octet-stream ttf svg;
    }
}

驗證方法

瀏覽器開發者工具 Network 面板查看字體請求：Status 200、Type font、Size 合理即成功。