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


Posted by itiswonderfall on 2022-05-23

前言

之前我做過一個網站,頭頭名字裡面有個「 碧 」字,但他在網頁裡的顯示總是會多一個神秘的空白,就算再怎麼努力看 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 設定的新字體一定要放在舊字體的前面啊!

 


 

參考資料

「碧」「筵」「綰」在微軟正黑體問題


#css #css保健室 #@font-face #font-family #unicode-range #font-style #font-weight #src







Related Posts

[Day00] 不知不覺就要開始了呢

[Day00] 不知不覺就要開始了呢

【Day07】結語

【Day07】結語

Switch between uppercase to lowercase

Switch between uppercase to lowercase


Comments