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