浅谈网页中的字体的设置
首先，我們應該明確，并不是你設置了這種字體，用戶電腦便會以這種字體顯示。如果用戶電腦沒有安裝這種字體，那么它便會以你設置的第二種字體來渲染。
而且由于設計稿和平臺的不同,導致了制作有時候無法還原設計稿，理清各種平臺字體區別，有助于做出最好的選擇。
在不同操作系統、不同游覽器里面默認顯示的字體是不一樣的，并且相同字體在不同操作系統里面渲染的效果也不盡相同，那么如何設置字體顯示效果會比較好呢?
一、選擇字體需要注意的問題
1、字體的中英文寫法：
我們在操作系統中常常看到宋體、微軟雅黑這樣的字體名稱，但實際上這只是字體的顯示名稱，而不是字體文件的名稱，一般字體文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多數情況下直接使用顯示名稱也能正確的顯示，但是有一些用戶的特殊設置會導致中文聲明無效。
因此，保守的做法是使用字體的字體名稱（英文）或者兩者兼寫。如下示例：
2、聲明英文字體：
絕大部分中文字體里都包含英文字母和數字，不進行英文字體聲明是沒有問題的，但是大多數中文字體中的英文和數字的部分都不是特別漂亮，所以建議也對英文字體進行聲明。
由于英文字體中大多不包含中文，我們可以先進行英文字體的聲明，這樣不會影響到中文字體的選擇，因此優先使用最優秀的英文字體，中文字體聲明則緊隨其次。如下示例：
3、照顧不同的操作系統：
英文、數字部分：
在默認的操作系統中，Mac和Win都會帶有Arial, Verdana, Tahoma等幾個預裝字體，從顯示效果來看，Tahoma要比Arial更加清晰一些，因此字體設置Tahoma最好放到前面，當找不到Tahoma時再使用Arial；而在Mac中，還擁有一款更加漂亮的Helvetica字體，所以為了照顧Mac用戶有更好的體驗，應該更優先設置Helvetica字體；Android系統下默認的無襯線字體就可以接受，因此無需單獨設置。最后，英文、數字字體的最佳寫法如下：
中文部分：
在Win下，微軟雅黑為大部分人最常使用的中文字體，由于很多人安裝Office的緣故，Mac電腦中也會出現微軟雅黑字體，因此把顯示效果不錯的微軟雅黑加入到字體列表是個不錯的選擇；同樣，為了保證Mac中更為優雅字體蘋方（PingFang SC）、黑體-簡（Heiti SC）、冬青黑體（ Hiragino Sans GB ）的優先顯示，需要把這些字體放到中文字體列表的最前面；同時為了照顧到Linux操作系統的體驗，還需要添加文泉驛微米黑字體。最后，中文字體部分最佳寫法如下
中英文整合寫法：
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中的黑體等。同樣按照顯示效果排列在列表后面，寫法如下：
5、補充字體族名稱
字體族大體上分為兩類：sans-serif（無襯線體）和serif（襯線體），當所有的字體都找不到時，我們可以使用字體族名稱作為操作系統最后選擇字體的方向。一般非襯線字體在顯示器中的顯示效果會比較好，因此我們需要在最后添加 sans-serif，寫法如下：
二、我們看一下大公司的常見寫法
1、小米
font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","HeitiSC","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", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;自認為簡書的閱讀體驗很棒，我們看看簡書所用的字體，簡書優先選擇了lucida家族的系列字體作為英文字體，該系列字體在Mac和Win上都是預裝的，并且有著不俗的表現；中文字體方面將冬青黑體作為最優先使用的字體，同樣考慮了Linux系統。
三、附:css常用font-family
實例:
例1（小米米官網）：
例2（淘寶技術研發中心）：
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;例3（加網 ）：
font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;例4（淘寶UED）：
font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;例5（一淘UX）:
font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微軟雅黑', Arial, sans-serif;例6（簡書）：
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;HTML，CSS，font-family：中文字體的英文名稱:
1.通用:
- 宋體 SimSun
- 黑體 SimHei
- 微軟雅黑 Microsoft YaHei
- 微軟正黑體 Microsoft JhengHei
- 新宋體 NSimSun
- 新細明體 PMingLiU
- 細明體 MingLiU
- 標楷體 DFKai-SB
- 仿宋 FangSong
- 楷體 KaiTi
- 仿宋_GB2312 FangSong_GB2312
- 楷體_GB2312 KaiTi_GB2312
2.Mac OS的一些：
- 華文細黑：STHeiti Light [STXihei]
- 華文黑體：STHeiti
- 華文楷體：STKaiti
- 華文宋體：STSong
- 華文仿宋：STFangsong
- 儷黑 Pro：LiHei Pro Medium
- 儷宋 Pro：LiSong Pro Light
- 標楷體：BiauKai
- 蘋果儷中黑：Apple LiGothic Medium
- 蘋果儷細宋：Apple LiSung Light
3.Windows的一些：
- 新細明體：PMingLiU
- 細明體：MingLiU
- 標楷體：DFKai-SB
- 黑體：SimHei
- 新宋體：NSimSun
- 仿宋：FangSong
- 楷體：KaiTi
- 仿宋_GB2312：FangSong_GB2312
- 楷體_GB2312：KaiTi_GB2312
- 微軟正黑體：Microsoft JhengHei
- 微軟雅黑體：Microsoft YaHei
4.裝Office會生出來的一些：
- 隸書：LiSu
- 幼圓：YouYuan
- 華文細黑：STXihei
- 華文楷體：STKaiti
- 華文宋體：STSong
- 華文中宋：STZhongsong
- 華文仿宋：STFangsong
- 方正舒體：FZShuTi
- 方正姚體：FZYaoti
- 華文彩云：STCaiyun
- 華文琥珀：STHupo
- 華文隸書：STLiti
- 華文行楷：STXingkai
- 華文新魏：STXinwei
5.Windows 中的中文字體
在默認情況下，也就是未自行安裝新字體或者 Office 等文字處理軟件的情況下，Windows 默認提供下列字體：
-
Windows 95/98/98SE 宋體、黑體、楷體_GB2312、仿宋_GB2312
-
Windows XP/2000/2003/ME/NT 宋體/新宋體、黑體、楷體_GB2312、仿宋_GB2312 (Windows XP
SP3 宋體-PUA) -
Windows Vista/7/2008 宋體/新宋體、黑體、楷體、仿宋、微軟雅黑、SimSun-ExtB
參考文章:
CSS字體font-family的正確選擇方案:點擊這里
css常用font-family:點擊這里
部分摘選, 詳情推薦大家閱讀原文
總結
以上是生活随笔為你收集整理的浅谈网页中的字体的设置的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大连大学教务处（处幼在怎么读）
- 下一篇： gmod模组文件夹是哪个（gmod模组）