為什麼有些網站上漢語拼音字元高度不一致？該如何解決？

01-12

比如中國的拼音 Zhōngguó ，在wiktionary 的China頁面標註的如圖：
各字元高度不一致，很難看。這是瀏覽器端的問題，還是頁面設計的問題？
瀏覽器為Chrome。

因為頁面用 Windows 默認的中易宋體（SimSun；即一般人說的「宋體」）的點陣來顯示帶有聲調的拼音字母了。

而眾所周知，中易宋體的西文點陣很糟糕。這裡，帶有變調符號的拉丁字母和普通拉丁字母完全不協調（不是「顯示的時候變形了」，是點陣沒畫好；而且，@王贇 Maigo 指出，不僅視覺效果不協調，用於14至15像素的這第二檔點陣的 ó 和 ò 還反了……）：

- - - 圖1：中易宋體垃圾的西文點陣 - - -

- - -

題主遇到的問題是「Windows 提供的字體質量不佳」以及「Windows 字體渲染策略不佳」以及「Chrome 在 CJK locale 下的默認字體設置是垃圾」這三方面的共同結果。

主要責任在 Chrome。

如果你只需要解決 Wiktionary 的問題，那麼很簡單。

因為維基百科及其相關的網站都只指定頁面字體的 generic family 為 `sans-serif`，不指定具體的字體，因此用什麼字體顯示頁面取決於瀏覽器將 `sans-serif` fallback 到哪一款字體。

很不幸，Chrome 在簡體中文 locale 下的默認設置（設置＞顯示高級設置… ＞網路內容＞自定義字體…）是這個樣子的垃圾：

- - - 圖2：Chrome 荒謬的默認字體設置 - - -

- - -以上這一組設置導致，一般來說（特例是，非當前系統語言的 CJK 語言頁面的情況不這麼簡單）：

這對於西文是個悲劇。中易宋體根本不適合顯示西文。

合理的模式應當是首先用西文字體盡量顯示，西文字體顯示不了的字元（比如漢字）再交由（fallback 至）其他字體顯示。

所以，你需要做的就是把上述四個選項都改為西文字體（本應如此），比如分別改為：Arial、Georgia、Arial、Consolas。然後，Wikipedia、Wiktionary 等網站的文本就會優先用 Arial 顯示了。Arial 顯示不了的中文會接著 fallback 到中易宋體。

「標準字體」和「Sans-serif 字體」這兩項，除了 Arial，Segoe UI 或 Verdana 也是不錯的選擇。永遠不要把這幾個選項設置為中文字體。

關於 Chrome 字體的設置，參見：Chrome 設置什麼字體較好？

這個純粹就是字體顯示原因.

windows默認字體宋體(simsun)，在18px以下是點陣的。點陣字體的特點是形狀並不遵循字體設計形狀（@梁海提醒，點陣是獨立的一套方案），而是以易識別為目的。（其他很多襯線字體也是這樣）。

所以你看到高度不一致，實際上是因為字體不是以原本的輪廓來顯示的。

這就是為什麼12px的字體，使用宋體很清晰，用雅黑很平滑但是模糊。

現在很多網站普遍使用了非襯線英文字體，比如Arial，因此英文顯示很平滑，中文顯示很清晰。百度知乎人人都是這樣。

Chrome可以自定義字體，在

C:Users當前用戶名AppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css

原來的說法有問題。

Custom.css中定義的樣式和瀏覽器中定義的樣式效果一樣，優先順序準則也一樣。

相比之下Custom.css中定義的樣式優先順序低於頁面定義的樣式。

假如頁面css中body{font-family:"simsun"}你自己定義的body{font-family: "Microsoft YaHei"}

頁面字體以宋體來顯示。

*{font-family: "Microsoft YaHei" !important;}可以強制使用微軟雅黑。

怎麼修改按喜好來吧。

-----------------------------

梁海在評論中提到可以修改瀏覽器設置，這的確是最好的方法。

設置 - 高級設置 - 自定義字體, 修改`標準字體`和`Sans-serif` 比如說改為Arial。

這個修改是非強制的。如果頁面僅定義font-family為Sans-serif，或者沒有定義過字體，那麼英文會默認顯示為Arial。

如果希望強制定義所有頁面的字體，看上面。

1、網頁字體的問題。

2、帶重音符號的O字體上偏，其他的都正常。