DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 淺談網頁中的字體的設置
淺談網頁中的字體的設置
編輯:前端技巧     

設置全站的字體一直是一個簡單而又不簡單的事,因為深入下去,這裡面牽扯到太多的東西。

本文主要是想說說對於一個普通的網站,如何根據自己的需求選擇字體。
 
1、必備知識

首先,我們應該明確,並不是你設置了這種字體,用戶電腦便會以這種字體顯示。

如果用戶電腦沒有安裝這種字體,那麼它便會以你設置的第二種字體來渲染。看一個常見設置

XML/HTML Code復制內容到剪貼板
  1. font-family:tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif; /* 其中\5b8b\4f53是宋體的意思,用這種Unicode編碼可以兼容全部浏覽器 */  

上述的代碼,如果在沒有tahoma字體的機器上設置,那麼該機器會以arial字體渲染。如果也沒有,那麼便用後一種。直到你指定的字體都沒有,那麼便會使用sans-serif字體族中的一款字體。
 
然後,我們應該講講sans-serif是什麼。

sans-serif是無襯線字體的意思,並不是一種字體,而是一類字體的統稱。

相應的,serif就是用襯線字體的意思。

(解釋下:襯線就是字體上的很小的修飾,具體可以百度,跟本文關系並不大,就不展開講了。)
 
關於常見字體族,這裡整理下:

•serif:帶襯線字體。Times New Roman 是默認的 serif 字體,中文字體的話,是宋體、仿宋之類的字體。

•sans serif:無襯線字體。Arial 是默認的 sans-serif 字體,中文字體中,微軟雅黑、黑體等都是這類字體,英文字體包括Helvetica、Geneva或Verdana等。

•monospace:等寬字體。這個字體裡面的每個字母都有相同的寬度。通常用於顯示程序代碼等,Courier 是默認的 monospace 字體。而對於中文,每個漢字都是等寬的。
 
2、該怎麼設置字體

看過了上面的必備知識,想必對字體有了稍微系統點的認識了。

那麼如何設置網站字體呢?

有人習慣用宋體、arail或者tahoma作為第一字體。但是,這裡面有個很大的問題,對於字號大一點的字體(16px以上的),渲染出來是 相當的難看。不過我電腦上使用了windows下優化字體的東西,就無法給大家展示了。總之,對於大號字體,用這種的設置挺難看的。
 
那麼有人說微軟雅黑在字體大的時候挺好看的。全部設置微軟雅黑怎麼樣?

這裡有個很大的問題,雅黑是windows vista才有的,對於占有率為65%+的xp用戶來說,你設置了雅黑等於沒寫。他們還是用宋體啊什麼的渲染的。除了你自我安慰或者應付 BOSS(BOSS一般都會趕潮流用windows 7以上)。對大部分用戶來說真的沒用。而且微軟雅黑在渲染12px字體時並沒有宋體它們來得好。
 
所以,關於如何設置字體,我覺得應該根據實際業務和情況來具體設置。
 
3、結論

經過上述的分析,我總結了一個我覺得挺好的設置方法
 
1: 綜合最優

全站字體設置如下

XML/HTML Code復制內容到剪貼板
  1. font-family:Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;  

然後對於大的重要的字體(例如導航)使用圖片來處理。因為用圖片後,你就不用糾結用戶是否裝了這個字體的問題了,而且可以做的更漂亮,更多的擴展性與可能性。
 
2: 性能最好

全站字體還是

XML/HTML Code復制內容到剪貼板
  1. font-family:Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;  

然後對於大的字體(這裡就不管重不重要了)。單獨來設置

XML/HTML Code復制內容到剪貼板
  1. font-family:Microsoft YaHei;   

這種設置可以讓前端省挺多事,不過會有很多xp的用戶會被大號字體給丑到。
 
3: 最省事方案

直接

XML/HTML Code復制內容到剪貼板
  1. font-family:Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;   
或者
XML/HTML Code復制內容到剪貼板
  1. font-family:Microsoft YaHei,Helvetica,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;   
雖然有可能渲染大字體不漂亮,雖然雅黑渲染小字體不清晰。but,有什麼關系呢。

以上這篇淺談網頁中的字體的設置就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。</p>

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved