設定全站的字型一直是乙個簡單而又不簡單的事,因為深入下去,這裡面牽扯到太多的東西。
1、必備知識
首先,我們應該明確,並不是你設定了這種字型,使用者電腦便會以這種字型顯示。
如果使用者電腦沒有安裝這種字型,那麼它便會以你設定的第二種字型來渲染。看乙個常見設定
font-family:tahoma,arial,'hiragino sans gb',\5b8b\4f53,sans-serif;/*其中\5b8b\4f53是宋體的意思,用這種unicode編碼可以相容全部瀏覽器
*/
上述的**,如果在沒有tahoma字型的機器上設定,那麼該機器會以arial字型渲染。如果也沒有,那麼便用後一種。直到你指定的字型都沒有,那麼便會使用sans-serif字型族中的一款字型。
然後,我們應該講講sans-serif是什麼。
sans-serif是無襯線字型的意思,並不是一種字型,而是一類字型的統稱。
相應的,serif就是用襯線字型的意思。
關於常見字型族,這裡整理下:
2、該怎麼設定字型
看過了上面的必備知識,想必對字型有了稍微系統點的認識了。
那麼如何設定**字型呢?
有人習慣用宋體、arail或者tahoma作為第一字型。但是,這裡面有個很大的問題,對於字型大小大一點的字型(16px以上的),渲染出來是相當的難看。不過我電腦上使用了windows下優化字型的東西,就無法給大家展示了。總之,對於大號字型,用這種的設定挺難看的。
那麼有人說微軟雅黑在字型大的時候挺好看的。全部設定微軟雅黑怎麼樣?
這裡有個很大的問題,雅黑是windows vista才有的,對於占有率為65%+的xp使用者來說,你設定了雅黑等於沒寫。他們還是用宋體啊什麼的渲染的。除了你自我安慰或者應付boss(boss一般都會趕潮流用windows 7以上)。對大部分使用者來說真的沒用。而且微軟雅黑在渲染12px字型時並沒有宋體它們來得好。
所以,關於如何設定字型,我覺得應該根據實際業務和情況來具體設定。
3、結論
經過上述的分析,我總結了乙個我覺得挺好的設定方法
1: 綜合最優
全站字型設定如下
font-family:helvetica,arial,'hiragino sans gb',\5b8b\4f53,sans-serif;
2: 效能最好
全站字型還是
font-family:helvetica,arial,'hiragino sans gb',\5b8b\4f53,sans-serif;
然後對於大的字型(這裡就不管重不重要了)。單獨來設定
font-family:microsoft yahei;
這種設定可以讓前端省挺多事,不過會有很多xp的使用者會被大號字型給醜到。
3: 最省事方案
直接
font-family:helvetica,arial,'hiragino sans gb',\5b8b\4f53,sans-serif;
或者
font-family:microsoft yahei,helvetica,arial,'hiragino sans gb',\5b8b\4f53,sans-serif;
雖然有可能渲染大字型不漂亮,雖然雅黑渲染小字型不清晰。but,有什麼關係呢。
網頁字型該如何設定?
我們在網頁製作過程中肯定會想乙個問題,那就是網頁自己設定的問題,到底該設定什麼字型?網頁字型多大合適?下面就給出網頁自己設定的一些相關注意事項。我們在網頁製作過程中肯定會想乙個問題,那就是網頁自己設定的問題,到底該設定什麼字型?網頁字型多大合適?下面就給出網頁程式設計客棧自己設定的一些相關注意事項。...
網頁設計之字型設定(上)
字型 font 的設定是網頁製作新手遇到的第乙個難點。如何控制字型大小,如何取消超連結字型的下劃線是來信問得最多的。好,我們來徹底研究一下字型的各個方面 字符集的設定。在檢視html 檔案原 時,我們經常可以在檔案頭 之間看到這麼一句 這段 的作用是什麼呢?是否可以刪除呢?其實這是 meta 標籤的...
網頁字型設定你了解嗎?
以前做專案的時候就依葫蘆畫瓢的設定 等類似的字型,然而當更多的裝置和系統出現後,以前這樣的設定已不能滿足網頁在各裝置上的顯示需求。出處 因此,出於種種原因,促使我不得不去對字型做乙個相應的了解。移動端專案 font family tahoma,arial,roboto,droid sans helv...