網頁引用特定的中文字體檔來呈現某種字體戴入時間過久，因此最好的方法就是讓網頁顯示作業系統的中文預設字體。
網頁安全字體 (Web Safe Font) 與字體基礎知識
字體的分類：serif (襯線)、sans-serif (無襯線)、monospace (等寬)、fantasy (夢幻)、cuisive (草體)，使用上最多的就是 serif (襯線) 與 sans-serif (無襯線) 字體。
serif (襯線 – 類明宋體) V.S sans-serif (無襯線 – 線類黑體)
serif 字的筆劃開始及結束的地方有裝飾，且筆畫的粗細會不同風格都比較突出，常見的襯線字型有 Times New Roman、 宋體。
sans-serif (無襯線) 沒有額外的裝飾，筆劃粗細大致差不多，字形端莊橫平豎直，常見的無襯線字型有 Tahoma、 Verdana、 Arial、 Helvetica、 蘋方、 微軟雅黑 等等…。
See the Pen 網頁安全字體 (Web Safe Font)–英文 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
小結：上方的 serif (襯線) 與 sans-serif (無襯線) 字體 只針對英文字元，中文字體會有基本的差別，但會依瀏覽器預設顯示統一處理中文字元。
monospace (等寬)
較獨特的風格像是打字機字體，通常用於編輯器或是程式碼區塊中。
See the Pen 網頁安全字體 (Web Safe Font)–英文 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
fantasy (夢幻) & cuisive (草書)
二種字體在可讀性上很差，多半只有在特別的大標上使用。
See the Pen 網頁安全字體 (Web Safe Font)–英文-monospace by Jimmy_Wu (@Jimmy_Wu) on CodePen.
其他網頁安全英文字體
基本上使用英文體比較沒有太多的關係，主要是因為英文的字元件少於中文字元太多太多了，而這部份也是使得英文字體的檔案很小，在選用 webfont 自然就不會影響頁面開啟的速度太多。
- Comic Sans MS
- Courier
- Courier New
- Fixedsys
- Georgia
- Impact
- Lucida Console
- Lucida Sans Unicode
- Marlett
- Microsoft Sans Serif
- Modern
- MS Sans Serif
- MS Serif
- Palatrino Lintype
- Roman
- Script
- Small Font
- Symbol
- System
- Tahoma
- Terminal
- Times New Roman
- Trebuchet MS
- verdana
其他網頁安全中文字體
Windows
- 細明體
- 新細明體：PMingLiU
- 標楷體：MingLiU
- 黑體 (簡)：SimHei
- 微軟正黑：Microsoft JhengHei
- 微軟雅黑 (簡)：Microsoft YaHei
Mac OS
- 華文細黑： STHeiti Light [STXihei]
- 華文黑體：STHeiti
- 華文楷體：STKaiti
- 華文宋體：STSong
- 華文仿宋：STFangsong
- 儷黑 Pro：LiHei Pro Medium
- 儷宋 Pro：LiSong Pro Light
- 標楷體：BiauKai
- 蘋果儷中黑：Apple LiGothic Medium
- 蘋果儷細宋：Apple LiSung Light
其他語系
- 明瞭體 (日)：Meiryo
- (日)：MS Gothic
- (日)：MS PGothic
- 游黑體 (日)：Yu Gothic
- (韓)：Dotum
- 清黑體 (韓)：Malgun Gothic
網頁使用自訂字體
部分瀏覽器提供自定義的字體，不過 user 必須先從網路上下載回來，如果是使用中文字體的話，一個字體檔就要10MB左右，光是下載時間就太久了，所以還是用用英文字體就好。
主流支援的瀏覽器有 Firfox , Chrome，不支援的瀏覽器有 IE
字體引入 CSS 與使用
1 2 3 4 5 6 7 8 9 | <style> @font-face{ font-family: "AGENT ORANGE"; src: url(AGENTORANGE.TTF); } body{ font-family: AGENT ORANGE; } </style> |
HTML 行內與 css 使用字體方式
1 2 3 4 5 6 7 | <!-- 行內套用 (Inline) --> <span style="font-family:Arial;"> font letters </span> <!-- 嵌入套用 (Embed) --> <style> .font{ font-family:Arial; } </style> |
Adobe illustrator 指定字體與網頁使用系統中文字型
Hiragino Mincho ProN (ヒラギノ明朝 ProN)
開發者工具
ai內的字體名稱不同都使用在網頁上確正一樣的
參考資料來源
網頁安全字體基本概念
字體－呈現一致性的跨裝置 (Windows, Linux, Mac 作業系統預設字型)
什麼是網頁安全字體(Web Safe Font)?
Web 字型 font-family 淺談 (大陸各入口站台針對不同系統下的預設字型設定與字型的基本知識)
談談一些有趣的CSS題目（16）– 你該知道的字體 font-family
相關文章
CSS 套用方式四種方式
網頁中英文字型(font-family)跨平台設定最佳化
網頁中文字型除了微軟正黑體, 還有這些好選擇！(windows)
阮一峰的網絡日誌-阮一峰的網絡日誌