The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

Windows 7 內建的〔微軟正黑體〕在顯示粗體文字時需注意

前幾天我們公司的合作伙伴 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 標題元素或 strongb 粗體元素
  • 使用 CSS 樣式設定 font-weight: bold;font-weight: bolder; 等樣式屬性

如果你用了 h1 ~ h6 , strongb 元素而導致文字變粗體的話,可以額外新增一個 font-weight: normal; 樣式屬性強迫將文字變成標準字體,也可以解決此問題。

2. 另一個解決方法,就是不要用〔微軟正黑體〕來顯示中文!

 

相關連結