網站建設
                                                       
                                                          收藏本站 
                                                      用戶ID/郵箱: 密 碼:
                                                      客戶中心 Customer service 您目前的位置:首 頁 > 客戶中心 > DIV+CSS 



                                                      DIV+CSS,網站建設DIV+CSS:如何在div里選擇字體(font-family)

                                                      如何在div里選擇字體(font-family)

                                                      大家都知道,在不同操作系統、不同游覽器里面默認顯示的字體是不一樣的,
                                                      并且相同字體在不同操作系統里面渲染的效果也不盡相同,那么如何設置字體
                                                      顯示效果會比較好呢?下面我們逐步的分析一下:

                                                      一、首先我們看看各平臺的默認字體情況

                                                      1、Window下:
                                                      • 宋體(SimSun):Win下大部分游覽器的默認字體,
                                                        宋體在小字號下(如12px、14px)的顯示效果還可以接受,
                                                        但是字號一大就非常糟糕了,所以使用的時候要注意。

                                                      • 微軟雅黑("Microsoft Yahei"):從 Vista 開始,微軟提供了這款新的字體,
                                                        一款無襯線的黑體類字體,并且擁有 RegularBold 
                                                        兩種粗細的字重,顯著提高了字體的顯示效果。現在這款字體已經成為Windows
                                                        游覽器中最值得使用的中文字體。從Win8開始,微軟雅黑又加入了 Light 
                                                        這款更細的字重,對于喜歡細字體的設計、開發人員又多了一個新的選擇。

                                                      • Arial:Win平臺上默認的無襯線西文字體(為什么要說英文字體后面會解釋),
                                                        有多種變體,顯示效果一般。

                                                      • Tahoma:十分常見的無襯線字體,被采用為Windows 2000、
                                                        Windows XP、Windows Server 2003及Sega游戲主機Dreamcast等系統的
                                                        預設字型,顯示效果比Arial要好。

                                                      • Verdana:無襯線字體,優點在于它在小字上仍結構清晰端整、閱讀辨識容易。

                                                      • 其他:Windows 下默認字體列表:微軟官網、維基百科、Office字體

                                                      • 結論:微軟雅黑為Win平臺上最值得選擇的中文字體,但非游覽器默認,需要設置;
                                                        西文字體的選擇以Arial、Tahoma等無襯線字體為主。

                                                      2、Mac OS下:
                                                      • 華文黑體(STHeiti)、華文細黑(STXihei):屬于同一字體家族系列,
                                                        OS X 10.6 之前的簡體中文系統界面默認字體,也是目前Chrome游覽器下的默認字體,
                                                        有 Regular 和 Bold兩個字重,顯示效果可以接受,華文細黑也曾是我最喜歡的字體之一。

                                                      • 黑體-簡(Heiti SC):從 10.6 開始,黑體-簡代替華文黑體用作簡體中文系統界面默認字體,
                                                        蘋果生態最常用的字體之一,包括iPhone、iPad等設備用的也是這款字體,顯示效果不錯,
                                                        但是喇叭口設計遭人詬病。

                                                      • 冬青黑體( Hiragino Sans GB ):聽說又叫蘋果麗黑,日文字體Hiragino KakuGothic的
                                                        簡體中文版,簡體中文有 常規體 和 粗體 兩種,冬青黑體是一款清新的專業印刷字體,
                                                        小字號時足夠清晰,擁有很多人的追捧。

                                                      • Times New Roman:Mac平臺Safari下默認的字體,是最常見且廣為人知的
                                                        西文襯線字體之一,眾多網頁瀏覽器和文字處理軟件都是用它作為默認字體。

                                                      • Helvetica、Helvetica Neue:一種被廣泛使用的傳奇般的西文字體
                                                        ,在微軟使用山寨貨的Arial時,喬布斯卻花費重金獲得了Helvetica
                                                        蘋果系統上的使用權,因此該字體也一直伴隨著蘋果用戶,
                                                        是蘋果生態中最常用的西文字體。Helvetica Neue為Helvetica的改善版本,
                                                        且增加了更多不同粗細與寬度的字形,共擁有51種字體版本,
                                                        極大的滿足了日常的使用。

                                                      • 蘋方(PingFang SC):在Mac OS X EL Capitan上,蘋果為中國用戶打造了
                                                        一款全新中文字體--蘋方,去掉了為人詬病的喇叭口,整體造型看上去更加簡潔,
                                                        字族共六枚字體:極細體、纖細體、細體、常規體、中黑體、中粗體

                                                      • San Francisco:同樣是Mac OS X EL Capitan上最新發布的西文字體,
                                                        感覺和Helvetica看上去差別不大,目前已經應用在
                                                        Mac OS 10.11+、iOS 9.0+、watch OS等最新系統上。

                                                      • 其他:Mac下默認字體列表:蘋果官網、維基百科

                                                      • 結論:目前蘋方和San Francisco為蘋果推出的最新字體,顯示效果也最為優雅,
                                                        但只有最新系統才能支持,而黑體-簡和Helvetica可以獲得更多系統版本支持,
                                                        顯示效果也相差無幾,可以接受。

                                                      3、Android系統:
                                                      • Droid Sans、Droid Sans Fallback:Droid Sans為安卓系統中默認的西文字體,
                                                        是一款人文主義無襯線字體,而Droid Sans Fallback則是包含漢字、日文假名、
                                                        韓文的文字擴展支持。

                                                      • 結論:Droid Sans為默認的字體,并結合了中英文,無需單獨設置。

                                                      4、iOS系統:
                                                      • iOS系統的字體和Mac OS系統的字體相同,保證了Mac上的字體效果,
                                                        iOS設備就沒有太大問題。

                                                      5、Linux:
                                                      • 文泉驛點陣宋體:類似宋體的襯線字體,一般不推薦使用。

                                                      • 文泉驛微米黑:幾乎是 Linux 社區現有的最佳簡體中文字體。

                                                      二、選擇字體需要注意的問題

                                                      1、字體的中英文寫法:

                                                      我們在操作系統中常常看到宋體、微軟雅黑這樣的字體名稱,但實際上
                                                      這只是字體的顯示名稱,而不是字體文件的名稱,一般字體文件都是用英文命名的,
                                                      如SimSun、Microsoft Yahei。在大多數情況下直接
                                                      使用顯示名稱也能正確的顯示,但是有一些用戶的特殊設置會導致中文聲明無效。
                                                      因此,保守的做法是使用字體的字體名稱(英文)或者兩者兼寫。如下示例:

                                                      font-family: STXihei, "Microsoft YaHei"; 
                                                      font-family: STXihei, "華文細黑", "Microsoft YaHei", "微軟雅黑";
                                                      2、聲明英文字體:

                                                      絕大部分中文字體里都包含英文字母和數字,不進行英文字體聲明是沒有問題的,
                                                      但是大多數中文字體中的英文和數字的部分都不是特別漂亮,所以建議也對
                                                      英文字體進行聲明。 由于英文字體中大多不包含中文,
                                                      我們可以先進行英文字體的聲明,這樣不會影響到中文字體的選擇,
                                                      因此優先使用最優秀的英文字體,中文字體聲明則緊隨其次。
                                                      如下示例:

                                                      font-family: Arial, "Microsoft YaHei";
                                                      3、照顧不同的操作系統:
                                                      • 英文、數字部分:在默認的操作系統中,Mac和Win都會帶有Arial, 
                                                        Verdana, Tahoma等幾個預裝字體,從顯示效果來看,Tahoma要
                                                        比Arial更加清晰一些,因此字體設置Tahoma最好放到前面,
                                                        當找不到Tahoma時再使用Arial;而在Mac中,還擁有一款更加漂亮的Helvetica字體,
                                                        所以為了照顧Mac用戶有更好的體驗,應該更優先設置Helvetica字體;
                                                        Android系統下默認的無襯線字體就可以接受,因此無需單獨設置。
                                                        最后,英文、數字字體的最佳寫法如下:

                                                      font-family: Helvetica, Tahoma, Arial;
                                                      • 中文部分:在Win下,微軟雅黑為大部分人最常使用的中文字體,
                                                        由于很多人安裝Office的緣故,Mac電腦中也會出現微軟雅黑字體,
                                                        因此把顯示效果不錯的微軟雅黑加入到字體列表是個不錯的選擇;
                                                        同樣,為了保證Mac中更為優雅字體蘋方(PingFang SC)、黑體-簡(Heiti SC)、
                                                        冬青黑體( Hiragino Sans GB )的優先顯示,
                                                        需要把這些字體放到中文字體列表的最前面;同時為了照顧到Linux操作系統的體驗,
                                                        還需要添加文泉驛微米黑字體。最后,中文字體部分最佳寫法如下:

                                                      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;

                                                      三、我們看一下大公司的常見寫法(2016.07查看)

                                                      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;

                                                      其實從圖中明顯看出淘寶網的導航及內容有著大量的襯線字體,
                                                      鑒于淘寶網站大部分字號比較小,顯示效果也還可以接受。代碼中可以看出淘寶使用了
                                                      Tahoma、Arial作為首選英文字體,中文字體首選了冬青黑體,
                                                      由于Win下沒有預裝該款字體,所以顯示出了后面的宋體(5b8b4f53為漢字宋體用
                                                      unicode 表示的寫法,不用SimSun是因為 Firefox 的某些版本和 Opera
                                                      不支持 SimSun的寫法)

                                                      3、簡書
                                                      font-family: "lucida grande", "lucida sans unicode", 
                                                      lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei",
                                                      "WenQuanYi Micro Hei", sans-serif;

                                                      自認為簡書的閱讀體驗很棒,我們看看簡書所用的字體,
                                                      簡書優先選擇了lucida家族的系列字體作為英文字體,
                                                      該系列字體在Mac和Win上都是預裝的,并且有著不俗的表現;
                                                      中文字體方面將冬青黑體作為最優先使用的字體,同樣考慮了Linux系統。

                                                      各大公司的字體設置大同小異,這里不再一一舉例查看,
                                                      有興趣的可以自己多多查看。

                                                      四、其他的一些注意點

                                                      1、字體何時需要添加引號

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

                                                      font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;

                                                      如果書寫中文字體名稱為了保證兼容性也會添加引號,如:

                                                      font-family: "黑體-簡", "微軟雅黑", "文泉驛微米黑";
                                                      2、引用外部字體

                                                      大多數的中文字體由于版權原因不能隨意使用,這里推薦一個免版權
                                                      而且漂亮的中文字體思源黑體,該字體為Adobe與Google推出的一款開源字體,
                                                      有七種字體粗細(ExtraLight、Light、Normal、Regular、
                                                      Medium、Bold 和 Heavy)
                                                      ,完全支持日文、韓文、繁體中文和簡體中文,
                                                      字形優美,依稀記得小米公司好像有使用過。
                                                      鑒于中文字體的體積比較大(一般字庫全一點的中文字體動輒幾Mb),
                                                      所以較少人會使用外部字體,如果真的需要引入,也可以考慮通過工具根據頁面文字的使
                                                      用多少單獨生成中文字體,以減小文件大小。

                                                      五、最后,推薦寫法

                                                      由于每個人的審美不一樣,鐘愛的字體也會有所有不同,這里給出我個人的常用寫法:

                                                      font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", 
                                                      "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei",
                                                      "WenQuanYi Micro Hei", sans-serif;

                                                       


                                                      上一條: bootstrap中模態框、模態框的屬性
                                                      下一條: 網站進入沙盒期的處理方法
                                                      相關文章
                                                      css常用屬性總結之 id和class的區別,使用類還是ID?
                                                      關于左邊固定,右邊自適應布局的響應式布局寫法
                                                      html實現 頁面禁止右鍵 禁止復制 禁止圖片拖動 禁止復制和剪切
                                                      推廣經驗分享
                                                      其它
                                                      網站建設資源
                                                      常見問題
                                                      網站知識
                                                      首頁關于我們業務范圍新聞資訊成功案例客服中心聯系我們深圳網站建設網站優化付款帳戶
                                                      COPYRIGHT(C) 2005-2019 亞網互聯·中國 版權所有 ALL RIGHTS RESERVED (粵ICP備15005241號)
                                                      深圳網站建設公司地址:深圳市寶安區龍華民治大道東明大廈15樓 1529-1531 室   E-Mail:[email protected]  
                                                      公司電話:0755-89812581(8線)  
                                                      深圳市亞網科技有限公司 深圳網站建設常年法律顧問:朱運德律師
                                                      四川金7乐18061809期

                                                                                                                                                              特马APP 秒速赛走势技巧 9彩计划 最近有什么足球比赛 开奖直播23144 赛车6码公式 pk10人工和值计划 安徽福彩3d走势图 秒速飞艇有人控制吗 云南时时结果表 昨晚15选5开奖号码 天津时时视频直播 快乐是快乐十分开奖结果查询 时时彩是不是有人控制 捕鱼游捕鱼达人单机版 赛车pk10开奖