你可能不知道的font

對于字體的認識一直有一個誤區(qū):
我們可能一直認為font-family是某一種字體,實際上百新,它指的是一個字體的系列企软。
比如說Times,它實際上是多種變形的一個組合饭望。包括仗哨,TimesRegular,TimesBold铅辞,TimesItalic厌漂,TimesOblique,TimesBoldItalic斟珊,TimesBoldOblique等苇倡。

除了各種特定的字體系列外,CSS還定義了5種通用的字體系列

  • Serif字體
    Serif是有襯線字體囤踩,意思是在字的筆畫開始旨椒、結(jié)束的地方有額外的裝飾,而且筆畫的粗細會有所不同堵漱。css權(quán)威指南上的解釋是說综慎,字體成比例,上下有短線勤庐。
    如果字體中的所有字符根據(jù)其不同大小有不同的寬度示惊,則稱該字體是成比例的好港。
    Serif的字體容易辨認,因此易讀性高涝涤。對于中文字體而言媚狰,最適合作為正文的有襯線字體是宋體。對于英文而言阔拳,常用的是Times New Roman

  • Sans-serif字體
    Sans-serif是無襯線字體崭孤。與襯線字體相反,這種字體通常是機械的和統(tǒng)一線條的糊肠,它們往往擁有相同的曲率辨宠,筆直的線條,銳利的轉(zhuǎn)角货裹。無襯線字體會比較醒目嗤形,但是在行文閱讀的情況下并不是很容易辨認。
    中文里弧圆,黑體赋兵,幼圓搔预,雅黑就屬于無襯線字體。
    英文里拯田,Arial,Tahoma就是常用的無襯線字體吭产。

一張圖區(qū)分襯線字體和無襯線字體
  • Monospace字體
    Monospace字體是不成比例的鸭轮。它通常用于模擬打字機打出的文本。老式的點陣機的輸出邑蒋,甚至是更老式的視頻顯示終端吞鸭。采用這些字體覆糟,每個字符寬度相等,所以小寫的i和小寫的m有一樣的寬度滩字。他們可能有襯線也可能沒有襯線御吞。
    判別這種字體的唯一標(biāo)準(zhǔn)就是等寬陶珠。
    Monospace字體的例子包括Courier享钞,Courier New,Andale Mono
Monospace字體
  • Cursive字體
    這些字體試圖模仿人的手寫體暑脆。通常有曲線和sedf字體中沒有的筆劃裝飾組成狐肢。比如,Comic Sans份名,Author等
Cursive字體
  • Fantasy字體
    這些字體無法用任何特征來定義僵腺,只有一點是確定的,那就是我們無法很容易地將其歸到任何一種其他字體想邦。比如,Western鹰椒,Woodblock呕童,Klingon
Fantasy字體

理論上來說,用戶安裝的任何字體都應(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)]有匹配到字體,那么就會去尋找候選字體秦爆。

如果沒有候選字體,用戶代理將會為給定的通用字體選擇一個默認字體。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末精刷,一起剝皮案震驚了整個濱河市蔗候,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌锈遥,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,695評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件丽惶,死亡現(xiàn)場離奇詭異钾唬,居然都是意外死亡,警方通過查閱死者的電腦和手機抡秆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評論 3 399
  • 文/潘曉璐 我一進店門儒士,熙熙樓的掌柜王于貴愁眉苦臉地迎上來檩坚,“玉大人诅福,你說我怎么就攤上這事睹酌。” “怎么了憋沿?”我有些...
    開封第一講書人閱讀 168,130評論 0 360
  • 文/不壞的土叔 我叫張陵辐啄,是天一觀的道長。 經(jīng)常有香客問我壶辜,道長,這世上最難降的妖魔是什么抵怎? 我笑而不...
    開封第一講書人閱讀 59,648評論 1 297
  • 正文 為了忘掉前任反惕,我火速辦了婚禮,結(jié)果婚禮上姿染,老公的妹妹穿的比我還像新娘秒际。我一直安慰自己,他們只是感情好娄徊,可當(dāng)我...
    茶點故事閱讀 68,655評論 6 397
  • 文/花漫 我一把揭開白布寄锐。 她就那樣靜靜地躺著,像睡著了一般锐峭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上援雇,一...
    開封第一講書人閱讀 52,268評論 1 309
  • 那天椎扬,我揣著相機與錄音具温,去河邊找鬼铣猩。 笑死,一個胖子當(dāng)著我的面吹牛达皿,可吹牛的內(nèi)容都是我干的贿肩。 我是一名探鬼主播,決...
    沈念sama閱讀 40,835評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼汤功,長吁一口氣:“原來是場噩夢啊……” “哼溜哮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起茂嗓,我...
    開封第一講書人閱讀 39,740評論 0 276
  • 序言:老撾萬榮一對情侶失蹤在抛,失蹤者是張志新(化名)和其女友劉穎萧恕,沒想到半個月后刚梭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體朴读,經(jīng)...
    沈念sama閱讀 46,286評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡走趋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,375評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了氮唯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,505評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡惩琉,死狀恐怖瞒渠,靈堂內(nèi)的尸體忽然破棺而出良蒸,到底是詐尸還是另有隱情伍玖,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布串纺,位于F島的核電站仔燕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏晰搀。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,873評論 3 333
  • 文/蒙蒙 一杆逗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧罪郊,春花似錦尚洽、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽裁眯。三九已至闽铐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間勃教,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評論 1 272
  • 我被黑心中介騙來泰國打工污抬, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人壕吹。 一個月前我還...
    沈念sama閱讀 48,921評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像耳贬,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子咒劲,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,515評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 學(xué)習(xí)CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,066評論 0 1
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素腐魂;行內(nèi)(內(nèi)聯(lián)、inline-level)元素削樊。 塊元素的...
    饑人谷_小侯閱讀 2,014評論 1 4
  • http://www.cnblogs.com/duanhuajian/archive/2013/01/31/288...
    ssRice閱讀 2,242評論 0 6
  • 一、概念 參考網(wǎng)頁字體Serif和Sans-serif的區(qū)別及瀏覽器字體的設(shè)置CSS Font知識整理總結(jié) 1.F...
    合肥黑閱讀 6,295評論 0 12
  • 請各位讀者添加一下作者的微信公眾號迅脐,以后有新的文章,將在微信公眾號直接推送給各位谴蔑,非常感謝。 如果您覺得這篇文章還...
    MR_LIXP閱讀 2,823評論 1 9