怎樣才可以在網(wǎng)頁(yè)中更好地展示簡(jiǎn)中、繁中、英文等內(nèi)容？或許我們可以從字體維度入手。在本篇文章里，作者就對(duì)簡(jiǎn)、繁、中網(wǎng)站里，字體應(yīng)該如何定義這件事兒做了經(jīng)驗(yàn)總結(jié)，一起來(lái)看看吧。

前言

有一次 showcase 中，研發(fā)實(shí)現(xiàn)的界面，和設(shè)計(jì)稿的界面字體不一致，研發(fā)實(shí)現(xiàn)的看起來(lái)丑丑的，被吐槽，結(jié)果研發(fā)說(shuō)為了保證效果一致，以后設(shè)計(jì)稿按照實(shí)現(xiàn)的字體來(lái)設(shè)計(jì)？？？？（問(wèn)號(hào)臉）

其實(shí)就是因?yàn)榫W(wǎng)頁(yè)設(shè)置的 font family 中中文字體沒(méi)有優(yōu)先選擇蘋(píng)方字體，而設(shè)計(jì)稿中使用的是蘋(píng)方字體。還有自重，部分字體在 web 中使用 500 依然是 regular，沒(méi)有被加粗。導(dǎo)致實(shí)現(xiàn)結(jié)果和設(shè)計(jì)稿不符合。

為了使簡(jiǎn)中、繁中、英文在網(wǎng)頁(yè)中展示效果更好，所以決定對(duì)每一個(gè)語(yǔ)系的字體重新定義。

一、了解網(wǎng)頁(yè)上字體展示機(jī)制

排版引擎首先會(huì)根據(jù)產(chǎn)品內(nèi)定義的font-family順序展示。當(dāng)沒(méi)有指定font-family或者設(shè)置的font-family無(wú)效時(shí)，會(huì)繼續(xù)查找瀏覽器設(shè)置的字體（不同瀏覽器的默認(rèn)字體可能不同）。當(dāng)瀏覽器未設(shè)置字體時(shí)，就會(huì)尋找操作系統(tǒng)默認(rèn)字體展示。

由于英文字體不支持中文字體的展示，所以在font family中可以先設(shè)置英文，再設(shè)置中文。中文字體是支持中文簡(jiǎn)體和中文繁體的，所以如果要區(qū)分中文簡(jiǎn)體和中文繁體的話，還需要配合lang一起設(shè)置（實(shí)現(xiàn)的部分可以找研發(fā)一起討論）。

操作系統(tǒng)的規(guī)則是什么？操作系統(tǒng)會(huì)根據(jù)不同的語(yǔ)言選擇對(duì)應(yīng)的字體。比如“Hello”，則會(huì)使用默認(rèn)的英文字體。但是當(dāng)內(nèi)容無(wú)法判斷語(yǔ)系，比如“直接”（簡(jiǎn)中和繁中相同），則會(huì)根據(jù)系統(tǒng)默認(rèn)設(shè)置的語(yǔ)言來(lái)展示。如果系統(tǒng)默認(rèn)語(yǔ)言是繁體中文，則“直接”會(huì)選擇系統(tǒng)默認(rèn)的繁體字體來(lái)展示。

可得出結(jié)論：

• 在font family中先設(shè)置英文，再設(shè)置中文。繁體和簡(jiǎn)體單獨(dú)設(shè)置。
• 字體最好選擇系統(tǒng)默認(rèn)或者系統(tǒng)預(yù)裝字體。

二、了解系統(tǒng)默認(rèn)字體

字體相關(guān)詳細(xì)參考文章：https://segmentfault.com/a/1190000006110417

三、如何選擇字體

1. 對(duì)于中文字體的選擇要求

1. 字體需使用無(wú)襯線字體，無(wú)襯線字體筆畫(huà)粗細(xì)一致，閱讀性更好。
2. 不同字重的視覺(jué)效果需簡(jiǎn)潔清晰。

為了保證蘋(píng)果系統(tǒng)中使用更優(yōu)雅的中文字體，優(yōu)先聲明蘋(píng)方字體, 對(duì)于不支持蘋(píng)方的低版本macOS，再使用Hiragino Sans GB(冬青黑體)字體。蘋(píng)方字體的中文是 PingFang SC，繁體是PingFang TC。

如果需要兼容Linux系統(tǒng)，還需要添加WenQuanYi Micro Hei(文泉驛微米黑)字體。

如果需要兼容不同平臺(tái)的表情符號(hào)，一般在sans-serif后添加”Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji”等字體。

為了保證windows系統(tǒng)中優(yōu)先使用視覺(jué)效果更好的字體，先使用Source Han Sans SC,再使用微軟雅黑。windows 中繁體可以使用微軟正黑Microsoft JhengHei。

結(jié)論：

① 中文簡(jiǎn)體

PingFang SC,Hiragino SansGB,Source Han Sans SC,Microsoft YaHei

② 中文繁體

PingFang TC,Microsoft JhengHei

2. 對(duì)于英文字體的選擇

1. 字體需使用無(wú)襯線字體，無(wú)襯線字體筆畫(huà)粗細(xì)一致，閱讀性更好。
2. 不同字重的視覺(jué)效果需簡(jiǎn)潔清晰，易閱讀。
3. 單行文字時(shí)，文字需劇中。
4. 數(shù)字展示上需簡(jiǎn)潔清晰。

mac 優(yōu)先使用 Helvetica Neue，再Arial。

Arial 也同樣屬于windows的默認(rèn)字體。

結(jié)論：

英文：Helvetica Neue，Arial

四、關(guān)于字重

可以看出所選字體中：

• 字重是 Light 時(shí)對(duì)應(yīng) font weight 300（個(gè)別字體沒(méi)有Light 字重）；
• 字重是 Regular 時(shí)對(duì)應(yīng) font weight 400 或 500；
• 字重是 Medium 時(shí)對(duì)應(yīng) font weight 500（個(gè)別字體沒(méi)有Medium字重）；
• 字重是 Bold 時(shí)對(duì)應(yīng) font weight 600。

若實(shí)際要求只需區(qū)分正常 regular 和加粗的效果，可以直接定義 400（regular） 和 600（Bold）。

五、關(guān)于字體版權(quán)

如何查找字體版權(quán)？

Mac os，打開(kāi)字體冊(cè)。選中字體后，查看字體詳情可以看到版權(quán)許可信息。

比如圖上微軟雅黑，總結(jié)一下這句話的重點(diǎn)就是如果你要嵌入到系統(tǒng)中，那就是侵權(quán)的。還看了其他選擇的字體，基本上都是一個(gè)意思。所選字體的幾乎都是需要版權(quán)許可的。

那為什么其他產(chǎn)品都使用了 font family 卻沒(méi)有版權(quán)問(wèn)題呢？

其實(shí)font family的使用機(jī)制是通過(guò)瀏覽器從用戶的電腦中獲取，該字體版權(quán)已經(jīng)在用戶的電腦里了，屬于用戶所有，網(wǎng)站只是給字體做了聲明，建議瀏覽器使用那種字體渲染網(wǎng)頁(yè)，不涉及侵權(quán)。

而通過(guò)font-face的方式實(shí)現(xiàn)的話，等于是把字體包放入項(xiàng)目文件內(nèi)，若字體未經(jīng)許可就會(huì)涉及版權(quán)問(wèn)題。

我們的實(shí)現(xiàn)方式就是 font family + lang 的方式，是否還有其他方式可以跟研發(fā)討論。