Web中常用字体介绍（转）
1、在Web編碼中，CSS默認應用的Web字體是有限的，雖然在新版本的CSS3，我們可以通過新增的@font-face屬性來引入特殊的瀏覽器加載字體。
瀏覽器中展示網頁文字內容時，文字字體都會按照設計師在css中定義的字體族的順序來進行顯示。什么是字體族？字體族就是你在css代碼中看到“font-family”的代碼內的一類字體名稱，例如下面這行代碼：
font-family:"Comic Sans MS","幼圓","黑體",sans-serif;? 按照W3C標準，瀏覽器在解析一行代碼時首先會在系統中查找Comic Sans MS字體，如果系統內存在這個字體那么瀏覽器就會使用Comic Sans MS字體，如果沒有的話就接著查找幼圓字體，以此類推直到瀏覽器可以表達系統存在的字體為止。
注意了，“sans-serif”不是某個字體的名稱，而是一種在前面敘述的字體都無效時而最終選用的字體，稱為瀏覽器通用字體，它取決于你所用的瀏覽器默認的通用字體是什么，可能是“Arial”，也有可能是“Helvetica”。
2、網頁常用字體通常分為5類：serif(襯線)、sans-serif(無襯線)、monospace(等寬)、fantasy(夢幻)、cuisive(草體)，這些通用的名稱允許用戶代理從相應集合中選擇一款字體。
serif?字體在字符筆畫末端有叫做襯線的小細節，這些細節在大寫字母中特別明顯。
sans-serif?字體在字符筆畫末端沒有任何細節，與serif字體相比，他們的外形更簡單。
monospace?字體，每個字母的寬度相等，通常用于計算機相關書籍中排版代碼塊。
fantasy?和?cuisive?字體在瀏覽器中不常用，在各個瀏覽器中有明顯的差異。
3、網頁常用字體
Sans-serif:
Helvetica: 被評為設計師最愛的字體，Realist風格，簡潔現代的線條，非常受到追捧。在Mac下面被認為是最佳的網頁字體，在Windows下由于Hinting的原因顯示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，細節上比如R和G有小小差別。如果字號太小，文字太多，看起來會有些累眼。Win和Mac顯示都正常
Lucida Family: Lucida Grande是Mac OS UI的標準字體，屬于humanist風格，稍微活潑一點。Mac下的顯示要比Win下好。
Verdana: 專門為了屏顯而設計的字體，humanist風格，在小字號下仍可以清楚顯示，但是字體細節缺失嚴重，最好別做標題。
Tahoma: 也是humanist風格，字體和Verdana有點像，但是略窄一些，counter略小，曾經是Windows的標準字體，Mac 10.5之后默認也有安裝。
Trebuchet MS: 為微軟設計的一個humanist風格字體，個人覺得個性太過突出，用得不好會不搭。
Serif：
Georgia: 基本上適合正文屏顯的襯線字體，非Georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時細節還算OK。
Times: Times是為了報紙而設計的，特點是可以在有限的空間塞進去更多的文字，筆畫較弱，小字號正文屏顯看起來累眼。曾經Engadget改版的時候用了Times作為正文，被罵得很慘之后換成了Georgia。
中文：
宋體：Win最常見的字體，小字體點陣，大字體TrueType，但是大字體并不好看，所以最好別做標題。
微軟雅黑：Vista之后新引入的字體，打開Cleartype之后顯示效果不錯，不開Cleartype發虛。
華文細黑：Mac下的默認中文。
4、寫個小demo，在各種瀏覽上測試了一下，各種瀏覽器對這個字體的解析還是有差異的。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>font</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="author" content="@my_programmer"> <style type="text/css"> /*重置{*/ *{ padding:0;margin:0;} img{border:0;} li{list-style:none;} /*}重置*/ div{font-size:1.2em;} </style> </head> <body><br/>--網頁字體通常分為5類--<div style="font-family: sans-serif;">你好 hello world sans-serif(無襯線) </div><div style="font-family: serif;">你好 hello world serif(襯線) </div><div style="font-family: monospace;">你好 hello world monospace(等寬) </div><div style="font-family: fantasy;">你好 hello world fantasy(夢幻) </div> <div style="font-family: cuisive;">你好 hello world cuisive(草體) </div><br/>--無襯線類--<div style="font-family: Helvetica, sans-serif;">你好 hello world Helvetica </div><div style="font-family: Arial, sans-serif;">你好 hello world Arial </div><div style="font-family: 'Lucida Grande', sans-serif;">你好 hello world Lucida Grande </div><div style="font-family: Verdana,sans-serif;">你好 hello world Verdana </div> <div style="font-family: Tahoma, sans-serif;">你好 hello world Tahoma </div><div style="font-family: 'Trebuchet MS', sans-serif;">你好 hello world Trebuchet MS </div><br/>--襯線類--<div style="font-family: Georgia, serif;">你好 hello world Georgia </div><div style="font-family: Times, serif;">你好 hello world Times </div><br/>--中文字體--<div style="font-family: 宋體">你好 hello world 宋體 </div><div style="font-family: 微軟雅黑">你好 hello world 微軟雅黑 </div><div style="font-family: 華文細黑">你好 hello world 華文細黑 </div><div style="font-family: 黑體">你好 hello world 黑體 </div></body> </html>在chrome上顯示的結果
???
在ie8上顯示的結果
?? ? ?
在firefox上顯示的結果
5、在此次測試中發現：
android設備中各個瀏覽器都很不給力（ios的還沒有測試，我想肯定也好不到哪去吧），android手機中各個瀏覽器支持的常用字體只有三種：
sans-serif(無襯線)類 : Arial; //只要設置成sans-serif類，不管什么字體，都一個樣子。
serif(襯線)類 ：Georgia； //只要設置成serif類，不管什么字體，都一個樣子。
monospace(等寬)類 //只要設置成monospace類，不管什么字體，都一個樣子。
移動設備的瀏覽器還需要努力哦。
原文地址：
http://www.cnblogs.com/duanhuajian/archive/2013/01/31/2887088.html
轉載于:https://www.cnblogs.com/tianma3798/p/5581041.html
總結
以上是生活随笔為你收集整理的Web中常用字体介绍（转）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cookies与session
- 下一篇： bzoj1003题解