使用者報案網頁多了一個像 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 這個字型顯示而變成可見的符號。」
結案~