CSS保健室｜我們與「碧」「筵」「綰」的距離

前言

之前我做過一個網站，頭頭名字裡面有個「碧」字，但他在網頁裡的顯示總是會多一個神秘的空白，就算再怎麼努力看 CSS 你腦袋也只會一片空白，後來上網查發現這是微軟正黑體本身的 bug ，尼砍砍！尼砍砍！身為世界上最不幸的美少女（偷小魔女 DoReMi 的哏），就算同事不陰你，程式也會把你陰個措手不及，但是天無絕人之路，它讓你有了霹靂卡霹靂拉拉的能力，也幫你開了修復這 bug 的門。

Ojamajo Doremi

（圖片來源）

什麼情況下會讓「碧」「筵」「綰」後面多了塊空白

Windows 系統

文字使用微軟正黑體

CSS 設定 font-weight: 600 以上 / bold

CSS 解法

@font-face {
    font-family: '新微軟正黑體';
    unicode-range: U+7db0, U+78A7, U+7B75;
    font-style: normal;
    font-weight: bold;
    src: local(MS Gothic), local(Yu Gothic);
}
@font-face {
    font-family: '新微軟正黑體';
    unicode-range: U+7db0, U+78A7, U+7B75;
    font-style: normal;
    font-weight: normal;
    src: local(微軟正黑體), local(Microsoft JhengHei);
}
body {
    font-family: "新微軟正黑體",'Microsoft JhengHei',"微軟正黑體",sans-serif;
}

先將新字體定義為「新微軟正黑體」，定義的 unicode-range 「 U+7db0 」、「 U+78A7 」、「 U+7B75 」，這三個 Unicode 編碼分別是「綰」、「碧」、「筵」，所以當符合這些條件時就會使用 src 中的字體檔，以上面的程式碼來看，粗體會使用 MS Gothic / Yu Gothic 來呈現；一般情況就一樣用原本的微軟正黑體，然後記得 font-family 設定的新字體一定要放在舊字體的前面啊！