HTML中設(shè)置lang屬性的意義

1. 如果不設(shè)置 lang 屬性…

<p>天</p>
<p lang="zh-CN">天</p>

結(jié)果為：

這是因?yàn)楸卷撁嫱鈱釉O(shè)置了 lang="ja"，因此如果不設(shè)置 lang 屬性，就會(huì)繼承外層的設(shè)置，使瀏覽器默認(rèn)使用日文字體。日文字體的「天」字上長下短，與中文習(xí)慣不符，影響用戶的閱讀體驗(yàn)。

有人會(huì)說，我當(dāng)然不會(huì)把頁面外層設(shè)置為日文。但是，如果頁面沒有設(shè)置 lang 屬性，就會(huì)使用瀏覽器或操作系統(tǒng)設(shè)置的語言。用戶的系統(tǒng)使用何種語言，是網(wǎng)頁開發(fā)者無法控制的。

又有人會(huì)說，「天」字只有兩橫的長短區(qū)別，差別并不大，有必要關(guān)注嗎？其實(shí)，這是很有必要的。

首先，雖然對于「天」字來說，日文字體與中文字體的差別并不大，但還有許多字差別較大，例如：

（圖片取自知乎問題「為何有時(shí)電子設(shè)備上『門』會(huì)顯示為『?冂丨』？」中亜恵恵阿由的回答）

其次，即使網(wǎng)頁使用日文字體，如果所有漢字都使用日文字體顯示，達(dá)到風(fēng)格上的統(tǒng)一，在一定程度上尚可接受。但是，許多日文字體缺少中國大陸的簡體字，這些字會(huì) fallback 到能顯示大陸簡體字的日文字體或大陸字體，從而出現(xiàn)字體混雜的問題。例如：

（圖中為阮一峰的網(wǎng)絡(luò)日志在日文系統(tǒng)中出現(xiàn)使用日文字體與字體混雜的問題的截圖）

這種問題只需要在網(wǎng)頁 html 標(biāo)簽添加屬性 lang="zh-CN" 即可解決。

有人會(huì)說，為什么會(huì)有人使用日文系統(tǒng)瀏覽中文網(wǎng)頁呢？實(shí)際上，隨著國際交流與合作日益密切，出于工作和學(xué)習(xí)的原因，不少中國人會(huì)使用日文系統(tǒng)，也有不少日本人會(huì)瀏覽中文網(wǎng)頁。而且，上述字體問題不僅會(huì)在日語環(huán)境下出現(xiàn)，在其他外語環(huán)境下同樣會(huì)出現(xiàn)。因此，考慮這一問題是很有必要的。

2. lang="zh-CN", lang="zh-HK" 與 lang="zh-TW" 的差異

<p lang="zh-CN">骨</p>
<p lang="zh-HK">骨</p>
<p lang="zh-TW">骨</p>

結(jié)果為：

這是因?yàn)橹袊箨憽腹恰股戏匠?，而香港、臺灣朝右；大陸、香港「骨」下方作兩橫，而臺灣作「點(diǎn)挑」。設(shè)置語言屬性后，瀏覽器分別應(yīng)用了三地的字體。

3. lang="zh-Hans" 與 lang="zh-Hant" 的差異

<p lang="zh-Hans">骨</p>
<p lang="zh-Hant">骨</p>

結(jié)果為：

這是因?yàn)?zh-Hans 默認(rèn)使用大陸字形，zh-Hant 默認(rèn)使用臺灣字形。

4. lang="zh-HK" 與 lang="zh-Hant-HK" 有什么區(qū)別？

一般情況下沒有區(qū)別，因?yàn)橄愀凼鞘褂梅斌w中文的地區(qū)，所以 lang="zh-HK" 就隱含了 lang="zh-Hant-HK"，二者的行為應(yīng)該是等同的。

但是，在目前最新版的 Mozilla Firefox 中二者行為不同：

<p lang="zh-HK"><q>你好</q></p>
<p lang="zh-Hant-HK"><q>你好</q></p>

結(jié)果為：

這可能只是一個(gè) bug。

5. lang 屬性在西文中的差異

<style>.upper { text-transform: uppercase; }</style>
<p class="upper" lang="en-US">shipping</p>
<p class="upper" lang="tr">shipping</p>

結(jié)果為：

這是因?yàn)橥炼湮挠袔c(diǎn)與不帶點(diǎn)兩種 i 字母，帶點(diǎn)的小寫 i 對應(yīng)的是帶點(diǎn)的大寫 ?。

6. lang="en-GB" 與 lang="en-US" 的差異

<textarea lang="en-GB">center centre</textarea>
<textarea lang="en-US">center centre</textarea>

結(jié)果為：

這是因?yàn)樵?Mozilla Firefox 中，拼寫檢查時(shí)會(huì)區(qū)分英國英語與美國英語。

7. 是不是只要使用了相應(yīng)地區(qū)的漢字字體，就沒必要再使用 lang 屬性指定地區(qū)了？

有人可能認(rèn)為，既然 lang 屬性會(huì)影響瀏覽器所使用的漢字字體，從而影響字形，那么只要用了相應(yīng)地區(qū)的漢字字體，字形自然也就確定了，所以也就不必再指定 lang 屬性了。

這種想法是不正確的。因?yàn)楝F(xiàn)代字體具有 OpenType 的 locl 特性，會(huì)根據(jù) lang 屬性改變字形。

<style>.font-k { font-family: 'Source Han Sans SC', sans-serif; }</style>
<p class="font-k">天</p>
<p class="font-k" lang="zh-CN">天</p>

結(jié)果為：

這是因?yàn)橥鈱釉O(shè)置了 lang="ja"，因此如果不設(shè)置 lang 屬性，就會(huì)繼承外層的設(shè)置，使瀏覽器默認(rèn)使用日文字形。雖然 Source Han Sans SC 默認(rèn)為中國大陸字形，但是由于 OpenType 的 locl 特性，也會(huì)自動(dòng)變?yōu)槿瘴淖中巍?/p>

有人會(huì)說，我當(dāng)然不會(huì)把頁面外層設(shè)置為日文。但是，需要再次重申，如果頁面沒有設(shè)置 lang 屬性，就會(huì)使用瀏覽器或操作系統(tǒng)設(shè)置的語言。用戶的系統(tǒng)使用何種語言，是網(wǎng)頁開發(fā)者無法控制的。

還有一個(gè)更常見的現(xiàn)象是引號問題。

<div lang="en">
  <p>“你好”</p>
  <p lang="zh-CN">“你好”</p>
</div>

結(jié)果為：

這是因?yàn)?Unicode 中并不區(qū)分全角與半角引號，具體的顯示效果會(huì)由于 lang 屬性的不同而不同。

8. 中國大陸的簡體中文網(wǎng)頁應(yīng)該設(shè)置 lang="zh" 還是 lang="zh-CN"？

從效果上看，二者并沒有區(qū)別，都會(huì)使用大陸字形顯示漢字。因此，設(shè)置哪個(gè)都是沒有問題的。

但是，如果網(wǎng)頁是簡繁混排的，即同一網(wǎng)頁中還會(huì)出現(xiàn) lang="zh-HK" 或 lang="zh-TW"，則為了代碼的可讀性與可維護(hù)性，應(yīng)該使用 lang="zh-CN"。

例如，使用楷體排版的多語言網(wǎng)頁可以這樣設(shè)置 CSS：

:lang(zh), :lang(ja), :lang(ko) { text-align: justify; }
:lang(zh-CN) { font-family: KaiTi, cursive; }
:lang(zh-TW) { font-family: DFKai-SB, cursive; }
:lang(zh-HK) { font-family: DFPHKStdKai-B5, cursive; }

西文文本不宜使用兩側(cè)對齊，否則會(huì)造成川流現(xiàn)象；中文、日文、韓文可以使用兩側(cè)對齊。這時(shí)，使用 lang="zh"，可以一次性選擇所有中文變體，即所有以 zh 起始的 lang 屬性。

如果將 lang="zh-CN" 改為 lang="zh"，則上述 CSS 代碼中的 lang="zh-CN" 也必須改為 lang="zh"。在維護(hù)過程中，有可能因?yàn)榫S護(hù)人員的疏忽，規(guī)則之間被調(diào)換了順序，寫作：

:lang(zh), :lang(ja), :lang(ko) { text-align: justify; }
:lang(zh-TW) { font-family: DFKai-SB, cursive; }
:lang(zh-HK) { font-family: DFPHKStdKai-B5, cursive; }
:lang(zh) { font-family: KaiTi, cursive; }

這樣就產(chǎn)生了 bug，因?yàn)檫@會(huì)導(dǎo)致 :lang(zh-TW) 與 :lang(zh-HK) 兩條規(guī)則都被 :lang(zh) 覆蓋。

9. 應(yīng)該使用 lang="zh-Hant" 類屬性，還是應(yīng)該使用 lang="zh-TW" 類屬性？

如前文所述，這在顯示效果上是沒有差別的，因?yàn)?zh-Hant 默認(rèn)使用臺灣字形。但是，二者卻有語義上的差別。

如果網(wǎng)頁內(nèi)容是一篇用現(xiàn)代文體寫成的、使用繁體字的、講述古代文化的文章，其地域性并不強(qiáng)，并不能直接看出是臺灣、香港，或是其他使用繁體字的地區(qū)的文章，因此應(yīng)該使用 lang="zh-Hant"。同理，如果這樣的文章使用簡體字寫成，其地域性并不強(qiáng)，并不能直接看出是來自中國大陸，還是其他使用簡體字的地區(qū)，因此應(yīng)該使用 lang="zh-Hans"。

而如果網(wǎng)頁內(nèi)容是一篇與現(xiàn)代生活緊密相關(guān)的文章，則通常需要指明地區(qū)。這是因?yàn)椴煌貐^(qū)的用字、用詞與寫作習(xí)慣均存在差異。例如，在用字上，中國大陸、香港「著」和「著」音義均不同，而臺灣則一律用「著」；在用詞上，中國大陸稱「摩托車」，香港稱「電單車」，而臺灣稱「機(jī)車」。這時(shí)就應(yīng)該使用 lang="zh-CN", lang="zh-HK", lang="zh-TW" 等屬性。

10. 如何使 lang="zh-Hant" 使用香港或韓國字形？

zh-Hant 默認(rèn)使用臺灣字形。但是有人會(huì)說，自己的頁面就是需要設(shè)置 lang="zh-Hant"，但是又不想使用臺灣字形。這時(shí)可以使用 CSS 的 font-language-override 屬性。

<style>
.glyph-hk:lang(zh-Hant) { font-language-override: "ZHH"; }
.glyph-kr:lang(zh-Hant) { font-language-override: "KOR"; }
</style>
<p lang="zh-Hant">霄</p>
<p class="glyph-hk" lang="zh-Hant">霄</p>
<p class="glyph-kr" lang="zh-Hant">霄</p>

結(jié)果為：

font-language-override 屬性的常用取值如下：

• 大陸字形：ZHS
• 臺灣字形：ZHT
• 香港字形：ZHH
• 韓國字形：KOR
• 日本字形：JAN

11. 為什么一般情況下不應(yīng)使用以 cdo, cjy, cmn, cnp, cpx, csp, czh, czo, gan, hak, hsn, lzh, mnp, nan, wuu, yue 等起始的屬性？

這有兩個(gè)原因。

首先是出于兼容性的考量，因?yàn)橹挥幸徊糠州^新的瀏覽器支持這些屬性。

例如，吳語維基百科設(shè)置了 lang="wuu"。對于日文系統(tǒng)，在目前最新版的 Edge 瀏覽器中，頁面會(huì)出現(xiàn)字體混雜的問題。

（圖中為吳語維基百科的《徐家匯》頁面在日文系統(tǒng)中出現(xiàn)字體混雜的問題的截圖）

這是因?yàn)?Edge 不能識別 wuu 這類屬性。由于系統(tǒng)語言為日語，因此 Edge 優(yōu)先使用日文字體顯示。Edge 默認(rèn)的日文字體是 Meiryo 字體，該字體缺少中國大陸的簡體字，因此 fallback 到宋體，從而出現(xiàn)字體混雜的問題。

當(dāng)然，由于吳語維基百科使用吳語，與通常所指的漢語并不等同，因此確實(shí)需要使用 wuu 這一屬性；而一般的漢語頁面使用以 zh 起始的屬性即可，不需要使用 cmn。這就涉及到第二個(gè)原因。

根據(jù)中國開發(fā)者的習(xí)慣，在編寫中文頁面時(shí)，通常會(huì)認(rèn)為頁面記錄的是「漢語」，而不是「官話」。這是因?yàn)樵谥袊送ǔ５挠^念中，與「英語」、「日語」等相對的是「漢語」，而「官話」則與「粵語」、「吳語」等相對。如果頁面使用以 zh 起始的屬性，更能反映這樣的語義。而如果編寫的頁面中同時(shí)出現(xiàn)了普通話與粵語，這時(shí)對普通話內(nèi)容使用以 cmn 起始的屬性，對粵語內(nèi)容使用以 yue 起始的屬性，是較好的選擇。