關於font-family


先來看幾個大的電商網站字體設置:

淘寶網

  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;

京東

  font: 12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b\4f53,sans-serif;

新浪微博

  font: 12px/1.3 'Arial','Microsoft YaHei';

知乎

  font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif;

小米官網

  font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

注: Hiragino Sans GB一種簡繁結合的字體樣式

這里沒有列出查看的所有平台,通過總結,有以下幾個共同點:

1.大部分font-family設置都以"sans-serif"、"serif"結束;

淘寶京東等網站都以"sans-serif"結束字體設置,根據w3c中描述

有兩種類型的字體系列名稱:

  • 指定的系列名稱:具體字體的名稱,比如:"times"、"courier"、"arial"。
  • 通常字體系列名稱:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

提示:使用逗號分割每個值,並始終提供一個類族名稱作為最后的選擇。

 sans-serif(無襯線字體)和serif(襯線字體)

2.常用英文字體有:arial,tohama,常用中文字體有:宋體、微軟雅黑、Hiragino Sans GB

注:淘寶網和京東使用unicode編碼"\\5b8b\4f53"(宋體)是在一些情況下直接寫中文字體名稱會編譯不出來,所以直接使用unicode編寫格式。

arial&tohama&verdana字體比較

字體大小為12px時:

Arial   字體的樣式 ZITIdeyangshi      123456789

Tahoma 字體的樣式 ZITIdeyangshi      123456789

Verdana 字體的樣式 ZITIdeyangshi  123456789

字體大小為18px時:

Arial   字體的樣式 ZITIdeyangshi       123456789

Tahoma  字體的樣式 ZITIdeyangshi      123456789

Verdana 字體的樣式 ZITIdeyangshi  123456789

通過以上對比,看出兩個特點:

● Arial和Tahoma的大寫i,Tahoma更容易識別

● Verdana的字間距比其他兩個稍微大一些

3.關於字體的一些總結

①font-family默認采用Tahoma. Tahoma是英文Windows操作系統的默認字體,這個字體比較均衡,顯示中英文混排很不錯,是經久耐看的一款字體。

②Mac OS X系統有一款比Tahoma更典雅的系統默認字體:Helvetica,非Mac系統的Helvetica字體都是Rip版。

③Arial是早期Windows英文系統的默認字體,XP和Vista上都是Tahoma。

④最后的sans-serif是針對強悍的Linux DIY族。Linux默認只有kernel,字體完全由用戶自定義,針對這部分用戶,sans-serif可能能派上用場。

⑤最后,無論在XP還是Vista下,不指定網頁的中文字體時,默認就是宋體。

注:css字體樣式級別 > 瀏覽器字體樣式級別

注:如果不設置默認中文字體,那么用戶手動修改流量器的默認字體設置時就會改變頁面的字體樣式,有利有弊,視具體情況自行選擇。

 ====================================================================

關於手機系統字體

最近在做一個手機端項目,設計圖使用的默認字體是“微軟雅黑”,在設計圖中有幾個文字使用的是“宋體”,完成代碼編寫之后發現,ios上面的“宋體”文字顯示還可以,可以看出是襯線字體,但是android手機里設置“宋體”樣式的文字明顯使用的是無襯線字體,於是乎就瘋狂百度,查詢出android\ios\winphone系統使用的默認字體:

系統 默認英文字體 默認中文字體 默認數字字體
android Droid Sans Droid Sans Fallback Droid Sans
ios Helvetica Heiti SC HelveticaNeue
winphone Segoe Dengxian(方正等線體) Segoe

 

 

 

通過測試發現:使用系統默認的字體所達到的視覺效果跟使用微軟雅黑字體沒有明顯的差別

總結:

  • 各個手機系統有自己的默認字體,且都不支持微軟雅黑
  • 如無特殊需求,手機端可不設置中文字體,使用系統默認
  • 英文字體和數字字體可使用 Helvetica ,三種系統都支持

 

寫在文章末尾的話:

  文章中一部分內容來自網絡,如有侵權,請告知,必改之。

  文章內容主要用於自身學習記錄,復習查閱;如果有不正確的地方,歡迎指正。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM