0

使用者報案網頁多了一個像 L 的字元，在同事的電腦可重現，但在我的機器卻看不到。進一步測試，發現這個像 L 的字元在同事的 Windows 7 要用 Chrome 才會出現，用 IE 看不到；而在我的 Windows 10 上，不管用 Chrome、IE 還是 Firefox 都看不到。透過 F12 開發者工具鎖定可疑字元，複製貼上到中文編碼解析工具，發現原來是 ASCII 0x03 字元，有可能是網頁製作者從 Office 文件複製貼上被夾帶過來的。ASCII 0x03 這類控制碼字元，看不見是合理的，為何在 Win7 + Chrome 會現形則是個謎。

於是我寫了一個測試網頁，列舉從 ASCII 01-65("A") 的 65 個字元。 

StringBuilder sb = new StringBuilder();
sb.AppendLine("<html><body><table>");
for (int i = 1; i < 65; i++)
{
    char c = (char) i;
    sb.AppendLine($"<tr><td>{i}</td><td>{c}</td></tr>");
}
sb.AppendLine("</table></body></html>");
System.IO.File.WriteAllText("e:\\ASCII.html", sb.ToString());

用 Notepad++ 看會像這樣，那些 SOH、STX、ETX 就是 ASCII 32 以下的隱形控制字元。

用我的電腦實測，不管 Chrome、IE 還是 Firefox，都看不到空白字 (ASCII 32) 之前的控制字元。

改用 Windows 7 + Chrome 檢視，原本該隱形的字元都冒出來了。如下圖，ASCII 1-4 分別是方框的左上、右上、左下、右下角，問題網頁內容的 ASCII 3 是左下角，才被使用者誤認為 L。進一步使用 F12 開發者工具檢查，得知關鍵在於 ASCII 控制碼所在的 <TD> 使用了 Gulim 這個字型，Gulim 這個韓文字型有個特色，ASCII 控制碼被對應到可見的特殊符號，造成我們遇到的狀況。

我查不到關於 Chrome 此一行為的官方說明，由找到的文章，Gulim 似乎是 Windows 7 Chrome 針對 CJK(中日韓) 字型無對應時的 Fallback 字型。參考:

  • 最佳 Web 中文默認字體 - 問問題
    ... 在英文 Win7 下，只要 charset=“gbk”, 當 font-family 為 arial, sans-serif 時， 是 fallback 到瞭韓文字體 Dotum/Gulim（gulim.ttc）來顯示 ...
  • Chrome 3.0的字有夠醜！ – 蘋果豬日記V4
    ... 把Arialuni殺掉之後，接下來fallback的順序依序是：Arial Unicode > Simsun > Gulim > MS Gothic > Mingliu
    分別是Unicode預設>簡體中文預設>韓文預設>日文預設>正體中文預設。...

由以上這些線索，大致可以推論「在 Win 7 Chrome 中，小於 ASCII 32 的控制字元會使用 Gulim 這個字型顯示而變成可見的符號。」

結案~


Comments

Be the first to post a comment

Post a comment