對于字體的認識一直有一個誤區(qū):
我們可能一直認為font-family是某一種字體,實際上百新,它指的是一個字體的系列企软。
比如說Times,它實際上是多種變形的一個組合饭望。包括仗哨,TimesRegular,TimesBold铅辞,TimesItalic厌漂,TimesOblique,TimesBoldItalic斟珊,TimesBoldOblique等苇倡。
除了各種特定的字體系列外,CSS還定義了5種通用的字體系列
Serif字體
Serif是有襯線字體囤踩,意思是在字的筆畫開始旨椒、結(jié)束的地方有額外的裝飾,而且筆畫的粗細會有所不同堵漱。css權(quán)威指南上的解釋是說综慎,字體成比例,上下有短線勤庐。
如果字體中的所有字符根據(jù)其不同大小有不同的寬度示惊,則稱該字體是成比例的好港。
Serif的字體容易辨認,因此易讀性高涝涤。對于中文字體而言媚狰,最適合作為正文的有襯線字體是宋體。對于英文而言阔拳,常用的是Times New RomanSans-serif字體
Sans-serif是無襯線字體崭孤。與襯線字體相反,這種字體通常是機械的和統(tǒng)一線條的糊肠,它們往往擁有相同的曲率辨宠,筆直的線條,銳利的轉(zhuǎn)角货裹。無襯線字體會比較醒目嗤形,但是在行文閱讀的情況下并不是很容易辨認。
中文里弧圆,黑體赋兵,幼圓搔预,雅黑就屬于無襯線字體。
英文里拯田,Arial,Tahoma就是常用的無襯線字體吭产。
- Monospace字體
Monospace字體是不成比例的鸭轮。它通常用于模擬打字機打出的文本。老式的點陣機的輸出邑蒋,甚至是更老式的視頻顯示終端吞鸭。采用這些字體覆糟,每個字符寬度相等,所以小寫的i和小寫的m有一樣的寬度滩字。他們可能有襯線也可能沒有襯線御吞。
判別這種字體的唯一標(biāo)準(zhǔn)就是等寬陶珠。
Monospace字體的例子包括Courier享钞,Courier New,Andale Mono
- Cursive字體
這些字體試圖模仿人的手寫體暑脆。通常有曲線和sedf字體中沒有的筆劃裝飾組成狐肢。比如,Comic Sans份名,Author等
- Fantasy字體
這些字體無法用任何特征來定義僵腺,只有一點是確定的,那就是我們無法很容易地將其歸到任何一種其他字體想邦。比如,Western鹰椒,Woodblock呕童,Klingon
理論上來說,用戶安裝的任何字體都應(yīng)該屬于以上某個系列奸汇,但是也有可能有例外往声,不過這種例外并不多。
** 在這里不得不提的是瀏覽器的默認字體**
瀏覽器都會有默認的一個字體系列浩销,在代碼沒有設(shè)置字體類型的時候,就會以默認的字體系列展示塘雳。眾所周知,在中文版window下败明,IE,Chrome妻顶,F(xiàn)irefox的默認中文字體都是中易宋體。因此當(dāng)字體系列名稱為serif沸呐,sans-serif呢燥,monospace均使用中易宋體字體庫。
MAC OS X下瀏覽器的默認中文字體是華文黑體叛氨。
要注意的是,在設(shè)置font-family的時候要以字體系列名稱(generic-family)比如屁置,serif仁连,這樣的結(jié)尾,因為在generic-family后面設(shè)置的字體名稱是不會生效的饭冬。
比如:
font-family:arial,sans-serif,Simsun;
font-family:Simsun,sans-serif;
以上兩個font-family來看,如果瀏覽器的默認字體是微軟雅黑昌抠。第一個會以微軟雅黑來展示,第二個會以宋體來展示裁厅。
原因就是因為第一個設(shè)置在sans-serif后面的宋體是失效的侨艾。
關(guān)于字體的屬性
-
指定字體類型
如果你希望文檔使用一種無襯線字體,但是你并不關(guān)心唠梨,到底是用了哪一種字體
那么你的代碼可以這樣寫body{font-family:sans-serif;}
這樣的話,用戶代理會自己選擇一個無襯線字體插龄,并將其運用到body元素上科展。
-
指定字體名
如果你有指定的字體,那么可以直接指定字體徘跪。body{font-family:microsoft yahei;}
這樣就會將微軟雅黑應(yīng)用于body元素,如果用戶代理找不到微軟雅黑這個字體垮庐,它只能使用用戶代理默認的字體來顯示坞琴,除此之外,什么都不做剧辐。
當(dāng)然,我們也可以結(jié)合使用字體系列和字體名
body{font-family:microsoft yahei,sans-serif;}
這樣在找不到微軟雅黑字體的情況下溉奕,則會使用另一種無襯線字體忍啤。
處于這樣的考慮,就很建議在寫font-family的時候提供一個通用字體系列鳄梅,這樣,就提供了一個在找不到預(yù)設(shè)字體時候的備選方案卫枝。書寫的方法是讹挎,確定這些字體的優(yōu)先順序,然后用逗號分隔筒溃。
比如:
body{font-family:Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;}
引號的使用
上面的例子中,你可能已經(jīng)注意到了單引號浑测。
當(dāng)一個字體名中有一個或者多個空格的時候或者字體名包含符號的時候,使用引號迁央。
在css2.1中有規(guī)范說,包含符號的字體名并不一定要使用引號讹语,但這是一個推薦的做法,類似于“最佳實踐”顽决。加粗
大家都知道字體的加粗用的是font-weight
fongt-weight可以取值100-900导匣,這些關(guān)鍵字映射的是字體設(shè)計時為字體指定的9級粗度。
要注意的是贡定,如果在字體設(shè)計的時候有指定粗度等級,那么在樣式表里寫font-weight的值能產(chǎn)生粗細效果进每。但是如果,字體設(shè)計的時候沒有指定粗度等級田晚,那么100,200,300,400都將映射到同樣的較細變形。700,800,900都將映射到同樣的較粗變形贤徒。這樣問題在實際運用中經(jīng)常會遇到汇四。
400對應(yīng)于normal,700對應(yīng)于bold通孽。其他數(shù)值不對應(yīng)于任何變形名。字體大小
百分數(shù)值和em的作用一樣100%相當(dāng)于1em互捌,都是相對于父元素的大小來計算行剂。
字體大小在繼承的時候只繼承具體計算值而不是百分數(shù)。
用百分比來控制字體的缺陷是腌巾,因為用戶代理在計算出字體大小之后會進行取整操作或者保留一些小數(shù)的操作,在百分比計算過多的情況下澈蝙,字體縮放可能不可控吓坚。風(fēng)格和變形
---風(fēng)格font-style---
italic(斜體)文本和Oblique(傾斜)文本的區(qū)別
斜體是一種單獨的字體風(fēng)格凌唬,對每個字母的結(jié)構(gòu)有了一些小改動漏麦。傾斜是基于豎直文本的一個傾斜版本撕贞,并沒有改動字體結(jié)構(gòu)。
在沒有italic字體但是有Oblique字體的情況下捏膨,會采用后者食侮。但是如果有italic字體但是沒有Oblique字體的情況下,用戶代理只會用豎直文本計算出一個傾斜版本來生成Oblique字體链快。
---變形font-variant---
small-caps要求使用小型大寫字母文本眉尸。
這個與text-transform:uppercase類似。之所以要用一個字體屬性來聲明small-caps噪猾,原因是有些字體在設(shè)計的時候有特定的small-caps字體。如果不存在這種字體丝蹭,用戶代理會自己縮放大寫字母來創(chuàng)建一個small-caps字體坪蚁。拉伸和調(diào)整字體
font-stretch,允許將字體拉伸
font-size-adjust巫橄,允許在首選在字體不可用時茵典,對替換字體進行縮放。
這兩個屬性已經(jīng)在css2.1被去除,因為這兩個屬性筹我,雖然在規(guī)范中存在多年,但是沒有一個瀏覽器實現(xiàn)了它們蔬蕊。字體匹配
css允許匹配字體系列哥谷,加粗,變形猜扮,所有這些都是通過字體匹配完成的监婶。
用戶代理匹配字體的步驟大致如下:
1、用戶代理構(gòu)建字體屬性數(shù)據(jù)庫惑惶,一般的這將是用戶機器上安裝的所有字體,以及用戶代理的內(nèi)置字體等僵控。如果用戶代理遇到兩種相等的字體鱼冀,忽略其中一個。
2泛烙、用戶代理取得應(yīng)用了字體屬性的元素,構(gòu)建字體屬性列表蔽氨,基于這個列表帆疟,用戶代理先進行第一次篩選,如果完全匹配自赔,則使用這個字體柳琢。匹配順序:根據(jù)font-style匹配润脸,匹配italic和Oblique字體他去;根據(jù)font-variant匹配,匹配small-caps字體爆价;根據(jù)font-weight匹配媳搪;根據(jù)font-size匹配
如果經(jīng)過以上兩步?jīng)]有匹配到字體,那么就會去尋找候選字體秦爆。
如果沒有候選字體,用戶代理將會為給定的通用字體選擇一個默認字體。
- font-face規(guī)則
關(guān)于font-face的介紹:Iconfont玩法