最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

網(wǎng)頁設計中的serif和sans-serif字體應用_經(jīng)驗交流

來源:懂視網(wǎng) 責編:小采 時間:2020-11-27 18:55:34
文檔

網(wǎng)頁設計中的serif和sans-serif字體應用_經(jīng)驗交流

網(wǎng)頁設計中的serif和sans-serif字體應用_經(jīng)驗交流:Howdy, 大家好,又是我~ 上一次我們簡單的談了一下font set和一些要注意的基本問題。今天我們繼續(xù)字體這一話題,深入講講上次提到的通用字體族。首先是最常用的 serif 和 sans-serif 這兩個通用字體族。 - serif Serif 在印刷學上指襯線字
推薦度:
導讀網(wǎng)頁設計中的serif和sans-serif字體應用_經(jīng)驗交流:Howdy, 大家好,又是我~ 上一次我們簡單的談了一下font set和一些要注意的基本問題。今天我們繼續(xù)字體這一話題,深入講講上次提到的通用字體族。首先是最常用的 serif 和 sans-serif 這兩個通用字體族。 - serif Serif 在印刷學上指襯線字

Howdy, 大家好,又是我~

上一次我們簡單的談了一下font set和一些要注意的基本問題。今天我們繼續(xù)字體這一話題,深入講講上次提到的“通用字體族”。首先是最常用的 serif 和 sans-serif 這兩個通用字體族。

- serif

Serif 在印刷學上指襯線字體。為了理解襯線字體的概念,大家先看幾個典型的襯線字體的例子:

My
Georgia字體 King
Times New Roman 字體 漢字
宋體

單詞 My 中的字母 “M”上下方突出的短橫線就是所謂的襯線。同樣,y的上方,K的上下,i 和n的下方也都有襯線,所以這些字體都被稱為襯線字體。但襯線字體并不一定都有襯線,比如上面例子中的g, “漢”和“字”。事實上,只要滿足末端加強原則的字體都是襯線字體。所謂的末端加強,就是使用襯線或粗細變化,使字體筆畫的末端得到加強,以改善小號文字的可讀性。比如上面例子中的y的下半部分,還有宋體的中文字符,都是采取加粗筆劃的末端來達到末端加強的效果。除此之外,很多襯線字體還會采用加強豎向筆劃(比如宋體中豎比橫粗),夸張字形(最明顯的就是小寫g這個字符了)等方法進一步改善它的可讀性。

因為襯線字體的可讀性非常好,所以它應用的最多的地方也正是出版物或者印刷品的正文內(nèi)容等以大段文字作為表現(xiàn)形式的作品上。

比較常見的襯線字體有 Georgia, Garamond, Times New Roman, 中文的宋體等等。

- sans-serif

襯線字體以外的一切字體都是無襯線字體。sans- 這個前綴其實是法語,所以比較標準的發(fā)音是 /san/ 而不是 /sans/。它的意思是“沒有”。所以sans-serif就是無襯線字體。

Gut
Verdana 字體 Might
Arial 字體 書寫
幼圓

無襯線字體比較圓滑,線條一般粗細均勻。比較適合用作藝術(shù)字、標題等。因為無襯線字體通常粗細比較均勻,所以在小字體顯示的時候,可讀性會降低,容易引起視覺疲勞。

常見的無i襯線字體有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圓、隸書等等。

- 什么時候用serif?什么時候用sans-serif?

從上面的介紹中,我們可以知道,襯線字體之所以被設計出來,就是為了用作正文內(nèi)容的。大家可以隨手抄起一張報紙,看看上面的文章是不是宋體。如果手頭有外語讀物的話,也可以翻來看一下,正文都是襯線字體。同樣大小的襯線字體比無襯線字體容易閱讀:

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

然后大家可以把報紙翻到頭版頭條——標題一般都會是各種粗細一致的綜藝體或者是中黑體。英文報紙的標題大多也是無襯線的。這個就是應用他們的基本原則。

但是大家可以看很多網(wǎng)站——它們的正文內(nèi)容恰恰是無襯線的Tahoma, Verdana, Arial等等。中文網(wǎng)站可能因為字體的局限性,仍舊使用宋體居多,但查看它們的樣式表,就會發(fā)現(xiàn)候補字體也大多是無襯線的。這樣是不是不好呢?

當然不是。

襯線字體的可讀性其實僅僅體現(xiàn)在小字體上。大家可以拿出剛剛抄起來的報紙,和你顯示器上的文字比較一下——你會發(fā)現(xiàn),報紙上的文字比顯示器上的文字整整小一圈。實際上,新明晚報上通常大小的宋體文字,在點距為0.25mm的高質(zhì)量液晶顯示器上,大小大約只相當于10px ~ 11px的顯示字符;在普通的液晶顯示器(點距一般為0.28mm)上,甚至可能只相當于8px~10px的顯示字符。

這個就是 print media 和 screen media 的最大區(qū)別。印刷業(yè)為了節(jié)約成本,因此會盡可能的在保證可讀的情況下,把文字印小。顯示器不存在這樣的成本,因此可以顯示比較大的文字。在文字足夠大的情況下,無襯線字體也是同樣可讀的。而且因為無襯線字體通常有藝術(shù)性,因此在顯示器上顯示通常比較賞心悅目;而且無襯線字體種類比襯線字體多得多,因此選擇余地也很大。所以大家盡可以放心去使用。但是必須保證以下原則:凡是使用無襯線字體的,必須保證其在正文內(nèi)容中的可讀性。否則,使用襯線字體。換而言之,如果你要使用無襯線字體顯示網(wǎng)頁的正文內(nèi)容,那么,你必須把它的font-size設的足夠大,以保證用戶能輕易閱讀。

至于具體將font-size 設多大,是因字體而異的。12px 對于 Verdana 來說已經(jīng)完全足夠,但是要能輕易的閱讀隸書,可能需要24px以上才行。

對于11px以下的英文字體,推薦使用襯線字體。至于中文,因為顯示器的硬件限制,不論是什么字體,都不推薦使用11px以下的font-size來顯示。

- 其他的通用字體族

印刷學中,除了serif 和 sans-serif 之外,通常還有 monospace 等寬字體、scripts 手寫體(比如花體)、blackletter 鉛字體(也叫 gothic 哥特體。嚴格的說,很多常用的serif字體其實是gothic字體)、ornamental 裝飾體(那些在文字筆劃上或者周圍有裝飾花紋的字體。很多中世紀書籍上很常見。如果腦殘體真的成了字體,那么應該可以算裝飾體吧……)和 symbol 符號字體(比如有名的wedding123……)。

不過CSS對通用字體族的定義有點不一樣。除了serif 和 sans-serif 之外,CSS還允許以下幾個通用字體族:
  • monospace 等寬字體

    所謂的等寬字體,是指每個字符寬度都一致的字體。一個著名的例子就是 Courier New 字體。因為字符寬度一致,所以特別容易對齊,能快速精確的定位到某行某列,因此經(jīng)常用來顯示代碼。

    要注意的是,一個等寬字體同時也可以是一個襯線(或者非襯線)字體。比如 Courier New 這個字體也可以看作是一個serif(嚴格的說是gothic)字體。

  • cursive 書寫體:相當于印刷學中的手寫體。中文的華文行草就是這樣的一個字體。
  • fantasy 夢幻體:相當于印刷學中的裝飾體。非常少見的一種字體,基本沒有參考價值。
  • 要注意的是,CSS中不支持symbol字體族。使用symbol類的字體請用圖片。

    - 一些你不知道的事情

  • 中文的黑體其實是襯線字體。大家可以看下面的圖:

    黑體

    大家可以看到,其實黑體的確是經(jīng)過末端加強的,所以很多印刷品的正文也會使用黑體。像這種使用溫和的末端加強,筆劃粗細大致一致的字體,其實也可以被稱為petit-serif/小襯線體。(那些類似于宋體一樣有顯著末端加強,并且筆劃粗細有明顯區(qū)別的,通常稱為slab-serif/雕版襯線體)

    只是很遺憾,因為諸多的硬件原因,在顯示器上實際顯示黑體時,大家還是可以把它看作一個無襯線字體

  • Italic 不是斜體

    斜體是oblique。Italic 顧名思義,是意大利體。Italic 是一種書寫方式(calligraphy script),而oblique 是一種印刷樣式,兩者是不同的東西。中學英語習字冊交授的書寫方式就是意大利體。除了意大利體外,比較流行的書寫方式還有法蘭西體(就是傳說中的花體字,正名是French Script)、哥特體、亞伯拉罕體等等。

    很多考究的字體都會為意大利體定制一套特殊的字體,而不是簡單的顯示成斜體。比如下面的圖片里,三行文字都是Georgia字體。第一行普通;第二行是oblique,也就是斜體;第三行才是真正的italic意大利體。

    Italic and Oblique

    大家仔細看第三行的a, l, i, e 等字母——很明顯的看出區(qū)別了吧。實際上,Georgia Italic 和 Georgia 在系統(tǒng)內(nèi)是兩個不同的字體文件。當我們指定 font-style: italic 的時候,系統(tǒng)就會自動搜尋是不是存在Georgia Italic這個字體,并嘗試使用這個字體來顯示文字內(nèi)容。

    按理說當我們用 font-style: oblique 指定字體樣式時,瀏覽器不應該去尋找Georgia Italic這個字體,而直接將Georgia字體傾斜顯示,所以理論上應該得到圖中第二行文字的效果??上?,連W3C在CSS規(guī)范中,自己的參考實現(xiàn)也說是“如果UA不能正確顯示italic 和oblique, 可以使用italic來代替oblique顯示”,所以幾乎沒有瀏覽器實現(xiàn)區(qū)分italic 和oblique。哪怕你設置的font-style是oblique, 你也會發(fā)現(xiàn),瀏覽器顯示的也還是italic

  • 今天就到這里了。下一講我會談談如何構(gòu)建一個合理的font-family,并推薦幾個使用的字體組合給大家。那么,再見了喲

    聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    網(wǎng)頁設計中的serif和sans-serif字體應用_經(jīng)驗交流

    網(wǎng)頁設計中的serif和sans-serif字體應用_經(jīng)驗交流:Howdy, 大家好,又是我~ 上一次我們簡單的談了一下font set和一些要注意的基本問題。今天我們繼續(xù)字體這一話題,深入講講上次提到的通用字體族。首先是最常用的 serif 和 sans-serif 這兩個通用字體族。 - serif Serif 在印刷學上指襯線字
    推薦度:
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top