你是否也曾經碰過這樣的狀況？

碧  藍幻想
天下無不散的筵  席
image host

怎麼有些字後面會有空白是故意的嗎？

上面範例的確是故意的，但其他網站顯示一樣的問題卻是意外的插曲
有一天，在某個維運中的專案，那位User突然問了這個問題

剛剛發現系統一個怪狀況。
就是「碧」這個字好像有問題。
特定欄位輸入「碧」這個字，後面一定會出現一個空格。

經過一番Google後發現原來是微軟正黑體本身的BUG！！！
然而微軟當時也沒有任何解決辦法，這隻蟲就這樣活下來了
Windows 7 有些程式在顯示微軟正黑體粗體的字型時，會多出空白字元

在網頁上達成此情境的三項條件

  • Windows系統
  • 文字使用微軟正黑體
  • CSS設定font-weight: 600以上 / bold

網路上有人提出了修改字體檔的方式，他的確解決了文字問題，但我總不能叫每個User去改字體檔，後來也是找到修正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: 'Open Sans', Verdana, Geneva,"新微軟正黑體",'Microsoft JhengHei',"微軟正黑體", sans-serif;
}

畢竟我沒處理過這種CSS，以我目前查詢理解font-face的說法是一種字體定義介面，先將新字體定義為 新微軟正黑體，定義的unicode-range、font-style與font-weight像是字體條件，而U+7db0, U+78A7, U+7B75，這三個Unicode編碼分別是「綰」「碧」「筵」，當符合這些條件就會使用src中的字體檔來做呈現，最後在網頁的font-family設定新字體要優先於舊字體

以這段CSS簡單的來說，粗體會使用MS Gothic / Yu Gothic來顯示，而一般字還是用原本的微軟正黑體，畢竟我們的問題點在於粗體導致字體出錯而已

結論

不管你是前端、後端或者全端，使用微軟正黑體是沒問題，但該死的別把他加粗！！！
不然就會有比中樂透還要高的機率踩到這個坑，雖然只有三個字，但今天就是踩到了，只能謹記在此文章



參考資料