你是否也曾經碰過這樣的狀況？
碧 藍幻想
天下無不散的筵 席
怎麼有些字後面會有空白是故意的嗎？
上面範例的確是故意的，但其他網站顯示一樣的問題卻是意外的插曲
有一天，在某個維運中的專案，那位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來顯示，而一般字還是用原本的微軟正黑體，畢竟我們的問題點在於粗體導致字體出錯而已
結論
不管你是前端、後端或者全端，使用微軟正黑體是沒問題，但該死的別把他加粗！！！
不然就會有比中樂透還要高的機率踩到這個坑，雖然只有三個字，但今天就是踩到了，只能謹記在此文章
參考資料
【原來微軟正黑體有這種怪問題】
【討論】BUG 哈拉區文章列表字形顯示錯誤
真正了解CSS3背景下的@font face规则
網頁使用微軟正黑體的修復方案