?????個人主頁：@花無缺
歡迎 點贊?? 收藏? 留言?? 加關注?!
本文由 花無缺 原創(chuàng)本文章收錄于專欄 【CSS】
【CSS專欄】已發(fā)布文章
??【CSS基礎認知】
??【CSS選擇器全解指南】
??CSS字體認知
文字是網(wǎng)頁界面上最常見的元素，而文字的字體、大小和文字樣式等都可以通過CSS來設置。
??字型
在 CSS 中，有五個通用字型：
-
襯線字體（Serif）- 在每個字母的邊緣都有一個小的筆觸。它們營造出一種形式感和優(yōu)雅感
特點：文字筆畫粗細不均勻，并且首尾有筆鋒裝飾
場景：報刊書籍中應用廣泛
常見該系列字體：宋體、Times New Roman
-
無襯線字體（Sans-serif）- 字體線條簡潔（沒有小筆畫）。它們營造出現(xiàn)代而簡約的外觀。
特點：文字筆畫粗細均勻，并且首尾無修飾
場景：網(wǎng)頁中大多采用無襯線字體
常見該系列字體：黑體、Arial
-
等寬字體（Monospace）- 這里所有字母都有相同的固定寬度。它們創(chuàng)造出機械式的外觀。
特點：每個字母或文字的寬度相等
場景：一般用于程序代碼編寫，有利于代碼的閱讀和編寫
常見該系列字體：Consolas、fira code
-
草書字體（Cursive）- 模仿了人類的筆跡。
-
幻想字體（Fantasy）- 是裝飾性/俏皮的字體。
所有不同的字體名稱都屬于這五個通用字體系列之一。
??Serif 和 Sans-serif 字體
在計算機屏幕上，sans-serif字體被認為比serif字體容易閱讀
一些字體的例子：
| 通用字型 | 字體名稱實例 |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
??font-family屬性
在CSS中，我們使用font-family屬性規(guī)定文本的字體。
通常 font-family 屬性應該設置多個值，以保證當瀏覽器不支持第一種字體時使用其他的備選字體。
注意: 如果字體系列的名稱超過一個字，它必須用引號，如 font family：“宋體”。
多個字體系列用一個逗號分隔指明。
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>花無缺</title>
<style>
/*設置段落p的字體為楷體,如果瀏覽器不支持則采用宋體,依次類推*/
p {
font-family: "楷體", "宋體",serif;
}
/*設置div的字體為隸書,如果不支持隸書,則采用瀏覽器默認字體*/
div {
font-family: "隸書";
}
</style>
</head>
<body>
<p>
通常font-family屬性應該設置多個值，以保證當瀏覽器不支持第一種字體時使用其他的備選字體。
</p>
<div>
如果字體系列的名稱超過一個字，它必須用引號，如font family："宋體"。
多個字體系列是用一個逗號分隔指明。
</div>
</body>
</html>
??字體樣式
屬性名：font-style
作用：用于指定斜體文本
取值：
- normal - 文字正常顯示
- italic - 文本以斜體顯示
- oblique - 文本為“傾斜”（傾斜與斜體非常相似，但支持較少）
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>花無缺</title>
<style>
p {
font-style: normal;
}
div {
font-style: italic;
}
span {
font-style: oblique;
}
</style>
</head>
<body>
<p>字體樣式</p>
<div>字體樣式</div>
<span>字體樣式</span>
</body>
</html>
??字體大小
屬性：font-size
作用：設置字體的大小
取值：
| 取值 | 效果 |
|---|---|
| xx-small/x-small/small/medium/large/x-large/xx-large | 把字體的尺寸設置成相對于父元素不同的尺寸，從xx-small到xx-large 默認值:medium。 |
| smaller | 把 font-size 設置為比父元素更小的尺寸 |
| larger | 把 font-size 設置為比父元素更大的尺寸 |
| px/cm/pt/in/mm | 把 font-size 設置為一個固定的尺寸 |
| % | 把 font-size 設置為基于父元素的一個百分比的大小 |
| inherit | 從父元素繼承 |
| em | 1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。因此，1em的默認大小是16px?？梢酝ㄟ^下面這個公式將像素轉換為em：px/16=em |
| rem | 1rem = 1HTML字號大小 |
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>花無缺</title>
<style>
body {
color: blue;
}
.text2 {
font-size: 30px;
}
.text3 {
font-size: 2em;
}
.text4 {
font-size: larger;
}
.text5 {
font-size: 50%;
}
</style>
</head>
<body>
<p class="text1">花無缺，這是瀏覽器默認字體大小</p>
<p class="text2">這是使用px設置的字體大小，大小為30px</p>
<p class="text3">這是使用em設置的字體大小，大小為2em,相當于32px</p>
<p class="text4">這是使用small設置的字體大小</p>
<p class="text5">這是使用百分比設置的字體大小,是父元素body16px的50%,相當于8px</p>
</body>
</html>
??字體粗細
屬性名：font-weight
作用：設置字體的粗細
取值：
| 值 | 描述 |
|---|---|
| normal | 默認值。定義標準的字符。 |
| bold | 定義粗體字符。 |
| bolder | 定義更粗的字符。 |
| lighter | 定義更細的字符。 |
| 100 200 300 400 500 600 700 800 900 | 定義由細到粗的字符。400 等同于 normal，而 700 等同于 bold。 |
| inherit | 規(guī)定應該從父元素繼承字體的粗細。 |
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>花無缺</title>
<style>
.text1 {
font-weight: bold;
}
.text2 {
font-weight: lighter;
}
.text3 {
font-weight: 900;
}
</style>
</head>
<body>
<p class="text1">字體粗細</p>
<p class="text2">字體粗細</p>
<p class="text3">字體粗細</p>
<!-- <p class="text4">字體粗細</p> -->
</body>
</html>
注意：
- 不是所有字體都提供九種粗細，因此部分取值頁面中無變化
??小型大寫字母字體
屬性名：font-variant
作用：設置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小
取值：
| 值 | 描述 |
|---|---|
| normal | 默認值。瀏覽器會顯示一個標準的字體。 |
| small-caps | 瀏覽器會顯示小型大寫字母的字體。 |
| inherit | 規(guī)定應該從父元素繼承 font-variant 屬性的值。 |
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>花無缺</title>
<style>
.nomal {
font-variant: normal;
}
.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<p class="nomal">This is a article.</p>
<p class="small">This is a article.</p>
</body>
</html>
??字體復合屬性
屬性名：font
作用：將字體的各種屬性寫在一起
取值：font:style weight size family;
例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>花無缺</title>
<style>
/*將div的字體設置為斜體,粗細為700,大小為20px,字體為華文楷體*/
div {
font: italic 700 20px 華文楷體;
}
</style>
</head>
<body>
<div>字體復合屬性</div>
</body>
</html>
使用 font 時只能省略前兩個屬性（style、weight），如果省略了，相當于設置了默認值，而且必須按照這個順序寫。
好了，CSS字體相關的知識就到這里了，更多CSS知識都將更新在【CSS專欄】中，歡迎大家訂閱關注，一起學習進步！文章來源：http://www.zghlxwxcb.cn/news/detail-448833.html
??歡迎
關注我的博客：來和我一起成長吧!
??往期精彩好文：
??【HTML基礎知識詳解】
??【CSS基礎認知】
你們的點贊?? 收藏? 留言?? 關注?
是我持續(xù)創(chuàng)作，輸出優(yōu)質(zhì)內(nèi)容的最大動力！
謝謝！文章來源地址http://www.zghlxwxcb.cn/news/detail-448833.html
到了這里，關于【CSS】CSS字體樣式【CSS基礎知識詳解】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
