6

Chrome 網頁中文變醜之謎

 2 years ago
source link: https://blog.darkthread.net/blog/lang-zh-simsun/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Chrome 網頁中文變醜之謎

2017-11-19 10:51 AM 3 15,539

我習慣將 Chrome 標準字型設成思源黑體字型， 除非網頁硬將 font-family 指定成細明體(例如: Mobile01)，換了字型讓網頁質感變好，比新細明體賞心悅目許多。

4277-3cd4-o.gif

Pocket 是我慣用的稍後再讀服務，在 FB 或爬文時看到不急著看但值得花時間讀的相關文章，我會先丟進 Queue 裡收藏，有空再讀。在使用 Pocket 網頁介面閱讀文章時我注意到一件事 – 文字閱讀模式(不開啟原始網頁，改用 Pocket 自訂樣式呈現文章內容) 下，標題字型是 Chrome 預設的思源黑體沒錯，但內文部分中文變得很醜，但不是新細明體。

原以為是 CSS 被設成某種特殊中文字型，但使用 F12 工具檢查，內文區的 font-family 是 inherit，Rendered Fonts 則顯示最後用的是 SimSun 新宋體(相當於簡體中文界的新細明體吧)。inherit 理論上該使用 Chrome 的預設字型，應該是 Noto Sans CJK TC Regular 才對。

4276-f527-o.gif

爬文找到相關文章 Chrome 18 以上中文字體變醜的原因及暫時解法 - Yu-Cheng Chuang’s Blog ，提到 Chrome 遇到 lang="zh" 會視為簡體中文(lang="zh-tw" 才是繁體中文)的行為。檢查 HTML，果然在內文 <div> 發現 lang="zh"，而標題沒有，這樣就能解釋標題跟內文字型為何不同，二者的 font-family 都是 inherit，但內文因 lang="zh" 被視為簡體，故用了簡體中文的預設字型 SimSun。

4278-489b-o.gif

使用 Chrome Adavanced Font Settings 外掛可找到 Chrome 針對簡體中文的進階字型設定，三種字型風格中的 Serif 被設定新宋體，Standard/Sans-Serif 則是微軟雅黑。將三者都改成思源黑體，就可以解決 lang="zh" 讓字型變醜的問題了。

4279-61af-o.gif

另外，Pocket 閱讀介面可選擇使用 Serif 或 Sans Serif 字型，若不改進階字型設定，選 Sans Serif 會改用微軟雅黑體，也可避開醜醜的新宋體。但如果不想在其他網站也因 lang="zh" 中文變醜，修改簡體中文預設字型是根本解決之道。

4280-7a68-o.gif

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK