01.25 網(wǎng)站建設(shè)中字體的設(shè)定
關(guān)于網(wǎng)站設(shè)計(jì)，如何選擇適當(dāng)?shù)淖煮w是一個(gè)比較重要的事情、并且也是在做網(wǎng)站整體結(jié)構(gòu)規(guī)劃之初就要考慮的事情。因?yàn)樽煮w的樣式直接關(guān)系到網(wǎng)頁(yè)設(shè)計(jì)的排版、品牌固有風(fēng)格延展，因此，每次為品牌做網(wǎng)站建設(shè)設(shè)計(jì)的時(shí)候，首先要解決的一個(gè)問(wèn)題，就是如何選擇合適的字體，使網(wǎng)頁(yè)既能輕松在各種瀏覽器和平臺(tái)上正確顯示，又能符合品牌的風(fēng)格。于是在網(wǎng)上找了很多資料，發(fā)現(xiàn)在知乎上在這個(gè)問(wèn)題下面有不少靠譜的答案。轉(zhuǎn)來(lái)研究下。相關(guān)答案如下，部分內(nèi)容轉(zhuǎn)自知乎：
–
在不同操作系統(tǒng)、不同游覽器里面默認(rèn)顯示的字體是不一樣的，并且相同字體在不同操作系統(tǒng)里面渲染的效果也不盡相同，那么如何設(shè)置字體顯示效果會(huì)比較好呢？
下面我們逐步的分析一下：
我們?cè)诓僮飨到y(tǒng)中常?？吹剿误w、微軟雅黑這樣的字體名稱，但實(shí)際上這只是字體的顯示名稱，而不是字體文件的名稱，一般字體文件都是用英文命名的，如SimSun、Microsoft Yahei。在大多數(shù)情況下直接使用顯示名稱也能正確的顯示，但是有一些用戶的特殊設(shè)置會(huì)導(dǎo)致中文聲明無(wú)效。
因此，保守的做法是使用字體的字體名稱（英文）或者兩者兼寫。如下示例：
font-family: STXihei, “Microsoft YaHei”;
font-family: STXihei, “華文細(xì)黑”, “Microsoft YaHei”, “微軟雅黑”;
1、聲明英文字體：
絕大部分中文字體里都包含英文字母和數(shù)字，不進(jìn)行英文字體聲明是沒有問(wèn)題的，但是大多數(shù)中文字體中的英文和數(shù)字的部分都不是特別漂亮，所以建議也對(duì)英文字體進(jìn)行聲明。
由于英文字體中大多不包含中文，我們可以先進(jìn)行英文字體的聲明，這樣不會(huì)影響到中文字體的選擇，因此優(yōu)先使用最優(yōu)秀的英文字體，中文字體聲明則緊隨其次。如下示例：
font-family: Arial, “Microsoft YaHei”;
2、照顧不同的操作系統(tǒng)：
2.1 英文、數(shù)字部分：
在默認(rèn)的操作系統(tǒng)中，Mac和Win都會(huì)帶有Arial, Verdana, Tahoma等幾個(gè)預(yù)裝字體，從顯示效果來(lái)看，Tahoma要比Arial更加清晰一些，因此字體設(shè)置Tahoma最好放到前面，當(dāng)找不到Tahoma時(shí)再使用Arial；而在Mac中，還擁有一款更加漂亮的Helvetica字體，所以為了照顧Mac用戶有更好的體驗(yàn)，應(yīng)該更優(yōu)先設(shè)置Helvetica字體；Android系統(tǒng)下默認(rèn)的無(wú)襯線字體就可以接受，因此無(wú)需單獨(dú)設(shè)置。最后，英文、數(shù)字字體的最佳寫法如下：
font-family: Helvetica, Tahoma, Arial;
2.2 中文部分：
在Win下，微軟雅黑為大部分人最常使用的中文字體，由于很多人安裝Office的緣故，Mac電腦中也會(huì)出現(xiàn)微軟雅黑字體，因此把顯示效果不錯(cuò)的微軟雅黑加入到字體列表是個(gè)不錯(cuò)的選擇；同樣，為了保證Mac中更為優(yōu)雅字體蘋方（PingFang SC）、黑體-簡(jiǎn)（Heiti SC）、冬青黑體（ Hiragino Sans GB ）的優(yōu)先顯示，需要把這些字體放到中文字體列表的最前面；同時(shí)為了照顧到Linux操作系統(tǒng)的體驗(yàn)，還需要添加文泉驛微米黑字體。最后，中文字體部分最佳寫法如下：
font-family: “PingFang SC”, “Hiragino Sans GB”, “Heiti SC”, “Microsoft YaHei”, “WenQuanYi Micro Hei”;
2.3 中英文整合寫法：
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”;
3、注意向下兼容
如果還需要考慮舊版本操作系統(tǒng)用戶的話，不得不加上一些舊版操作系統(tǒng)存在的字體：Mac中的華文黑體、冬青黑體，Win中的黑體等。同樣按照顯示效果排列在列表后面，寫法如下：
font-family: Helvetica, Tahoma, Arial, “PingFang SC”, “Hiragino Sans GB”, “Heiti SC”, STXihei, “Microsoft YaHei”, SimHei, “WenQuanYi Micro Hei”;
加入了 STXihei（華文細(xì)黑）和 SimHei（黑體）。
4、補(bǔ)充字體族名稱
字體族大體上分為兩類：sans-serif（無(wú)襯線體）和serif（襯線體），當(dāng)所有的字體都找不到時(shí)，我們可以使用字體族名稱作為操作系統(tǒng)最后選擇字體的方向。一般非襯線字體在顯示器中的顯示效果會(huì)比較好，因此我們需要在最后添加 sans-serif，寫法如下：
font-family: Helvetica, Tahoma, Arial, “PingFang SC”, “Hiragino Sans GB”, “Heiti SC”, “Microsoft YaHei”, “WenQuanYi Micro Hei”, sans-serif;
暫無(wú)評(píng)論