sweet 127 . 0 . 0 . 1 & lt；3博客花園社區家園新征文聯系管理訂閱征文-21文章-0評論-489
【教程】談字體在網頁設計中的應用(二)襯線和無襯線
妳好，妳好，又是我~
上次我們簡單講了壹下字體設置和壹些應該註意的基本問題。今天繼續字體的話題，說說上次提到的“通用字體家族”。首先，最常用的字體系列是襯線字體和無襯線字體。
-襯線
襯線是指印刷中的襯線字體。為了理解襯線字體的概念，我們先來看幾個典型的襯線字體的例子:
我的
喬治亞字體大王
Times新羅馬字體漢字
宋體
單詞My中字母“m”上下突出的短橫線，就是所謂的襯線。同樣，Y上面，K上面，I和N下面也有襯線字體，所以這些字體就叫襯線字體。但是serif字體並不總是有serif，比如上面例子中的G，Han，Zi。事實上，所有符合端部加固原則的字體都是襯線字體。所謂末端增強，就是用襯線或者粗細變化來加強字體筆畫的末端，以提高小字的可讀性。比如上例中Y的下半部分，以及宋體的漢字，都采用了加粗筆畫的結尾，以達到加強結尾的效果。此外，很多襯線字體還會通過加強豎線筆畫(比如宋體中豎線比橫線粗)、誇張字體(最明顯的就是小寫的g字)來進壹步提高可讀性。
因為襯線字體可讀性很強，所以也是出版物或印刷品等以長段落為表現形式的作品中應用最廣泛的地方。
比較常見的serif字體有Georgia，Garamond，Times New Roman，中文的宋體等等。
-無襯線字體
除襯線字體外的所有字體都是無襯線字體。sans——這個前綴其實是法語，所以更標準的發音是/san/而不是/sans/。意思是“不”。所以sans-serif就是無襯線字體。
勇氣
Verdana字體可能
Arial字體書寫
年輕的圈子
無襯線字體是圓滑的，線條壹般粗細均勻。比較適合藝術字、標題等。由於無襯線字體通常粗細均勻，顯示小字體時可讀性會降低，容易造成視覺疲勞。
常見的無襯線字體有投石機ms、Tahoma、verdana、arial、Helvetica、中文青年圈、隸書等。
-什麽時候用襯線？什麽時候使用無襯線字體？
從上面的介紹我們可以知道，serif字體是設計用來作為文本內容的。妳可以隨便拿壹張報紙，看看上面的文章是不是宋體的。如果手頭有外文讀物，也可以看看。文字都是襯線字體。相同大小的襯線字體比無襯線字體更容易閱讀:
那只敏捷的棕色狐貍跳過了那只懶狗。
那只敏捷的棕色狐貍跳過了那只懶狗。
然後妳可以翻到報紙的頭版——標題通常會是各種綜合藝術，粗細壹致或者用粗體。英文報紙的標題大多是無襯線的。這是運用他們的基本原理。
但是妳可以看看很多網站——它們的文字內容只是普通的Tahoma，Verdana，Arial等等。中文網站可能因為字體的限制，大部分還是用宋體，但是如果妳看他們的樣式表，妳會發現大部分的備選字體都是無襯線的。這樣不好嗎？
當然不是。
襯線字體的可讀性其實只體現在小字體上。妳可以把剛剛復印的報紙拿出來和顯示器上的文字對比壹下——妳會發現報紙上的文字比顯示器上的文字小了整整壹圈。實際上，在壹個節距為0.25mm的高質量液晶顯示器上，新的《明日晚報》宋體字的大小只有10px ~ 11px左右:在壹個普通的液晶顯示器上(點距壹般為0.28mm)，甚至可能只相當於8px~10px的顯示字符。
這是平面媒體和屏幕媒體最大的區別。印刷業為了節約成本，在保證可讀性的同時，會盡量印刷小字。顯示器沒有這樣的成本，所以它可以顯示相對較大的文本。當文本足夠大時，無襯線字體同樣可讀。而且，由於無襯線字體通常具有藝術性，在顯示器上顯示通常會很賞心悅目；而且無襯線字體的種類比有襯線字體多，選擇余地大。所以大家可以放心使用。但是，必須保證以下原則:任何無襯線字體必須在文本中可讀。否則，使用襯線字體。換句話說，如果妳想用sans-serif字體來顯示網頁的文本內容，那麽妳必須把它的字體大小設置得足夠大，以確保用戶能夠容易地閱讀它。
至於字體大小的具體大小，因字體而異。12px對於Verdana來說足夠了，但是要輕松讀懂隸書可能需要24px以上。
11px以下的英文字體，推薦使用襯線字體。至於中文，由於顯示器的硬件限制，不建議使用11px以下的字體，不管是什麽字體。
-其他常見字體系列
在印刷科學中，除了襯線和無襯線字體之外，通常還有等寬字體、手寫體(如草書)和黑體鉛字(也叫哥特式)。嚴格來說，很多常用的襯線字體其實都是哥特字體，裝飾性的裝飾字體(文字筆畫上或周圍有裝飾圖案的字體)。這在許多中世紀的書中很常見。如果腦殘真的成了字體，應該算是裝飾字體吧...)和符號字體(如著名的wedding123……...).
但是，CSS中常用字體族的定義略有不同。除了serif和sans-serif，CSS還允許以下常見字體系列:
等寬字體
所謂等寬字體，是指每個字符寬度相同的字體。壹個著名的例子是信使新字體。由於字符寬度壹致，特別容易對齊，能快速準確地定位壹行壹列，所以常用來顯示代碼。
需要註意的是，等寬字體也可以是襯線(或非襯線)字體。比如Courier New這種字體，也可以看作是serif(嚴格來說是哥特式)字體。
草書筆跡:相當於印刷術中的筆跡。中文的草書就是這樣壹種字體。
幻想幻想:相當於印刷中的裝飾體。很少見的字體，參考價值不大。
請註意，CSS不支持符號字體系列。請用圖片使用符號類的字體。
-壹些妳不知道的事
中文中的黑體實際上是襯線字體。可以看到下圖:
大家可以看到，其實黑體在結尾確實是加強了，所以很多印刷文字也會用黑體。像這樣的字體，使用平緩的末端加強，筆畫粗細大致相同，也可以叫小襯線/小襯線。(與宋體有明顯端筋、筆畫粗細差異明顯的，通常稱為板書襯線/刻字襯線)。
只是遺憾的是，由於諸多硬件原因，當妳實際在顯示器上顯示粗體時，仍然可以將其視為無襯線字體。
斜體不是斜體。
斜體字。斜體，顧名思義，是意大利語。斜體字是壹種書寫風格(書法字體)，而斜體字是壹種印刷風格。它們是兩碼事。中學英語字帖的寫作風格是意大利風格。除了意大利，其他流行的書寫方式還包括法式(傳說中的草書字符，其專有名稱是法國腳本)，哥特式，亞伯拉罕式等等。
很多優雅的字體會為意大利風格定制壹套特殊的字體，而不是簡單的用斜體顯示。例如，在下面的圖片中，三行文本是格魯吉亞字體。第壹行普通；第二行是客觀，斜體；第三行是真正的斜體。
仔細看第三行中的字母a，l，I，e——妳可以清楚地看出區別。其實喬治亞斜體和喬治亞是系統中兩個不同的字體文件。當我們指定font-style: italic時，系統會自動搜索Georgia Italic這種字體是否存在，並嘗試使用這種字體來顯示文本內容。
按理說，當我們用font-style:slighted指定字體樣式的時候，瀏覽器應該不會去尋找Georgia Italic這種字體，而是直接斜著顯示Georgia字體，所以理論上應該會得到圖片中第二行文字的效果。可惜的是，即使是W3C自己在CSS規範中的參考實現也是說“如果UA不能正確顯示斜體和斜體字，可以用斜體代替斜體字”，所以幾乎沒有瀏覽器區分斜體和斜體字。即使妳設置的字體樣式是斜的，妳也會發現瀏覽器仍然顯示斜體。
今天到此為止。下次我會談談如何建立壹個合理的字體家族，並向您推薦幾種字體組合。那麽，再見。
標簽標簽:初學者，教程，VI設計，經驗，字體，字體，css，字體系列
發帖@ 2008-05-06 00:19棕熊閱讀(5219)評論(37)編輯收藏網頁類別:CSS標準，另見標準VI設計。
評論
回復並引用查看#1樓層2008-05-06 01:31 |陶晶
沙發
回復報價# 2 Floor 2008-05-06 06:02 | Fisher[未註冊用戶]
是的，我之前學過serif和sans serif字體，但是我真的很喜歡sans serif微軟雅黑，在LCD顯示和打印方面比Songti好很多。
回復報價查看#3樓2008-05-06 07:25 |生魚片
研究
回復報價#4樓2008-05-06 07:30 |嚴騰[未註冊用戶]
那個圓形幼蟲的截圖有問題~
不像圓滾滾的嬰兒。
不過這篇文章不錯，我收藏了:)
回復報價#5樓2008-05-06 07:49 | ZJ feiye[未註冊用戶]
文筆不錯，學到了很多，很多東西以前都知道，但不知道為什麽，只知道怎麽用。
另外，經常看到CSS引入的鏈接中有壹個media = "screen"。是樓主說的那個意思嗎？
回復報價查看#6樓2008-05-06 08:22 |李湛
回復報價查看#7樓2008-05-06 09:27 | JackMa
很好，很專業。壹切都很清楚，也很有見識。這個博客也很有特色。
回復報價查看#8樓2008-05-06 09:27 | Yannic楊
我壹直在想，多普達手機用雅黑好還是松提好？
我有答案了~要是能看清楚就好了，呵呵
我決定用優雅的黑色，讓字體大壹號。
另外
感覺css這幾年越來越成熟了...
各方面的支持都非常詳細
我還停留在幾年前討論用table還是div的時代。
邪惡ie6。...
查看#9樓2008-05-06 09:44 |想愛就愛。
這項研究更加深入
回復並引用查看# 10 Floor 2008-05-06 09:44 | air wolf 2026
標記
回復報價#11樓2008-05-06 09:48 |壹個農民[未註冊用戶]
太棒了。請問樓主我衣櫃裏的單色圖標是用什麽工具做的？最近在研究xara xtreme。樓主用過嗎？
回復並引用查看#12樓2008-05-06 10:06 |楊正義(阿憶)
中間壹個大大的“禁”字嚇了我壹跳，我以為是18封禁網站。呵呵呵。。。
回復並引用查看#13樓層2008-05-06 10:07 |楊正義(阿憶)
@zjfeiye
那是指定css的終端。顯示器，打印機什麽的...
回復並引用查看#14樓層2008-05-06 10:42 |蕭聲
研究
回復引用查看#15樓【樓主】2008-05-06 10:49 |棕熊
燕騰
那不是截圖，是真實的文字。
@Yannic楊
雅黑的優勢在於它是專門為顯示而設計的字體，所以經過了顯示優化，自然是理想的選擇。
@壹個農民
我想知道妳說的是哪個圖標。我衣櫃上的壹般圖片都是photoshop做的(而且不是我做的)
壹般自己平面設計會用adobe的那套，其他平面設計軟件基本不常用。
@楊正義(阿姨)
這是對性格的考驗。啊哈...
開玩笑的。其實用這個詞是因為它包含了橫、豎兩種筆畫，筆畫密度非常適合演示。
回復報價查看#16建築2008-05-06 10:58 |和平中的瘋狂。
非常好。我非常喜歡它。
回復報價#17樓2008-05-06 12:03 | sorcom[未註冊用戶]
的確如此丹尼爾。但是，頁面打開總是很慢。
回復並引用查看#18樓層2008-05-06 12:42 |貓陳
研究中文字體的人真的很少。有人說說字體挺好的。
回復報價# 19 Floor 2008-05-06 15:11 | SoarooAroar[未註冊用戶]
呃哼...這...其實這篇文章的內容只要精心搭配linux環境字體和瀏覽器，就不算新鮮，不過我還是很欣賞樓主的辛苦~這對教育視野狹窄的IE開發界來說很重要。
見# 20樓2008-05-06 20:58 |二手程序員。
“漢字”壹詞使用網頁的默認字體。如果用戶將網頁的默認字體設置為另壹種字體，則不會顯示為宋體。
回復引用查看#21樓【樓主】2008-05-07 00:17 |棕熊
@二手程序員
這其實是壹個字體名稱別名的問題。
因為這個博客是Live Writer寫的，Live Writer在完全沒有註意的情況下，自動將源代碼中的中文字體名稱轉換為別名，所以只在IE下工作。
現在我在博客花園的編輯器裏改了壹下，應該沒問題了。
見# 22樓2008-05-07 09:37 |二手程序員。
看來妳也是壹個極端的完美主義者。
回復參考查看# 23樓2008-05-07 11:11 |狼機器人
研究
回復並引用查看# 24樓2008-05-07 12:18 |河流趙
我學習過。樓主見多識廣。
參見# 25樓2008-05-07 13:02 | gogo Sony
期待下次講座！！！
回復並引用查看# 26樓2008-05-09 10:08 | jason_lb
Rss是每次講課的必讀，在firefox下瀏覽非常舒服。
回復並報價#27樓2008-05-1110:22 | jasoniou
真的很好，我學到了很多東西。
期待您的下次講座！
見# 28樓2008-05-1123:13 | volnet(可以叫我大V)。
博主讓我知道了很多以前沒聽過的東西。我很興奮...
我非常關心斜體字和斜體的最後區別。樓主怎麽知道的？不小心撞了還是專門研究的，動機呢，哈哈，妳不說兩者有區別我根本就不知道。哈哈。
回復報價# 29樓2008-05-25 21:37 | hax[未註冊用戶]
漢字不能低於11px不是硬件限制，但是11px以下沒有點陣字符。至於矢量字，由於漢字筆畫多，很難縮小到壹定比例仍保持可識別性。西文字符用提示技術來改進分辨率小的矢量字體，而漢字因為字數太多，做提示的成本太高，很難做到。
回復報價#30樓2008-06-01 1 65438 |南西伯利亞[未註冊用戶]
牛，我有兩個問題要問妳。西裏爾文和阿拉伯文是拼音文字，不像中文。比如用戶本地電腦沒有相關字體，網站壹般會做EOT文件，用戶第壹次打開網頁時會自動加載這些字體(我做了幾次10的EOT文件，有時失敗有時莫名其妙成功，讓人無語！)，有沒有flash vector的替代品(我自己也不確定)。
還有壹個問題是，如果阿拉伯語和漢語混合，漢字12px可能好看，但是對於阿拉伯語來說，字體太小，可能不好看。如何分別定義不同字符的字體大小？
回復並引用查看#31樓【樓主】2008-06-03 10:31 |棕熊
引用壹下。
牛，我有兩個問題要問妳。西裏爾文和阿拉伯文都是拼音文字，不像中文。比如用戶本地電腦沒有相關字體，網站壹般會做EOT文件，用戶第壹次打開網頁時會自動加載這些字體(我做了幾次10的EOT文件，有時失敗有時莫名其妙成功，讓人無語！)，有沒有flash vector的替代品(我自己也不確定)。
還有壹個問題是，如果阿拉伯語和漢語混合，漢字12px可能好看，但是對於阿拉伯語來說，字體太小，可能不好看。如何分別定義不同字符的字體大小？
-
這個我沒有具體研究過，瀏覽器對@font-face的支持已經是相當吃力了，更何況ms EOT文件還是IE才有的東西。
至於字體大小，其實有壹個css規則叫做font-size-adjust，可惜不是所有主流瀏覽器都支持。目前，壹個
回復引用查看#32樓【樓主】2008-06-03 10:33 |棕熊
引用壹下。
Volnet(妳可以叫我大V):博主讓我知道了很多以前沒聽說過的事情。我很興奮...
我非常關心斜體字和斜體的最後區別。樓主怎麽知道的？不小心撞了還是專門研究的，動機呢，哈哈，妳不說兩者有區別我根本就不知道。哈哈。
-
這個是我學印刷的時候學的，呵呵。
回復報價# 33樓2008-06-03 19: 14 |南西伯利亞[未註冊用戶]
謝謝大家的回答，我很郁悶。。。。。。。。。。。
見# 34樓2008-06-15 11:43 | Joy aspx。
真的很專業，對字體也比較了解...
回復報價# 35樓2008-11-14 15:44 |否，否【未註冊用戶】
寫得好。不得不頂。
回復報價# 36樓2009-02-19 23:31 | Eddie Yang[未註冊用戶]
我用喬治亞斜體用了這麽久，現在才知道不是斜體，是意大利語。
回復並引用# 37樓2009-04-119:51 | aaron @ live。
問博主壹個問題:
壹個多語種網站，主要是中文和英文，可能會在未來擴大。如何在CSS中設置網站的默認字體順序，使網站達到最佳的可讀性和美觀性？
謝謝妳
刷新評論列表切換模板
評論
姓名[登錄][註冊]請輸入您的姓名。
主頁
電子郵件(僅對博客可見)電子郵件地址無效。
請輸入驗證碼。
驗證碼*看不清，請改。
內容(請勿發布任何與政治相關的內容)請輸入評論。
想知道花園裏有多少十幾歲的程序員？
【熱門話題】“有道難題”編程挑戰
網絡新手群體
博客公園。網絡渠道
記得我嗎？
登錄並使用高級註釋註冊新用戶，然後返回頁面頂部。
[使用Ctrl+Enter直接提交]
導航:網站主頁，社區新聞，博客，閃存，招聘。網渠道知識庫，在Google站搜索。
中國-pub電腦圖書網上商店！6.5萬個品種2-8折！
中國按需印刷服務-Pub電腦絕版圖書
相關文章:
ASP.NET 2.0數據課程3:主頁和網站導航
ASP.NET 2.0數據課程10:GridView和DetailView實現的主從報表
深度金山詞霸2009破解版(牛津版)(附綠色全破解版和破解補丁下載)
關於IE，請咨詢求助。
精選31網站界面設計實踐教程
火狐社區對Opera標準教程的善意可見壹斑。
想學uml繪圖，那可以推薦教程和工具。
我在哪裏可以找到WPF的教程？
教程問題
領隊會發壹些教程嗎？
相關鏈接:
如何使用Div+CSS布局？
精通CSS和HTML設計模式
超越CSS:網頁設計藝術的本質
網頁設計的創新思維——利用CSS、DOM腳本和XHTML創新網頁設計
博客園推薦技術書籍:大話設計模式
CSS禪宗花園
牛奶咖啡:仍然孤獨的想著妳
最新的IT新聞:
Firefox 3.5第二個RC候選版本發布。
谷歌中國被暫停海外網絡搜索和聯想詞搜索。
淘寶首席運營官表示，不會放棄收費計劃。
iPhone 3.0的十個未公開的秘密
英特爾研究日:未來技術規劃和概念演示
通告
我最新的閃存
這是加州的壹個性感的地方，在洛杉磯喝多了。
& lt2009年6月>
第壹二三四五六天
31 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 1 2 3 4
5 6 7 8 9 10 11
版權聲明
除非另有說明，本網站上的所有資源均適用於
棕熊的這個作品是在知識共享吸引-非商業-無衍生作品2.5中國大陸許可下授權的
PS:本博客目前還不能完美支持IE6。
常見鏈接
我的文章
我的空間
我的短信
我的評論
更多鏈接
我的參與
我的新聞
最新評論
我的標簽
遊客手冊
給我留言。
查看消息
發送短信
我的標簽
css(8)
初學者(6)
教程(6)
視覺形象設計(5)
體驗(5)
字體(4)
字體(4)
HTML(4)
字體系列(4)
映射(3)
散文分類(39)
CSS(8) (rss)
HTML/XHTML(4) (rss)
iPod Touch風扇(1) (rss)
JavaScript(3) (rss)
視覺形象設計(5) (rss)
標準，參見標準(8) (rss)
設計模式(2) (rss)
隨便寫ykyd @@(8) (rss)
論文文件(19)
2008年9月(1)
2008年8月(1)
2008年7月(2)
2008年6月(1)
2008年5月(4)
2008年4月(10)
博客花園好友記錄
打電話給謝的博客
丹納臣(rss)
飛陳@ cnblogs (rss)
飛行信息系統(rss)
水獺
是啊！B/S！(rss)
黛比·羅問答世界(rss)
老趙滴滴(rss)
搖擺草博客(RSS)
明星。net技術社區(rss)
最新的文章
1.【多圖嘗鮮】谷歌Chrome試用提示。
2.呵呵，爆料，最新壹期《流言終結者》。
3.【快】分塊和內聯答案公布~再交壹個，關於斷字。
4.【快速】block和inline有什麽區別？
5.【教程】談字體在網頁設計中的應用(四)實際應用，第二部分
6.裂縫
7.【教程】談字體在網頁設計中的應用(三)實際應用第壹章
8.【教程】談字體在網頁設計中的應用(二)襯線和無襯線
9.壹種新形式的Ansiart-CSS-ANSI藝術
10.【教程】關於網頁設計中字體的應用(1)字體集
11.關於這個博客Bopi的壹些改進和疑惑。
12.【笑話】我喜歡Gnus！
13.【談演示】妳不知道的HTML——從XHTML2到HTML5 (1)
14.[映射]發個自拍，啊哈。
15.[插圖]妳不知道的JavaScript“這個”
16.[映射]黑色劇場
17.讓您的網頁支持iPhone跳板圖標。
18.談談javascript開發中的MVC模式。
19.向博客說“妳好，世界”
最新評論
1.回復:[教程]談網頁設計中的字體應用(四)實際應用，第二部分
好文章，讓我受益匪淺！(nmgfrank)
2.回復:【教程】談字體在網頁設計中的應用(二)襯線和無襯線
問博主壹個問題:
壹個多語種網站，主要是中文和英文，可能會在未來擴大。如何在CSS中設置網站的默認字體順序，使網站達到最佳的可讀性和美觀性？
謝謝(Aaron@Live)
3.回復:【教程】談談字體在網頁設計中的應用(三)實際應用？上/更好/以前/壹個姓氏
我想問壹下，熊兄的電腦操作系統是什麽？我覺得我很喜歡。。。。嗯嗯~而且字體很好看。(香茅)
4.回復:【多圖嘗鮮】谷歌Chrome試吃提示。
很好。支持壹下！(雙色球)
5.回復:呵呵，突發新聞，最新壹期《流言終結者》。
好大的白板(刷子)
閱讀排行榜
1.呵呵，突發新聞，最新壹期《流言終結者》(29748)。
2.【談演示】妳不知道的HTML——從XHTML2到HTML5 (1)(5598)
3.【教程】淺談字體在網頁設計中的應用(二)襯線和無襯線(5219)
4.[映射]發個自拍啊哈哈(5069)
5.【教程】淺談字體在網頁設計中的應用(1)字體集(4938)
6.[插圖]妳不知道的JavaScript“這個”(4200)
7.【教程】談網頁設計中的字體應用(三)實際應用第壹部分(3996)
8.【教程】談網頁設計中的字體應用(四)實際應用(3901)
9.關於這個博客Bopi (3630)的壹些改進和疑問
10.[Quicky] block和inline有什麽區別？(3329)
評論排行榜
1.關於這個博客Bopi (59)的壹些改進和疑問
2.【教程】談字體在網頁設計中的應用(1)字體集(53)
3.[映射]發個自拍啊哈哈(51)
4.[插圖]妳不知道的JavaScript“這個”(49)
5.【談演示】妳不知道的HTML——從XHTML2到HTML5 (1)(38)
6.【快速】block和inline有什麽區別？(38)
7.【教程】談字體在網頁設計中的應用(2)襯線和無襯線(37)
8.向博客說“妳好，世界”( 32)
9.[Express][Mapping]ANSI Art-CSS-ANSI Art的新形式(28)
10.【教程】關於字體在網頁設計中的應用(3)實際應用(27)
版權？2009年棕熊
棕熊的博客主題《搖滾的力量》
提醒壹下，這個主題沒有針對IE6或更早的瀏覽器進行優化。所以如果妳還在使用它，為了妳自己的利益，請使用Firefox。
網上找的，看不懂。也許對妳有幫助。