前幾天我們公司的合作伙伴 EZTABLE 在他們的部落格發佈了一篇〔來用手機訂位吧！〕文章，當介紹到我們公司開發的〔一筵為訂 EZTABLE〕WP7 芒果版 App 時，卻發現我們的「一筵為訂」名稱被拆成了兩段，從畫面上看來會直覺的認為他們在我們 App 名稱中間加上了個「全形空白」，但實際去檢查原始碼又沒有發現空白的存在，到我的噗浪上發問才得知，原來是〔微軟正黑體〕在顯示 粗體 時會有特定文字會出現奇怪空白，這還是我第一次遇到這種事。
我們先來還原問題發生的緣由，再說明處理的方法。我當時有立即複製下有問題的畫面 (如下圖示)：
備註：截圖是個好習慣，各位在開發的過程中若發生任何奇異現象，最好的處理方法就是 [留下證據]，而截圖是最簡單也最快速的方法，如果可以，請留下「全螢幕」畫面，包括系統的時鐘(右下角)。
看到這畫面，我首先觀察的地方就是原始碼有沒有出現空白字元，但光是檢查「檢視原始碼」比較不準，因為網頁的 DOM 隨時都是有可能被異動的，因此我開啟開發者工具進行檢視，發現真的沒有空白字元：
然後接著查看最後計算過的樣式 (在 IE 開發者工具中名為 “追蹤樣式”)，我發現只要將 font-family 屬性給取消，這個空白就會自動消失，但是當下還是沒有發現跟粗體有關係：
當 mOrris 噗友提供一個參考連結才得知，原來是該字型在顯示「粗體」時，特定文字會在文字右邊多顯示一個空白字元的問題，也因此研判應該是「字型」本身出了問題，跟 HTML 與 CSS 應該都沒關係才對，我們唯一能做的，就是不要讓他顯示粗體！
但好奇的我，還是想找出為什麼字型會出問題，接著我從控制台搜尋出〔微軟正黑體〕字型，發現這個字型含有一個系列，因此可以再進一步開啟查看，如下圖示：
接著發現〔微軟正黑體〕系列中有兩個字型，分別是〔微軟正黑體 粗體〕與〔微軟正黑體 標準〕
這也發現這兩個字型的版本竟然不太一樣，標準字體的版本為 6.02 (較新) 而粗體(Bold) 的版本為 6.00
但是，這些發現都於事無補，因為上網也找不到新的字型版本可更換。接著，我又測試了 Windows 8 Consumer Preview 裡的〔微軟正黑體 粗體〕版本為 6.04，不過問題依然沒有解決，特定文字還是會出現莫名的空白字元。
查到後來，我還是不死心，改用 Word 2010 輸入相同的文字做測試，結果發現在 Word 裡面並不會有莫名空白的情況，也讓此案件再次陷入膠著！
我感覺這問題只會出現在「瀏覽器」顯示文字的情況，不管 IE, Firefox, Chrome, Safari, Opera 都會有這樣的問題存在。
問題重現
由於這個問題我已經告知 EZTABLE 如何修正，大家已經看不到出問題的樣子，所以我特別在文章最後設定一段會出先該問題片段，讓大家實際測試看看，如果知道如何解決的話，再麻煩留言告訴我，感恩！:)
以下是〔微軟正黑體 粗體〕的文字段落
※ 請注意「筵」與「碧」這兩個字 ( 我猜大學生應該不喜歡這兩個字同時出現 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. 另一個解決方法，就是不要用〔微軟正黑體〕來顯示中文！
相關連結