大家都知道,在不同作業系統、不同遊覽器裡面預設顯示的字型是不一樣的,並且相同字型在不同作業系統裡面渲染的效果也不盡相同,那麼如何設定字型顯示效果會比較好呢?下面我們逐步的分析一下:
1、window下:
2、mac os下:
3、android系統:
4、ios系統:
5、linux:
文泉驛微公尺黑:幾乎是 linux 社群現有的最佳簡體中文本型。
1、字型的中英文寫法:
我們在作業系統中常常看到宋體
、微軟雅黑
這樣的字型名稱,但實際上這只是字型的顯示名稱,而不是字型檔案的名稱,一般字型檔案都是用英文命名的,如simsun
、microsoft yahei
。在大多數情況下直接使用顯示名稱也能正確的顯示,但是有一些使用者的特殊設定會導致中文宣告無效。
因此,保守的做法是使用字型的字型名稱(英文)或者兩者兼寫。如下示例:
2、宣告英文本型:font-family: stxihei, "microsoft yahei";
font-family: stxihei, "華文細黑", "microsoft yahei", "微軟雅黑";
絕大部分中文字型裡都包含英文本母和數字,不進行英文本型宣告是沒有問題的,但是大多數中文字型中的英文和數字的部分都不是特別漂亮,所以建議也對英文本型進行宣告。
由於英文本型中大多不包含中文,我們可以先進行英文本型的宣告,這樣不會影響到中文字型的選擇,因此優先使用最優秀的英文本型,中文字型宣告則緊隨其次。如下示例:
3、照顧不同的作業系統:font-family: arial, "microsoft yahei";
font-family: helvetica, tahoma, arial;
中英文整合寫法:font-family: "pingfang sc", "hiragino sans gb", "heiti sc", "microsoft yahei", "wenquanyi micro hei";
4、注意向下相容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";
如果還需要考慮舊版本作業系統使用者的話,不得不加上一些舊版作業系統存在的字型: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
,寫法如下:。
1、小公尺font-family: helvetica, tahoma, arial, "pingfang sc", "hiragino sans gb", "heiti sc", "microsoft yahei", "wenquanyi micro hei", sans-serif;
小公尺公司優先使用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;
tahoma
、arial
作為首選英文本型,中文字型首選了冬青黑體
,由於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;
2、引用外部字型font-family: "黑體-簡", "微軟雅黑", "文泉驛微公尺黑";
大多數的中文字型由於版權原因不能隨意使用,這裡推薦乙個免版權而且漂亮的中文字型思源黑體
,該字型為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則是屬於無襯線體。襯線字型,意思是在字的筆畫開始 結束的地方有額外的裝飾,而且筆畫的粗細會有所不同。無襯線體是無襯線字型,沒有這些額...