導(dǎo)讀

• 計(jì)算機(jī)系統(tǒng)字體
• CSS字體家族
• font屬性是什么
• font-family屬性
• @font-face規(guī)則
• font-size屬性
• font-weight屬性
• line-height屬性
• font-style屬性
• font-variant屬性
• font屬性

計(jì)算機(jī)系統(tǒng)字體

計(jì)算機(jī)字體：也叫”系統(tǒng)字體“。是計(jì)算機(jī)操作系統(tǒng)內(nèi)置的一套用于顯示系統(tǒng)文字的電子數(shù)據(jù)文件。這些電子數(shù)據(jù)文件主要使用點(diǎn)陣圖片或矢量的方法描述了字符的輪廓字形。

英文系統(tǒng)字體文件：通常只描述了26個(gè)字母和10個(gè)阿拉伯?dāng)?shù)字及英文標(biāo)點(diǎn)符號的字形輪廓，總字符數(shù)量非常有限，故英文系統(tǒng)字體文件的體積非常小，有些甚至只有10k左右。

中文系統(tǒng)字體文件：通常需要描述5-6千個(gè)常用漢字、字母、數(shù)字、標(biāo)點(diǎn)符號的字形輪廓。由于中文的字?jǐn)?shù)太多，通常一個(gè)字體文件動(dòng)輒5-6MB，甚至有的中文字體文件達(dá)到10MB以上。

字體家族：字體家族指計(jì)算機(jī)系統(tǒng)字體的變體的集合。通常，每一種字體都有多種變體。比如標(biāo)準(zhǔn)體、粗體、斜體、粗斜體等變體。

字體風(fēng)格：通常，計(jì)算機(jī)操作系統(tǒng)內(nèi)置多種風(fēng)格的字體。比如、襯線字體、非襯線字體、等寬字體、印刷字體、手寫體、藝術(shù)字體等。

常見平臺(tái)系統(tǒng)字體

CSS字體家族

為了覆蓋計(jì)算機(jī)系統(tǒng)字體風(fēng)格多樣化的所有情況，CSS定義了五種通用字體家族：

• serif： 襯線字體。特征：有襯線，橫細(xì)豎粗。比如：Times、Georgia、New Century Schoolbook、宋體。

• San-serif：非襯線字體。特征：無襯線、筆畫寬度相等。比如：Arial、Helvetica、Gevena、Verdana、Univas、黑體、微軟雅黑、蘋方、蘋果麗黑、思源黑體等。

• cursive：手寫體。特征：模仿手寫。比如：Comic sans、Author、楷體、隸書等。

• monospace: 等寬字體。特征：所有字符等寬。比如：Courier、Consolas、Andale Mono等

• fantasy: 藝術(shù)字體。特征：沒有統(tǒng)一特征。

理論上，任何一種具體的字體都可以歸屬到上述五大類別中。雖然例外情況少見，但是如果瀏覽器無法解析字體家族的類別，那么最終結(jié)果會(huì)把把該字體歸類到藝術(shù)字體中。

在CSS中設(shè)置字體的時(shí)候，既可以指定字體家族名稱，也可以指定具體的字體名稱。

font屬性是什么

CSS Font 是 CSS 的一個(gè)模塊。它允許您定義網(wǎng)頁字體的樣式。常見的樣式包括：

• 字體家族
• @font-face規(guī)則
• 字體大小
• 字體粗細(xì)
• 字體風(fēng)格
• 行高

font-family屬性

定義：指定元素的字體名稱或字體家族名稱。

示例：火狐瀏覽器（開發(fā)者版）默認(rèn)font-family設(shè)置。

body{
  font-family: serif;
}

解釋：如果頁面不設(shè)置font-family屬性，那么頁面文本使用瀏覽器默認(rèn)的字體設(shè)置。

狐火瀏覽器的默認(rèn)設(shè)置

示例：把頁面字體設(shè)置為非襯線字體。

body{
  font-family: sans-serif;
}

解釋：使用無襯線字體顯示頁面文字，具體哪一款字體，我不要求。

示例：

body{
  font-family: Georgia, '-apple-system', 'Nimbus Roman No9 L', 'PingFang SC', 'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'ST Heiti', 'sans-serif';
}

說明

body{
  font-family: 英文字體, 蘋果中文字體, window中文字體，通用非襯線字體;
}

設(shè)置字體的規(guī)則

1. 英文字體在前，中文字體在后
2. 特殊字體在前，通用字體在后
3. 如果字體名稱含有特殊字符，建議加引號(如果沒有引號，用戶代理可能會(huì)忽略那個(gè)字體名稱)。 比如：

body{
 /* 特殊字符：橫線、空格、漢字 */
  font-family: ’Microsoft Yahei‘, '微軟雅黑', 'sans-serif';
}

4. 多個(gè)字體名稱之間用逗號分隔

@font-face規(guī)則

定義：@font-face 是一條規(guī)則。使用@font-face，前端開發(fā)者可以向用戶代理的字體家族列表中添加新成員。添加之后就可以在font-family屬性值中引用；

語法：

@font-face {
  font-family: "Trickster";
  src: local("Trickster"),
       url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), 
       url("trickster-outline.otf") format("opentype"), 
       url("trickster-outline.woff") format("woff");
}

解釋

@font-face {} : 向用戶代理的家族列表中添加成員

font-family: 描述符。描述添加到字體家族列表中的字體家族名稱。

sr： 設(shè)置字體源?？梢栽O(shè)置多個(gè)源，使用逗號分隔。字體源可以指向任何URI。但是URI有同源限制。

萬全之策

@font-face {
  font-family: "Trickster";
  src: url("trickster-COLRv1.eot");
  src: url("trickster-COLRv1.eot?#iefix") format("embeded-opentype"), 
       url("trickster-outline.woff") format("woff"), 
       url("trickster-outline.ttf") format("truetype"),
         url("trickster-outline.svg#Trickster_adf_regular") format("svg");
}

font-size屬性

定義：設(shè)置頁面字體的大小。

語法

body{
  font-size:  相對值 | 絕對值；
}

使用相對單位設(shè)置font-size

• 關(guān)鍵詞: medium 默認(rèn)值
• %
• em
• rem
• vw/vh

使用絕對單位設(shè)置font-size

• px：像素。絕對單位。

用法：
在做網(wǎng)頁的時(shí)候，第一步要確定根字號大小。

html{
  font-size: 16px;  /*根字號16px*/
  font-size: 62.5% /*根字號10px*/
}

在設(shè)置頁面字號的時(shí)候，要有字號層級的意識(shí)，也就是說你需要確定：

• 頁面最大字號：最大的標(biāo)題元素
• 頁面最小字號：版權(quán)文字、補(bǔ)充說明描述性的文字
• 正文字號：一般是14px或16px

font-weight屬性

定義
定義頁面字體的粗細(xì)。字體的粗細(xì)共有9個(gè)級別。從100 - 900。

• 100 相當(dāng)于lighter
• 200
• 300
• 400 相當(dāng)于normal
• 500
• 600
• 700
• 800
• 900相當(dāng)于bolder

語法

body{
  font-weight: 關(guān)鍵詞 | 數(shù)值
}

屬性值

• normal: 正常粗細(xì)（相當(dāng)于100-400對中文有效）
• lighter: 更細(xì)
• bold： 粗（對中文有效）
• bolder：更粗（效果同bold）

line-height屬性

定義: 設(shè)置字體行高。

語法

body{
  line-height: 數(shù)字| 像素 | 關(guān)鍵詞 | 百分比
}

屬性值

• normal: 默認(rèn)值。表示正常的行高。該值是當(dāng)前元素的字號的1.4倍左右。
• px： 使用px設(shè)置行高沒有靈活性，不會(huì)自動(dòng)根據(jù)字號大小調(diào)整行高。
• 百分比：工作原理同px，不夠靈活，不會(huì)自動(dòng)根據(jù)字號調(diào)整行高。
• 數(shù)字：強(qiáng)烈推薦使用數(shù)字設(shè)置行高。數(shù)字值會(huì)根據(jù)元素的字號自動(dòng)調(diào)整行高。通常，建議行高設(shè)置為：字號的1.2 - 2倍之間。

什么是行高

111.png

行高指兩條基線之間的距離。

什么是基線
基線指一行文字底部對齊的線。
對于英文而言，四線三格本的從上向下的第三條線就是基線。
對于中文而言，好像沒有基線。

三種框

在HTML語言中，存在三種看不見的框，這三種框決定元素的高度。

• 字符框：字符框的高度由font-size決定
• 行框: 行框的高度由行高決定。
• 元素框：任何一個(gè)HTML元素都會(huì)生成一個(gè)元素框。元素框的高度等于行框高度之和。

font-style屬性

定義
用于定義字體風(fēng)格。風(fēng)格指字體是否傾斜。

語法

p{
  font-style: normal |  italic | oblique 
}

屬性值

• normal: 不傾斜。
• italic : 傾斜。表示對字體進(jìn)行傾斜處理。
• oblique: 傾斜。表示使用斜體字體顯示字符。

font-variant屬性

定義 ：定義小型大寫字母。

語法

h1{
  font-variant: normail | samll-caps ;
}

屬性值

• normal ： 正常的字符，不轉(zhuǎn)小型大寫字母。
• small-caps: 轉(zhuǎn)成小型大寫字母。

font復(fù)合屬性

定義
font復(fù)合屬性用于把多個(gè)字體屬性寫在一個(gè)聲明里。
語法

body{
  font: 粗細(xì) 傾斜  字號/行高  字體;
}

示例：

body{
  font: bold italic 字號/行高  arial, 'Pingfang SC',Microsoft Yahei','sans-serif' 
}

知識(shí)點(diǎn)

1. font-family屬性的用法（4條）
2. 設(shè)置font-size的值有幾種？

• px
• em/rem
• %
• vh/vw
• 關(guān)鍵詞

3. 行高的屬性值有幾種？哪種最好？為什么？