當(dāng)前位置:首頁 > 芯聞號(hào) > 充電吧
[導(dǎo)讀]Web 中文字體應(yīng)用指南 在 Web 上應(yīng)用字體是一項(xiàng)基本技術(shù),同時(shí)也是一門藝術(shù)。對(duì)于英文字體來說可選擇的范圍實(shí)在是太廣泛了,合理的使用它們將會(huì)為你的網(wǎng)站增色不少。關(guān)于英文字體的使用和搭配技巧,在這

Web 中文字體應(yīng)用指南

在 Web 上應(yīng)用字體是一項(xiàng)基本技術(shù),同時(shí)也是一門藝術(shù)。對(duì)于英文字體來說可選擇的范圍實(shí)在是太廣泛了,合理的使用它們將會(huì)為你的網(wǎng)站增色不少。關(guān)于英文字體的使用和搭配技巧,在這里不做贅述,只推薦一套非常好的視頻:Fundamentals of Design?by CodeSchool

而真正的挑戰(zhàn)在于中文字體,由于中文字體組成的特殊性導(dǎo)致其體積過于龐大,除了操作系統(tǒng)內(nèi)置的字體之外,我們很難在網(wǎng)站上應(yīng)用其他的字體。在可選性很差的前提之下,如何正確的使用中文字體呢?

首先,以下的字體聲明都是很糟糕的,切忌使用:

font-family: "宋體";

font-family: "宋體", Arial;

font-family: Arial, "宋體", "微軟雅黑";

font-family: Helvetica, Arial, "華文細(xì)黑", "微軟雅黑";

...

接下來,我們一步一步來說明如何定義好的字體聲明。

中文字體也有英文名稱

很多開發(fā)者忽略了這一點(diǎn):盡管我們?cè)诓僮飨到y(tǒng)中常??吹?code style="font-family:Monaco, Menlo, 'Courier New', monospace;font-size:12px !important;color:rgb(68,68,68) !important;background-color:rgb(248,248,255) !important;border:1px solid rgb(222,222,222) !important;">宋體、微軟雅黑、華文細(xì)黑這樣的字體名稱,但實(shí)際上這只是字體的顯示名稱,而不是字體文件的名稱。雖然說在大多數(shù)情況下直接使用顯示名稱也有效,但有些用戶卻工作在一些很極端的情況下,這會(huì)導(dǎo)致你的字體聲明無效。

比如說,用戶安裝了中文版的操作系統(tǒng)(這意味著系統(tǒng)有中文字體),但是卻切換到了以英文為主要語言——這種情況在那些希望加強(qiáng)英語鍛煉的中文用戶當(dāng)中是很常見的。這時(shí)候,操作系統(tǒng)很有可能無法按照顯示名稱找到正確的字體,所以我們要記住的第一件事情就是:?同時(shí)聲明中文字體的字體名稱(英文)和顯示名稱(中文),就像這樣:

font-family: SimSun, "宋體";

font-family: "Microsoft YaHei", "微軟雅黑";

font-family: STXihei, "華文細(xì)黑", "Microsoft YaHei", "微軟雅黑";
永遠(yuǎn)不要忘記聲明英文字體,并且英文字體應(yīng)該在中文字體之前

記住這個(gè)事實(shí):絕大部分中文字體里包含英文字母(但是基本上都很丑),而英文字體里不包含中文字符。

在網(wǎng)頁里中/英文混排是很常見的,你絕對(duì)不會(huì)喜歡用中文字體顯示英文的效果,所以一定不要忘了先聲明英文字體:

font-family: Georgia, SimSun, "宋體";

font-family: Arial, "Microsoft YaHei", "微軟雅黑";

另外還有一個(gè)好習(xí)慣,就是在最后補(bǔ)充英文字體族的名稱。字體族大體上分為兩類:非襯線和襯線,它們之間的區(qū)別和使用規(guī)則請(qǐng)見本文開始介紹的視頻。一般來說,你應(yīng)該這么做:

font-family: Georgia, SimSun, "宋體", serif;

font-family: Arial, "Microsoft YaHei", "微軟雅黑", sans-serif;

請(qǐng)注意:以上兩句聲明中的宋體微軟雅黑不應(yīng)該調(diào)換(盡管調(diào)換了也不會(huì)發(fā)生錯(cuò)誤),這是因?yàn)閺淖煮w的式樣來看,微軟雅黑是非襯線的,而宋體才是襯線的。然而中文并不像英文那樣嚴(yán)格區(qū)分字體族,所以這一點(diǎn)在實(shí)際應(yīng)用當(dāng)中并不那么重要。

別忘了照顧不同的操作系統(tǒng)

作為一個(gè) Web 開發(fā)者,你理應(yīng)對(duì) Windows, Mac OS, Linux 家族等常用操作系統(tǒng)里的系統(tǒng)字體有足夠的了解,特別是中文。在這里,我們假設(shè)目標(biāo)網(wǎng)站要同時(shí)給予 windows 用戶和 mac 用戶最好的字體體驗(yàn),于是我們可以這樣聲明:

font-family: Helvetica, Tahoma, Arial, STXihei, "華文細(xì)黑", "Microsoft YaHei", "微軟雅黑", sans-serif;

這句聲明都做到哪些事情呢?讓我們一一說明(括號(hào)內(nèi)代表其對(duì)應(yīng)的目標(biāo)操作系統(tǒng)):

對(duì)于英文字符,首先查找Helvetica(Mac),然后查找Tahoma(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,則使用當(dāng)前默認(rèn)的sans-serif字體(操作系統(tǒng)或?yàn)g覽器指定);對(duì)于中文字體,我們已經(jīng)了解其規(guī)則了。華文細(xì)黑(Mac),微軟雅黑(Win)是這兩個(gè)平臺(tái)的默認(rèn)中文字體。 注意向下兼容

到此為止,我們的字體聲明已經(jīng)很不錯(cuò)了——如果你不必考慮還在使用舊版本操作系統(tǒng)的用戶的話。遺憾地是,中文市場(chǎng)還有大量的用戶在使用 Windows XP,宋體才是他們的主要中文字體。為了照顧到這些用戶,你可以為微軟雅黑增加一個(gè) fallback:

font-family: Helvetica, Tahoma, Arial, STXihei, "華文細(xì)黑", Heiti, "黑體", "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", sans-serif;

同樣地,你看到我們也為 Mac 系統(tǒng)使用了黑體作為 fallback。

其他 不加雙引號(hào)可以嗎?

可以。有些英文字體的名稱多于兩個(gè)單詞,因?yàn)閱卧~中間有空格所以需要用?""?包裹起來。中文字體很特別,按照英文的角度來看,像微軟雅黑究竟算是一個(gè)詞還是四個(gè)詞呢?沒關(guān)系,好在中文字體的名稱里沒有空格,所以?""?不加也沒什么大礙。

不過,誰都不能保證在任何操作系統(tǒng)/瀏覽器環(huán)境下都是如此,若是發(fā)生了奇怪的事情,不妨加上雙引號(hào)試試看。

可以默認(rèn)顯示某種字體嗎?比如微軟雅黑

你可能注意到了,在我們最后的字體聲明里,華文細(xì)黑是默認(rèn)字體(如果你的系統(tǒng)上安裝了聲明里所有的中文字體的話),為什么我要先聲明 Mac 系統(tǒng)的字體呢?

按理來說,大多數(shù)網(wǎng)站的主要目標(biāo)市場(chǎng)還是 Windows 用戶的,所以理論上這個(gè)才是合理的聲明:

font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", STXihei, "華文細(xì)黑", Heiti, "黑體", sans-serif;

但實(shí)際上卻并非如此。在中文字體的用戶群體里,很大一部分擁有 Mac 的人都同時(shí)安裝了 Win 下常用的中文字體(這得歸功于 Office for Mac);但極少有 Win 用戶去安裝 Mac 下的中文字體。

因此,把 Mac 用字體聲明在前面幾乎不會(huì)對(duì) Win 用戶產(chǎn)生什么影響(因?yàn)樗麄儔焊鶝]有!),倒是用來做 fallback 的黑體可能會(huì)取代微軟雅黑的位置,所以更保險(xiǎn)的做法或許是這樣:

font-family: Helvetica, Tahoma, Arial, STXihei, "華文細(xì)黑", "Microsoft YaHei", "微軟雅黑", SimSun, "宋體", Heiti, "黑體", sans-serif;

但無論如何請(qǐng)不要把微軟雅黑放在中文字體的最前面,作為史上最丑陋的中文字體之一,微軟雅黑實(shí)在不是什么好的選擇,請(qǐng)照顧一下被 Mac 寵壞的用戶吧,謝謝?。▋H代表個(gè)人觀點(diǎn))

BTW,如果你也像我一樣不喜歡呆頭呆腦的微軟雅黑,那就干脆把它刪了吧~

到此為止,雖然在我們的示例代碼里沒有包含 Linux 家族的例子,不過相信你也明白該怎么做了吧。

一點(diǎn)補(bǔ)充

鑒于一些人對(duì)微軟雅黑的排位產(chǎn)生異議,我不妨把上文的解決方案再延伸一步。事實(shí)是這樣子的:

微軟雅黑放前面,會(huì)導(dǎo)致安裝了微軟雅黑字體的 Mac 用戶不得不面對(duì)微軟雅黑,而在 Mac 下比微軟雅黑優(yōu)雅得多的中文字體比比皆是;

把 Mac 下的字體放前面,也會(huì)對(duì) Windows 用戶造成差不多的困惑,畢竟微軟雅黑是 Windows 平臺(tái)下顯示效果最好的字體(目前為止);

1 和 2,哪一種出現(xiàn)的概率更大一些?我想這是一個(gè)不需要計(jì)算就能知道的答案吧?

但是——的確還有另外兩個(gè)因素在糾結(jié)著:

不少 Windows 用戶因?yàn)楦鞣N原因關(guān)閉了?ClearType,在此情形下微軟雅黑將會(huì)慘不忍睹!但是 Mac 的字體也不是好的選擇,真正的勝出者?猜對(duì)了,宋體。

絕大部分 Mac 下的黑體在 Windows 下模糊不清,而微軟雅黑雖然丑但在 Mac 下至少能看。(間接體現(xiàn)了兩個(gè)平臺(tái)的字體渲染技術(shù)的差距)

所以在實(shí)踐中,真正接近“萬無一失”的方案需要考慮以下幾點(diǎn):

利用 UA 判斷為不同的平臺(tái)加載不一樣的字體聲明;

除非有特別的原因,否則盡量保持正文用宋體,標(biāo)題和其他可以放大些的地方用微軟雅黑(針對(duì) Windows);

Mac 下的冬青體效果極佳,但是該字體在 Mac OS X 10.6 以前是沒有的,所以謹(jǐn)慎考慮你的用戶群體,或者使用華文黑體系列做 fallback;

最后,我不想再和任何人爭(zhēng)論字體的優(yōu)劣,本文的目的是介紹使用方法而不是字體選擇?!懊馈被颉俺蟆毕騺矶际呛苤饔^的事情,只因?yàn)槲沂亲髡?,所以我免不了?huì)有傾向性,然而我也相信你自己會(huì)有正確的判斷,和我較真沒有任何實(shí)際意義。

本站聲明: 本文章由作者或相關(guān)機(jī)構(gòu)授權(quán)發(fā)布,目的在于傳遞更多信息,并不代表本站贊同其觀點(diǎn),本站亦不保證或承諾內(nèi)容真實(shí)性等。需要轉(zhuǎn)載請(qǐng)聯(lián)系該專欄作者,如若文章內(nèi)容侵犯您的權(quán)益,請(qǐng)及時(shí)聯(lián)系本站刪除。
換一批
延伸閱讀

9月2日消息,不造車的華為或?qū)⒋呱龈蟮莫?dú)角獸公司,隨著阿維塔和賽力斯的入局,華為引望愈發(fā)顯得引人矚目。

關(guān)鍵字: 阿維塔 塞力斯 華為

倫敦2024年8月29日 /美通社/ -- 英國汽車技術(shù)公司SODA.Auto推出其旗艦產(chǎn)品SODA V,這是全球首款涵蓋汽車工程師從創(chuàng)意到認(rèn)證的所有需求的工具,可用于創(chuàng)建軟件定義汽車。 SODA V工具的開發(fā)耗時(shí)1.5...

關(guān)鍵字: 汽車 人工智能 智能驅(qū)動(dòng) BSP

北京2024年8月28日 /美通社/ -- 越來越多用戶希望企業(yè)業(yè)務(wù)能7×24不間斷運(yùn)行,同時(shí)企業(yè)卻面臨越來越多業(yè)務(wù)中斷的風(fēng)險(xiǎn),如企業(yè)系統(tǒng)復(fù)雜性的增加,頻繁的功能更新和發(fā)布等。如何確保業(yè)務(wù)連續(xù)性,提升韌性,成...

關(guān)鍵字: 亞馬遜 解密 控制平面 BSP

8月30日消息,據(jù)媒體報(bào)道,騰訊和網(wǎng)易近期正在縮減他們對(duì)日本游戲市場(chǎng)的投資。

關(guān)鍵字: 騰訊 編碼器 CPU

8月28日消息,今天上午,2024中國國際大數(shù)據(jù)產(chǎn)業(yè)博覽會(huì)開幕式在貴陽舉行,華為董事、質(zhì)量流程IT總裁陶景文發(fā)表了演講。

關(guān)鍵字: 華為 12nm EDA 半導(dǎo)體

8月28日消息,在2024中國國際大數(shù)據(jù)產(chǎn)業(yè)博覽會(huì)上,華為常務(wù)董事、華為云CEO張平安發(fā)表演講稱,數(shù)字世界的話語權(quán)最終是由生態(tài)的繁榮決定的。

關(guān)鍵字: 華為 12nm 手機(jī) 衛(wèi)星通信

要點(diǎn): 有效應(yīng)對(duì)環(huán)境變化,經(jīng)營業(yè)績穩(wěn)中有升 落實(shí)提質(zhì)增效舉措,毛利潤率延續(xù)升勢(shì) 戰(zhàn)略布局成效顯著,戰(zhàn)新業(yè)務(wù)引領(lǐng)增長 以科技創(chuàng)新為引領(lǐng),提升企業(yè)核心競(jìng)爭(zhēng)力 堅(jiān)持高質(zhì)量發(fā)展策略,塑強(qiáng)核心競(jìng)爭(zhēng)優(yōu)勢(shì)...

關(guān)鍵字: 通信 BSP 電信運(yùn)營商 數(shù)字經(jīng)濟(jì)

北京2024年8月27日 /美通社/ -- 8月21日,由中央廣播電視總臺(tái)與中國電影電視技術(shù)學(xué)會(huì)聯(lián)合牽頭組建的NVI技術(shù)創(chuàng)新聯(lián)盟在BIRTV2024超高清全產(chǎn)業(yè)鏈發(fā)展研討會(huì)上宣布正式成立。 活動(dòng)現(xiàn)場(chǎng) NVI技術(shù)創(chuàng)新聯(lián)...

關(guān)鍵字: VI 傳輸協(xié)議 音頻 BSP

北京2024年8月27日 /美通社/ -- 在8月23日舉辦的2024年長三角生態(tài)綠色一體化發(fā)展示范區(qū)聯(lián)合招商會(huì)上,軟通動(dòng)力信息技術(shù)(集團(tuán))股份有限公司(以下簡(jiǎn)稱"軟通動(dòng)力")與長三角投資(上海)有限...

關(guān)鍵字: BSP 信息技術(shù)
關(guān)閉
關(guān)閉