設(shè)置全站的字體一直是一個(gè)簡單而又不簡單的事，因?yàn)樯钊胂氯?，這里面牽扯到太多的東西。

本文主要是想說說對于一個(gè)普通的網(wǎng)站，如何根據(jù)自己的需求選擇字體。
 
1、必備知識(shí)

首先，我們應(yīng)該明確，并不是你設(shè)置了這種字體，用戶電腦便會(huì)以這種字體顯示。

如果用戶電腦沒有安裝這種字體，那么它便會(huì)以你設(shè)置的第二種字體來渲染?？匆粋€(gè)常見設(shè)置

上述的代碼，如果在沒有tahoma字體的機(jī)器上設(shè)置，那么該機(jī)器會(huì)以arial字體渲染。如果也沒有，那么便用后一種。直到你指定的字體都沒有，那么便會(huì)使用sans-serif字體族中的一款字體。
 
然后，我們應(yīng)該講講sans-serif是什么。

sans-serif是無襯線字體的意思，并不是一種字體，而是一類字體的統(tǒng)稱。

相應(yīng)的，serif就是用襯線字體的意思。

（解釋下：襯線就是字體上的很小的修飾，具體可以百度，跟本文關(guān)系并不大，就不展開講了。）
 
關(guān)于常見字體族，這里整理下：

•serif：帶襯線字體。Times New Roman 是默認(rèn)的 serif 字體，中文字體的話，是宋體、仿宋之類的字體。

•sans serif：無襯線字體。Arial 是默認(rèn)的 sans-serif 字體，中文字體中，微軟雅黑、黑體等都是這類字體，英文字體包括Helvetica、Geneva或Verdana等。

•monospace：等寬字體。這個(gè)字體里面的每個(gè)字母都有相同的寬度。通常用于顯示程序代碼等，Courier 是默認(rèn)的 monospace 字體。而對于中文，每個(gè)漢字都是等寬的。
 
2、該怎么設(shè)置字體

看過了上面的必備知識(shí)，想必對字體有了稍微系統(tǒng)點(diǎn)的認(rèn)識(shí)了。

那么如何設(shè)置網(wǎng)站字體呢？

有人習(xí)慣用宋體、arail或者tahoma作為第一字體。但是，這里面有個(gè)很大的問題，對于字號(hào)大一點(diǎn)的字體（16px以上的），渲染出來是 相當(dāng)?shù)碾y看。不過我電腦上使用了windows下優(yōu)化字體的東西，就無法給大家展示了?？傊瑢τ诖筇?hào)字體，用這種的設(shè)置挺難看的。
 
那么有人說微軟雅黑在字體大的時(shí)候挺好看的。全部設(shè)置微軟雅黑怎么樣？

這里有個(gè)很大的問題，雅黑是windows vista才有的，對于占有率為65%+的xp用戶來說，你設(shè)置了雅黑等于沒寫。他們還是用宋體啊什么的渲染的。除了你自我安慰或者應(yīng)付 BOSS（BOSS一般都會(huì)趕潮流用windows 7以上）。對大部分用戶來說真的沒用。而且微軟雅黑在渲染12px字體時(shí)并沒有宋體它們來得好。
 
所以，關(guān)于如何設(shè)置字體，我覺得應(yīng)該根據(jù)實(shí)際業(yè)務(wù)和情況來具體設(shè)置。
 
3、結(jié)論

經(jīng)過上述的分析，我總結(jié)了一個(gè)我覺得挺好的設(shè)置方法
 
1: 綜合最優(yōu)

全站字體設(shè)置如下

然后對于大的重要的字體（例如導(dǎo)航）使用圖片來處理。因?yàn)橛脠D片后，你就不用糾結(jié)用戶是否裝了這個(gè)字體的問題了，而且可以做的更漂亮，更多的擴(kuò)展性與可能性。
 
2: 性能最好

全站字體還是

然后對于大的字體（這里就不管重不重要了）。單獨(dú)來設(shè)置

這種設(shè)置可以讓前端省挺多事，不過會(huì)有很多xp的用戶會(huì)被大號(hào)字體給丑到。
 
3: 最省事方案

直接

以上這篇淺談網(wǎng)頁中的字體的設(shè)置就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。</p>

原文地址：http://www.cnblogs.com/qqziyuan8/archive/2016/08/01/5726310.html

最新評論