透過 CSS 在網頁設定中文英文字型

在 Microsoft Word 文件的字型能夠分別針對 中文/英文進行不同的設定，以達到較好的表現結果，那麼在網頁上應該如何處理呢？ CSS 的 @font-face 提供了一個解決的方案。

下述的範例，首先透過設定  MyCustomFont 的字型變數，然後再針對此字型變數在不同的unicode-range 設定不同的字型，即可達到上述的效果。

body {
    font-family: MyCustomFont, sans-serif; /* MyCustomFont 字型變數 */
}

/* 先設定預設字型 */
@font-face {
    font-family: MyCustomFont;
    src: local(Heiti TC), local("微軟正黑體");
}
/* Latin characters 專用 */
@font-face {
    font-family: MyCustomFont;
    unicode-range: U+00-024F; /* Latin, Latin1 Sup., Ext-A, Ext-B */
    src: local(Helvetica), /* OS X preferred */
         local(Arial); /* Other OS */
}