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


Willis WAN, Chun Yu

Posted 06 February 2022

Cascading Style Sheet 階層式樣式表

HKDSE

HKDSE ICT

ICT

Web Application Development 網絡程式開發

好多同學仔都知道 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 幾種語言嘅網站啦 😅)

About the Author

Willis WAN, Chun Yu

A graduate in BBA(Information Systems) of HKUST. Tech Enthusiast, Teacher, Learner.

Copyright © 2021 All Rights Reserved