整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
定義字體系列，大小，粗細和文字樣式
p {
font: font-style font-weight font-size/line-height font-family;
}
不能更換順序，必須保留font-size和font-family
定義文本外觀，如：文本顏色，對齊文本，裝飾文本，文本縮進，行間距等
節(jié)我們來講字體樣式，之前我們學(xué)習(xí) HTML 的時候?qū)W過一些用于字體加粗、傾斜的標(biāo)簽，但是使用標(biāo)簽來實現(xiàn)的效果肯定沒有我們通過 CSS 中的樣式來的方便。
接下來我們會給大家介紹下面這幾個屬性的使用：
通過學(xué)習(xí)上述這幾個 CSS 屬性，我們可以實現(xiàn)給 HTML 中的文字設(shè)置字體、大小、風(fēng)格、傾斜、加粗等。
font-family 屬性用于設(shè)置一個元素的字體，字體就是像宋體、楷體等。
通過 font-family 屬性，可以同時聲明多種字體，字體之間使用逗號分隔。根據(jù)字體的調(diào)用原則，會優(yōu)先調(diào)用第一種字體，如果沒有找到，則會嘗試調(diào)用下一個字體，如果都找不到則調(diào)用默認字體。
示例：
例如為下面這個 <p> 標(biāo)簽中的文本設(shè)置字體：
<p>Hello，俠課島</p>
可以使用標(biāo)簽選擇器，然后在 font-family 屬性中設(shè)置：
p{
font-family:'Times New Roman','sans-serif', 宋體, 楷體;
}
在聲明字體時，我們應(yīng)該分別聲明英文字體和中文字體，且英文字體的聲明應(yīng)該在中文字體之前。因為絕大部分中文字體里包含英文字母，但是不是很好看，而英文字體里不包含中文字符。所以如果我們不希望用中文字體來顯示英文，就一定要記得先聲明英文字體。先聲明的會先調(diào)用。
常用英文字體：Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。
常用中文字體：宋體 SimSun、黑體 SimHei、微軟雅黑 Microsoft YaHei、仿宋 FangSong、楷體 KaiTi 等。
font-size 屬性用于設(shè)置字體的大小，常用的單位為 px，即像素。
px 是 Pixel 的縮寫，是可以在數(shù)字顯示設(shè)備上顯示和表示的數(shù)字圖像或圖形的最小單位。像素是數(shù)字圖形中的基本邏輯單元，像素也稱為圖像元素。
示例：
例如我們來看下面這段代碼（其他HTML結(jié)構(gòu)代碼沒有展示出來）：
<body>
<h1>斷句</h1>
<p>近水樓臺先得月，向陽花木易為春。</p>
</body>
在瀏覽器中的演示效果為：
然后此時，我們通過 font-size 來將其中的 <h1> 標(biāo)簽中的字體設(shè)置為 14px，<p> 標(biāo)簽中的字體設(shè)置為 20px：
h1{
font-size: 14px;
}
p{
font-size: 20px;
}
在瀏覽器中演示效果就變?yōu)榱讼聢D所示：
很明顯，通過 CSS 中的 font-size 屬性可以設(shè)置任意標(biāo)簽中的字體大小。
font-style 設(shè)置字體的風(fēng)格，可以將字體設(shè)置成斜體、傾斜或正常字體。斜體字體通常定義為字體系列中的一個單獨的字體。
此屬的常用屬性值如下所示：
示例：
將下面三個 <p> 中的內(nèi)容設(shè)置為不同的字體風(fēng)格，可以使用類選擇器：
<body>
<p class="normal">將字體設(shè)置為標(biāo)準(zhǔn)的字體樣式</p>
<p class="italic">將字體設(shè)置為斜體的字體樣式</p>
<p class="oblique">將字體設(shè)置為傾斜的字體樣式</p>
</body>
CSS 樣式代碼：
.normal {
font-style:normal;
}
.italic {
font-style:italic;
}
.oblique {
font-style:oblique;
}
在瀏覽器中演示效果如下所示：
font-weight 屬性用于設(shè)置顯示元素的文本中所用的字體加粗。
此屬性的常用屬性值如下所示：
示例：
將下面的 <p> 標(biāo)簽的粗細分別設(shè)置為 normal、bold、700、900：
<p class="w1">將字體設(shè)置為:normal</p>
<p class="w2">將字體設(shè)置為:bold</p>
<p class="w3">將字體設(shè)置為:700</p>
<p class="w4">將字體設(shè)置為:900</p>
CSS 樣式代碼：
.w1 {
font-weight: normal;
}
.w2 {
font-weight: bold;
}
.w3 {
font-weight: 700;
}
.w4 {
font-weight: 900;
}
在瀏覽器中演示效果：
font 屬性用于在一個聲明中設(shè)置所有的字體屬性，各個屬性之間使用空格隔開。也就是上述幾個屬性的綜合簡寫屬性。
如果我們使用 font 屬性來設(shè)置字體樣式，設(shè)置順序分別是：font-style、font-variant、font-weight、 font-size/line-height、font-family。可以不設(shè)置其中的某個值，未設(shè)置的屬性會使用其默認值。
示例：
<p class="p1">草長鶯飛二月天，拂堤楊柳醉春煙。</p>
<p class="p2">留連戲蝶時時舞，自在嬌鶯恰恰啼。</p>
CSS 樣式代碼：
.p1{
font: italic bold 20px 'sans-serif', 楷體;
}
.p2{
font: bold 14px 'Arial', 宋體;
}
在瀏覽器中演示效果：
注意，在使用 font 屬性時，font-size 和 font-family 的值是必需的，如果沒有設(shè)置這兩個屬性值，則不會生效。
本節(jié)學(xué)習(xí)的幾個屬性值都是 CSS 中最基本的屬性，特別是 font-size 屬性，我們會經(jīng)常用到。一般瀏覽器會有一個默認的字體大小，例如 16px，而編寫頁面時如果我們希望大部分頁面內(nèi)容正文字體大小為 12px 或 14px，就會在 <body> 標(biāo)簽上設(shè)置，這樣就不用一個個標(biāo)簽去設(shè)置。
SS字體屬性定義字體，加粗，大小，文字樣式。
serif和sans-serif字體之間的區(qū)別
在計算機屏幕上，sans-serif字體被認為是比serif字體容易閱讀
CSS字型
在CSS中，有兩種類型的字體系列名稱：
通用字體系列 - 擁有相似外觀的字體系統(tǒng)組合（如 "Serif" 或 "Monospace"）
特定字體系列 - 一個特定的字體系列（如 "Times" 或 "Courier"）
| Generic family | 字體系列 | 說明 |
|---|---|---|
| Serif | Times New RomanGeorgia | Serif字體中字符在行的末端擁有額外的裝飾 |
| Sans-serif | ArialVerdana | "Sans"是指無 - 這些字體在末端沒有額外的裝飾 |
| Monospace | Courier NewLucida Console | 所有的等寬字符具有相同的寬度 |
字體系列
font-family 屬性設(shè)置文本的字體系列。
font-family 屬性應(yīng)該設(shè)置幾個字體名稱作為一種"后備"機制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。
注意: 如果字體系列的名稱超過一個字，它必須用引號，如Font Family："宋體"。
多個字體系列是用一個逗號分隔指明：
實例
p{font-family:"Times New Roman", Times, serif;}
對于較常用的字體組合，看看我們的 Web安全字體組合。
字體樣式
主要是用于指定斜體文字的字體樣式屬性。
這個屬性有三個值：
正常 - 正常顯示文本
斜體 - 以斜體字顯示的文字
傾斜的文字 - 文字向一邊傾斜（和斜體非常類似，但不太支持）
實例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字體大小
font-size 屬性設(shè)置文本的大小。
能否管理文字的大小，在網(wǎng)頁設(shè)計中是非常重要的。但是，你不能通過調(diào)整字體大小使段落看上去像標(biāo)題，或者使標(biāo)題看上去像段落。
請務(wù)必使用正確的HTML標(biāo)簽，就<h1> - <h6>表示標(biāo)題和<p>表示段落：
字體大小的值可以是絕對或相對的大小。
絕對大小：
設(shè)置一個指定大小的文本
不允許用戶在所有瀏覽器中改變文本大小
確定了輸出的物理尺寸時絕對大小很有用
相對大小：
相對于周圍的元素來設(shè)置大小
允許用戶在瀏覽器中改變文字大小
如果你不指定一個字體的大小，默認大小和普通文本段落一樣，是16像素（16px=1em）。
設(shè)置字體大小像素
設(shè)置文字的大小與像素，讓您完全控制文字大小：
實例
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通過縮放瀏覽器調(diào)整文本大小。
雖然可以通過瀏覽器的縮放工具調(diào)整文本大小，但是，這種調(diào)整是整個頁面，而不僅僅是文本
用em來設(shè)置字體大小
為了避免Internet Explorer 中無法調(diào)整文本的問題，許多開發(fā)者使用 em 單位代替像素。
em的尺寸單位由W3C建議。
1em和當(dāng)前字體大小相等。在瀏覽器中默認的文字大小是16px。
因此，1em的默認大小是16px。可以通過下面這個公式將像素轉(zhuǎn)換為em：px/16=em
實例
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
嘗試一下 ?
在上面的例子，em的文字大小是與前面的例子中像素一樣。不過，如果使用 em 單位，則可以在所有瀏覽器中調(diào)整文本大小。
不幸的是，仍然是IE瀏覽器的問題。調(diào)整文本的大小時，會比正常的尺寸更大或更小。
使用百分比和EM組合
在所有瀏覽器的解決方案中，設(shè)置 <body>元素的默認字體大小的是百分比：
實例
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
我們的代碼非常有效。在所有瀏覽器中，可以顯示相同的文本大小，并允許所有瀏覽器縮放文本的大小。
更多實例
設(shè)置字體加粗
這個例子演示了如何設(shè)置字體的加粗。
可以設(shè)置字體的轉(zhuǎn)變
這個例子演示了如何設(shè)置字體的轉(zhuǎn)變。
在一個聲明中的所有字體屬性
本例演示如何使用簡寫屬性將字體屬性設(shè)置在一個聲明之內(nèi)。
所有CSS字體屬性
| Property | 描述 |
|---|---|
| font | 在一個聲明中設(shè)置所有的字體屬性 |
| font-family | 指定文本的字體系列 |
| font-size | 指定文本的字體大小 |
| font-style | 指定文本的字體樣式 |
| font-variant | 以小型大寫字體或者正常字體顯示文本。 |
| font-weight | 指定字體的粗細。 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
