中文字型網頁開發

2021-06-28 22:36:28 字數 1995 閱讀 2290

字型的選擇,是網頁開發的關鍵因素之一。

合適的字型,對網頁的美觀度(或可讀性)有著舉足輕重的影響。

下面是目前中文字型的最佳實踐,主要參考了kendra schaefer的文章。

作業系統決定了開發者可以使用的字型。所以,第一步,我們必須了解作業系統到底提供哪些字型。

windows作業系統

os x作業系統

如果使用者裝了microsoft office,還會多出一些字型。

css的font-family命令,指定了網頁元素所使用的字型。下面是乙個例子。

font-family: georgia, "times new roman", 

"microsoft yahei", "微軟雅黑",

stxihei, "華文細黑",

serif;

它的規則有三條。

(1)優先使用排在前面的字型。

(2)如果找不到該種字型,或者該種字型不包括所要渲染的文字,則使用下一種字型。

(3)如果所列出的字型,都無法滿足需要,則讓作業系統自行決定使用哪種字型。

根據這些規則,font-family應該優先指定英文本型,然後再指定中文字型。否則,中文字型所包含的英文本母,會取代英文本型,這往往很醜陋。

上面中,紅框內的英文本母,左邊採用英文本型渲染,右邊採用中文字型渲染,哪一種效果比較好,一目了然。

為了保證相容性,中文字型的中文名稱和英文名稱,應該都寫入font-family。比如,」微軟雅黑」的英文名稱是microsoft yahei。

此外,中文字型的中文名稱,以及由多個單詞組成的英文名稱,應該放在雙引號內。

由於windows和mac的中文字型沒有交叉,所以應該同時為兩個平台指定字型。

常見的做法是,windows平台指定」微軟雅黑」(microsoft yahei),mac平台指定」華文細黑」(stxihei)。

所謂」襯線體」(serif),指的是筆畫的末端帶有襯線的字型。

就像英文本型一樣,中文字型也可以分成」襯線體」和」無襯線體」(san-serif)。比如,對於繁體字來說,微軟正黑(microsoft jhenghei)是無襯線體,新細明體(pmingliu)是襯線體。

對於簡體字來說,微軟雅黑(microsoft yahei)是無襯線體,宋體(simsun)是襯線體。

一般來說,襯線體裝飾性強,往往用於標題;無襯線體清晰度好,往往用於正文。

(1)宋體(simsun)

宋體是最常見的中文字型,如果沒有指定字型,作業系統往往選擇它來渲染。很多人認為,這種字型並不美觀。

(2)微軟雅黑(microsoft yahei)

微軟雅黑的美觀度和清晰度都較好,可以作為網頁的首選字型。它在mac平台的對應字型是華文細黑(stxihei)。

但是,windows xp沒有預裝這種字型,這時可以選擇黑體(simhei)替代。不過,黑體比較粗,不應用於字型大小較小的文字。

(3)仿宋(fangsong)

這種字型是襯線體,比宋體的裝飾性更強。如果字型大小太小,會影響清晰度,所以只有在字型大小大於14px的情況下,才可以考慮這種字型。

它在mac平台的對應字型是」華文仿宋」(stfangsong)。

(4)楷體(kaiti)

楷體也是襯線體,裝飾性與仿宋體接近,但是寬度更大,筆畫更清楚一些。這種字型也不應該在小於14px的情況下使用。

它在mac平台的對應字型是」華文楷體」(stkaiti)。

(完)

CSS教程 網頁英文本型和中文字型應用

在西方國家的字母體系,分成兩大字族 serif 及 sans serif。其中 typewriter 打字機字型,雖然也是 sans serif,但由於他是等距字,所以另獨立出乙個 typewriter 字族出來。serif 的意思是,在字的筆畫開始及結束的地方有額外的裝飾,程式設計客棧而且筆畫的粗...

linux中文字型

背景說明 報表,在windows下,展現 匯出都正常,在linux下,字型變大了。比如,單元格的大小設計好後,裡面的字當好能一行顯示完,將報表放到linux下後,字變大了,一行顯示不完了,變成了兩行,這樣會影響我們報表的美觀。出現這樣的問題,是什麼原因呢?我們又怎麼解決呢?看下面的原因和方法。應用舉...

python matplotlib 中文字型設定

matplotlib是畫圖利器,可惜中文支援不夠好,不設中文字型畫出的裡面的中文全是小框框,筆者也是google了許多次,嘗試了好幾種方法,終於弄對了。思路就是找乙個ttf檔案,可以直接用windows系統裡面ttf檔案,然後建立自己的font,將文字使用的font設定為自己建立的font就可以了。...