網頁使用微軟正黑體的修復方案

最近在工作上遇到要使用黑體為網頁預設字體，本來認為微軟正黑體很安全的，直到我們在標題出現『碧』這個字……
以下示範：

碧筵綰這三個字特別遠。

Google後看維基的資料，內心無限無言。M$老大，你為什麼明知道他是bug卻放生他TAT（崩潰）
維基上面有寫某個網誌在本機端的解法，但是我是web前端，怎麼可能叫用戶自己下載微軟正黑體修訂版……
後來同事提到換字體，立刻想在網路找open source的中文字體。Google固然是有提供黑體，但試用google黑體的粗體發現是個悲劇……
明顯的『熱』、『食』等很奇怪，放大到一定程度還會有奇怪的稜角XD……（最近一兩個月(2016/6)回來看發現google黑體要用其指定的方式置入字體樣式，然後稜角的問題消失惹，可喜可賀。但比較需要注意的是，我個人拿線上工具測，線上字型要1.93MB，可能要衡量是否有這個必要load線上字型）
以下新聞範例，原文按此

〈台北都會〉士林夜市美食區重新開幕 回饋招待
〔記者游蓓茹／台北報導〕北市觀光熱門夜市、士林市場美食區每四年皆會「自我健檢」，重新整頓用餐與作業空間，去年十一月卅日起暫停營業進行整修，在十二月廿八日開始恢復營業，士林市場自今年一月八日起舉辦四波回饋活動，歡迎在地人再次回到士林體驗夜市美食的好滋味。
今起四波活動 吃美食送獎金
「舊愛食客」今天由市場招待十組老朋友再聚士林用餐，每組都憑舊照片報名，過去聚餐畫面「原影重現」，還有當年第一次離開澎湖來士林參加畢業旅行的同學們來此重溫舊夢，用美食延續彼此感情。
「豪情宴客」明、後天晚上七點，顧客在B1美食區用餐都有機會被招待，市場將現場抽取攤號，找到指定桌次後，該桌所點購的餐點全數由市場買單，兩天共產生廿組幸運兒。
「在地食客」從一月十二日至十五日起連續四天，憑身分證末碼就可換取士林市場一百五十元消費券，每日限量兩百人；至B1美食區消費還可參加第四波「行動食客」，自一月十二日至十五日不限金額消費即可獲得限量序號參加抽獎，總獎金高達十萬元！本次活動也與本土插畫家合作，以不同角度設計四款士林市場手繪明信片，放置於B1美食區供民眾索取！

在查閱資料時候意外發現微軟的黑體系列日文可以使用，並且所有的漢字也可以用！所以本來想偷懶全部換成MS Gothic（win7以上內建）或Yu Gothic（效果比較好），但他會在特定的漢字以日文的寫法書寫，例如旅這個字。

正黑體的旅
Yu Gothic 或 MS Gothic的旅
※沒有yug的話會以msg代替

使用@font-face的時候就想他應該可以限定使用的字吧？結果真的有XD。
所以最簡單實現在微軟系統下能正常一點顯示這三個字的方式就是在粗體的時候把字改成Yu Gothic / MS Gothic的方式顯示。

碧筵綰這三個字就正常了！

/* 修正粗體 */
@font-face {
    font-family: '微軟正黑體修正';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: bold;
    src: local(Yu Gothic), local(MS Gothic);
}
/* 一般粗細的時候改回微軟正黑 */
@font-face {
    font-family: '微軟正黑體修正';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: normal;
    src: local(微軟正黑體);
}
* {
    font-family: Helvetica, Arial, 微軟正黑體修正, 微軟正黑體, serif;
}
        

覺得沒有解決到問題嗎XD?
事實上只有windows系列才會產生這種問題，當然最保險的做法是提供整個完整的黑體字體，但中文字的大小真的很可觀，不太可能自己壓一套字體，就算壓了，想想CSS也不過幾百K，一套字型上去就他的10倍UP XD……
當然如果你家很有錢，可以用justfont這樣的雲端文字服務提供，可是他的服務不是買斷，我覺得不是我想要的方法（因為老闆可能也不在乎吧XD）。
所以接下來是進階修改，把電腦的微軟正黑體粗體叫出來，然後修正寬度，只存三個字的補丁，再利用上面的@font-face做修正就好了！
可參考下列網誌說明：

• 原來微軟正黑體有這種怪問題
• 自製中文網頁字形（Web Font）並內崁至網頁中（使用 CSS @font-face）

需要注意的是微軟正黑體只有在windows粗體出問題，因此要用js判斷裝置(navigator.userAgent)額外載入@font-face設定，不然像android、mac、iphone看到的就會是兩種黑體……