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