如何更好的選擇字型 font family

2022-09-12 09:45:20 字數 4037 閱讀 3966

大家都知道,在不同作業系統、不同遊覽器裡面預設顯示的字型是不一樣的,並且相同字型在不同作業系統裡面渲染的效果也不盡相同,那麼如何設定字型顯示效果會比較好呢?下面我們逐步的分析一下:

1、window下:

2、mac os下:

3、android系統:

4、ios系統:

5、linux:

文泉驛微公尺黑:幾乎是 linux 社群現有的最佳簡體中文本型。

1、字型的中英文寫法:

我們在作業系統中常常看到宋體微軟雅黑這樣的字型名稱,但實際上這只是字型的顯示名稱,而不是字型檔案的名稱,一般字型檔案都是用英文命名的,如simsunmicrosoft yahei。在大多數情況下直接使用顯示名稱也能正確的顯示,但是有一些使用者的特殊設定會導致中文宣告無效。

因此,保守的做法是使用字型的字型名稱(英文)或者兩者兼寫。如下示例:

font-family: stxihei, "microsoft yahei";

font-family: stxihei, "華文細黑", "microsoft yahei", "微軟雅黑";

2、宣告英文本型:

絕大部分中文字型裡都包含英文本母和數字,不進行英文本型宣告是沒有問題的,但是大多數中文字型中的英文和數字的部分都不是特別漂亮,所以建議也對英文本型進行宣告。

由於英文本型中大多不包含中文,我們可以先進行英文本型的宣告,這樣不會影響到中文字型的選擇,因此優先使用最優秀的英文本型,中文字型宣告則緊隨其次。如下示例:

font-family: arial, "microsoft yahei";

3、照顧不同的作業系統:
font-family: helvetica, tahoma, arial;

font-family: "pingfang sc", "hiragino sans gb", "heiti sc", "microsoft yahei", "wenquanyi micro hei";

中英文整合寫法:

font-family: helvetica, tahoma, arial, "heiti sc", "microsoft yahei", "wenquanyi micro hei";

font-family: helvetica, tahoma, arial, "pingfang sc", "hiragino sans gb", "heiti sc", "microsoft yahei", "wenquanyi micro hei";

4、注意向下相容

如果還需要考慮舊版本作業系統使用者的話,不得不加上一些舊版作業系統存在的字型:mac中的華文黑體冬青黑體,win中的黑體等。同樣按照顯示效果排列在列表後面,寫法如下:

font-family: helvetica, tahoma, arial, "pingfang sc", "hiragino sans gb", "heiti sc", stxihei, "microsoft yahei", simhei, "wenquanyi micro hei";

加入了stxihei(華文細黑)simhei(黑體)

5、補充字型族名稱

字型族大體上分為兩類:sans-serif(無襯線體)serif(襯線體),當所有的字型都找不到時,我們可以使用字型族名稱作為作業系統最後選擇字型的方向。一般非襯線字型在顯示器中的顯示效果會比較好,因此我們需要在最後新增sans-serif,寫法如下:

font-family: helvetica, tahoma, arial, "pingfang sc", "hiragino sans gb", "heiti sc", "microsoft yahei", "wenquanyi micro hei", sans-serif;

1、小公尺
font: 14px/1.5 "helvetica neue",helvetica,arial,"microsoft yahei","hiragino sans gb","heiti sc","wenquanyi micro hei",sans-serif;

小公尺公司優先使用helvetica neue這款字型以保證最新版本mac使用者的最佳體驗,選擇了arial作為win下預設英文本型及mac的替代英文本型;中文字型方面首選了微軟雅黑,然後選擇了冬青黑體黑體-簡作為mac上的替代方案;最後使用文泉驛微公尺黑兼顧了linux系統。

2、**

font: 12px/1.5 tahoma,arial,'hiragino sans gb','\5b8b\4f53',sans-serif;

其實從圖中明顯看出**網的導航及內容有著大量的襯線字型,鑑於****大部分字型大小比較小,顯示效果也還可以接受。**中可以看出**使用了tahomaarial作為首選英文本型,中文字型首選了冬青黑體,由於win下沒有預裝該款字型,所以顯示出了後面的宋體(5b8b4f53為漢字宋體用 unicode 表示的寫法,不用simsun是因為 firefox 的某些版本和 opera 不支援simsun的寫法)

font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "hiragino sans gb", "microsoft yahei", "wenquanyi micro hei", sans-serif;

各大公司的字型設定大同小異,這裡不再一一舉例檢視,有興趣的可以自己多多檢視。

1、字型何時需要新增引號

當字型具體某個取值中若有一種樣式名稱包含空格,則需要用雙引號或單引號表示,如:

font-family: "microsoft yahei", "arial narrow", sans-serif;

如果書寫中文字型名稱為了保證相容性也會新增引號,如:

font-family: "黑體-簡", "微軟雅黑", "文泉驛微公尺黑";

2、引用外部字型

大多數的中文字型由於版權原因不能隨意使用,這裡推薦乙個免版權而且漂亮的中文字型思源黑體,該字型為adobe與google推出的一款開源字型, 有七種字型粗細(extralight、light、normal、regular、medium、bold 和 he**y),完全支援日文、韓文、正體中文和簡體中文,字形優美,依稀記得小公尺公司好像有使用過。

鑑於中文字型的體積比較大(一般字型檔全一點的中文字型動輒幾mb),所以較少人會使用外部字型,如果真的需要引入,也可以考慮通過工具根據頁面文字的使用多少單獨生成中文字型,以減小檔案大小。

由於每個人的審美不一樣,鍾愛的字型也會有所有不同,這裡給出個人的常用寫法:

font-family: "helvetica neue", helvetica, arial, "pingfang sc", "hiragino sans gb", "heiti sc", "microsoft yahei", "wenquanyi micro hei", sans-serif;

字型選擇 書法 學習書法如何選擇字型

篆書體 包含大篆 小篆 燕書 包括燕行 隸書體 包含古隸 今隸 楷書體 包含魏碑 正楷 行書體 包含行楷 行草 草書體 包含章草 小草 大草 標準草書 這是已定義的書法的書體名謂。我個人認為行書和草書應歸為一類。甲骨文的書寫應作為單獨的一類。這樣劃分,以助學習。篆書 隸書 楷書 行書 甲骨文 正對應...

如何做出更好的跳槽選擇

前言 著眼回看上篇文章推送,已經過去很長時間。此前曾自我要求,每月至少有篇文章產出。如今拖延多日,內心惶惶不安。自憂三天打魚兩天曬網,做事有始無終。先簡單解釋為何拖更,一是筆者前段時間打算換份工作,期間多在準備面試。二是希望博文能有深入理解,不至於嚼之無味。缺乏充足時間以及平穩心態導致幾篇文章起了開...

如何優雅的選擇字型 font family

西文字型分為兩大族 襯線體 serif 和無襯線體 sans serif 像times times new roman等都是屬於襯線體,而arial helvetica則是屬於無襯線體。襯線字型,意思是在字的筆畫開始 結束的地方有額外的裝飾,而且筆畫的粗細會有所不同。無襯線體是無襯線字型,沒有這些額...