我的網站開發手賬(1):在支持繁體和簡體中文時犯的一個小錯

Willis WAN, Chun Yu | 2022-02-06

好多同學仔都知道 Willis 除咗教 ICT 之外,亦都係科大嘅一個研究助理(RA),但係我就好少講實際我會做啲乜嘢。其實每個 RA 嘅職責可以好唔同,而我(作為一個 Information Systems 嘅畢業生)係負責開發一啲實驗網站,俾啲用戶玩下,同時記錄下佢哋有乜嘢行為。(因為係科大,你一係俾人研究,一係就研究人。)所以我要負責幾個數據庫同網站,確保佢哋運作正常,教授要數據嘅時候就export 啲數據出嚟。有時仲要安排實驗品同學仔幾時參加實驗,同埋派錢俾佢哋。

呢半年我就幫手做緊一個同金融科技(FinTech)有關嘅研究。因為我哋想搵廣啲嘅 Participants,所以個網站同時要 Support 繁體中文、簡體中文同英文。

Willis 心諗:簡單啦!揀一個 Support 繁中同英文嘅字體,然後 fallback 去一個簡中嘅字體咪得囉!所以 Willis 就寫咗下面嘅 CSS 語句:

/* 先載入兩個字型:Noto Sans HK (繁中)及 Noto Sans SC(簡中) */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap");

body {
     /* 之後定義翻一開始用 Noto Sans HK,
     如果無呢個字嘅樣式就改用 Noto Sans SC */
    font-family: "Noto Sans HK", "Noto Sans SC", sans-serif;
}

相安無事咗幾個月咁啦。不過最近有啲內地嘅 RA 幫手 Review 個網站嘅時候就同我講:「Willis,點解簡體咁多錯字嘅?」

黑人問號?好彩佢有 send 個 docx 我望望,然後我成個人呆咗。考下你哋:「非」同「」有乜嘢分別?

無錯。左下個一筆平咗。

我一直以為,簡體中文只不過係好多字筆畫少咗,有啲字個樣好唔同咁多。原來有唔少字係喺個寫法上有超細微嘅唔同,但係會對內地人嚟講,嗰個係一個錯字。

兩個「非」字係 Unicode 㡳下係同一個 code。咁可以點樣解決呢個問題呢?原來只要透過 CSS 嘅 Psuedo-class 功能檢查現時 HTML 嘅 lang 屬性去俾翻個啱嘅字型就得:

body {
     /* 平時就用 Noto Sans HK */
    font-family: "Noto Sans HK", sans-serif;
}

/* 但係如果 HTML 嘅語言係 zh-Hans(簡體中文)的話⋯⋯ */
html:lang(zh-Hans) body {
 /* 就改用 Noto Sans SC */
 font-family: "Noto Sans SC", sans-serif;
}

咁樣嘅話,簡體中文嘅版本就會完全改用 Noto Sans SC 呢隻字體,唔會再出現香港人覺得好正常,但係內地人覺得錯嘅異體字啦!

(希望以後唔駛再寫啲要 support 幾種語言嘅網站啦 😅)