# Windows 7 內建的〔微軟正黑體〕在顯示粗體文字時需注意 前幾天我們公司的合作伙伴 [EZTABLE](http://www.eztable.com.tw/) 在他們的[部落格](http://blog.eztable.com.tw/)發佈了一篇〔來用手機訂位吧！〕文章，當介紹到我們公司開發的〔[一筵為訂 EZTABLE](http://www.windowsphone.com/zh-TW/apps/75f45f4c-6a73-4609-96e3-3339aa76cfa5)〕WP7 芒果版 App 時，卻發現我們的「一筵為訂」名稱被拆成了兩段，從畫面上看來會直覺的認為他們在我們 App 名稱中間加上了個「全形空白」，但實際去檢查原始碼又沒有發現空白的存在，到[我的噗浪](http://www.plurk.com/willh/invite)上[發問](http://www.plurk.com/p/g8lyyn)才得知，原來是〔[微軟正黑體](http://zh.wikipedia.org/wiki/%E5%BE%AE%E8%BB%9F%E6%AD%A3%E9%BB%91%E9%AB%94)〕在顯示 **粗體** 時會有特定文字會出現奇怪空白，這還是我第一次遇到這種事。 我們先來還原問題發生的緣由，再說明處理的方法。我當時有立即複製下有問題的畫面 (如下圖示)： ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/854ff385c3c0c86ea923-image_1454.png) 備註：截圖是個好習慣，各位在開發的過程中若發生任何奇異現象，最好的處理方法就是 \[**留下證據**\]，而截圖是最簡單也最快速的方法，如果可以，請留下「全螢幕」畫面，包括系統的時鐘(右下角)。 看到這畫面，我首先觀察的地方就是原始碼有沒有出現空白字元，但光是檢查「檢視原始碼」比較不準，因為網頁的 DOM 隨時都是有可能被異動的，因此我開啟開發者工具進行檢視，發現真的沒有空白字元： ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/6e866af6f02f9847b4ac-image_1455.png) 然後接著查看最後計算過的樣式 (在 IE 開發者工具中名為 “追蹤樣式”)，我發現只要將 font-family 屬性給取消，這個空白就會自動消失，但是當下還是沒有發現跟**粗體**有關係： ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/9b8cee442f57fb2abc23-image_1456.png) 當 [mOrris](http://www.plurk.com/morris32) 噗友提供一個參考連結才得知，原來是該字型在顯示「**粗體**」時，特定文字會在文字右邊多顯示一個空白字元的問題，也因此研判應該是「字型」本身出了問題，跟 HTML 與 CSS 應該都沒關係才對，我們唯一能做的，就是不要讓他顯示粗體！ 但好奇的我，還是想找出為什麼字型會出問題，接著我從控制台搜尋出〔微軟正黑體〕字型，發現這個字型含有一個系列，因此可以再進一步開啟查看，如下圖示： ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/73f8ed6d81ce885acc91-image_1457.png) 接著發現〔微軟正黑體〕系列中有兩個字型，分別是〔微軟正黑體 粗體〕與〔微軟正黑體 標準〕 ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/83a2240da3ef108f3adc-SNAGHTML47d238e.png) 這也發現這兩個字型的版本竟然不太一樣，標準字體的版本為 6.02 (較新) 而**粗體**(Bold) 的版本為 6.00 ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/43be55c782c0fe882f26-SNAGHTML7af8e23_4.png) ![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/7f794446cf49b1b38cdf-SNAGHTML7b009b8.png) 但是，這些發現都於事無補，因為上網也找不到新的字型版本可更換。接著，我又測試了 Windows 8 Consumer Preview 裡的〔微軟正黑體 粗體〕版本為  6.04，不過問題依然沒有解決，特定文字還是會出現莫名的空白字元。 查到後來，我還是不死心，改用 Word 2010 輸入相同的文字做測試，結果發現在 Word 裡面並不會有莫名空白的情況，也讓此案件再次陷入膠著！ 我感覺這問題只會出現在「瀏覽器」顯示文字的情況，不管 IE, Firefox, Chrome, Safari, Opera 都會有這樣的問題存在。 **問題重現** 由於這個問題我已經告知 [EZTABLE](http://www.eztable.com.tw/) 如何修正，大家已經看不到出問題的樣子，所以我特別在文章最後設定一段會出先該問題片段，讓大家實際測試看看，如果知道如何解決的話，再麻煩留言告訴我，感恩！**:)** **以下是〔微軟正黑體 粗體〕的文字段落 **※ 請注意「筵」與「碧」這兩個字 ( 我猜大學生應該不喜歡這兩個字同時出現 XD ) - 自古以來，無論是君臣餽贈、遠友相會或是家人團聚，皆常以盛宴款待對方，因此有了「筵」這個字的存在。「筵」，代表宴席，聚餐之意，而「一筵為訂」的讀音與「一言為定」完全相同，意味著客戶透過「一筵為訂」App 訂餐廳後，即與他人訂定了相聚的承諾，形成一個珍貴的諾言。因此本應用程式取名為「一筵為訂」，期待用戶都可以透過本 App，查詢優質餐廳的訂位資訊，進而安排一個美好的饗宴，使用戶的社交關係更為圓滿。 - 〔碧海藍天〕是法國導演盧貝松的成名作，擁有過人潛水能力的他，在一次次比賽中超越極限，當他來到不可能的深海，是否將遇見傳說中的美人魚？！ **以下****是〔微軟正黑體 標準〕的文字段落** - 自古以來，無論是君臣餽贈、遠友相會或是家人團聚，皆常以盛宴款待對方，因此有了「筵」這個字的存在。「筵」，代表宴席，聚餐之意，而「一筵為訂」的讀音與「一言為定」完全相同，意味著客戶透過「一筵為訂」App 訂餐廳後，即與他人訂定了相聚的承諾，形成一個珍貴的諾言。因此本應用程式取名為「一筵為訂」，期待用戶都可以透過本 App，查詢優質餐廳的訂位資訊，進而安排一個美好的饗宴，使用戶的社交關係更為圓滿。 - 〔碧海藍天〕是法國導演盧貝松的成名作，擁有過人潛水能力的他，在一次次比賽中超越極限，當他來到不可能的深海，是否將遇見傳說中的美人魚？！ **解決方法** 這個問題我目前沒有解決方法 (Solution)，只有應變措施 (Workaround)，要能繞過此問題的方法有兩種： 1\. 使用〔微軟正黑體〕字型的時候不要使用**粗體**顯示中文字，在網頁中會出現**粗體**字有幾種可能： - 使用 h1 ~ h6 標題元素或 strong 或 b 粗體元素 - 使用 CSS 樣式設定 font-weight: bold; 或 font-weight: bolder; 等樣式屬性 如果你用了 h1 ~ h6 , strong 或 b 元素而導致文字變粗體的話，可以額外新增一個 font-weight: normal; 樣式屬性強迫將文字變成標準字體，也可以解決此問題。 2\. 另一個解決方法，就是不要用〔微軟正黑體〕來顯示中文！ **相關連結** - [微軟正黑體 - 维基百科，自由的百科全书](http://zh.wikipedia.org/wiki/%E5%BE%AE%E8%BB%9F%E6%AD%A3%E9%BB%91%E9%AB%94) - [\[討論\] 微軟正黑體bug「碧」字右邊多出奇怪的空白](http://www.ptt.cc/bbs/Web_Design/M.1283876969.A.64B.html) - [\[技巧\]微軟正黑體的BUG](http://amos-lee.blogspot.tw/2010/11/bug.html)