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