柚子快報(bào)邀請(qǐng)碼778899分享：前端 HTML
柚子快報(bào)邀請(qǐng)碼778899分享：前端 HTML
文章目錄
???一、字體樣式的基本概念：???二、css字體樣式屬性有：藍(lán)1、設(shè)置字體類型（font-family）藍(lán)2、設(shè)置字體大?。╢ont-size）藍(lán)3、設(shè)置字體風(fēng)格（font-style）藍(lán)4、設(shè)置字體的粗細(xì)（font-weight）藍(lán)5、綜合設(shè)置字體樣式（font）
???三、總結(jié)
???一、字體樣式的基本概念：
在 HTML 中，字體樣式是指文本的字體、大小、顏色和樣式等屬性的組合?？梢酝ㄟ^ CSS 或者 HTML 元素屬性來設(shè)置字體樣式?？梢酝ㄟ^以下方式來設(shè)置字體樣式：
???二、css字體樣式屬性有：
藍(lán)1、設(shè)置字體類型（font-family）
font-family 可以把多個(gè)字體名稱作為一個(gè)“回退”系統(tǒng)來保存。如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)。也就是說，font-family 屬性的值是用于某個(gè)元素的字體族名稱或/及類族名稱的一個(gè)優(yōu)先表。瀏覽器會(huì)使用它可識(shí)別的第一個(gè)值。
代碼演示：
運(yùn)行結(jié)果：
藍(lán)2、設(shè)置字體大小（font-size）
font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長(zhǎng)度單位，也可以使用絕對(duì)長(zhǎng)度單位。
其中，相對(duì)長(zhǎng)度單位比較常用，推薦使用像素單位px，絕對(duì)長(zhǎng)度單位使用較少。具體如下：
相對(duì)長(zhǎng)度單位說明em相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸px像素，最常用，推薦使用絕對(duì)長(zhǎng)度單位說明in英寸cm厘米mm毫米pt點(diǎn)
代碼演示：
運(yùn)行結(jié)果：
藍(lán)3、設(shè)置字體風(fēng)格（font-style）
字體傾斜除了用 i 和 em 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)。
font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：
normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式。
italic：瀏覽器會(huì)顯示斜體的字體樣式。
oblique：瀏覽器會(huì)顯示傾斜的字體樣式。
代碼演示：
運(yùn)行結(jié)果：
藍(lán)4、設(shè)置字體的粗細(xì)（font-weight）
字體加粗除了用 b 和 strong 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的。
font-weight屬性用于定義字體的粗細(xì)，其可用屬性值：normal、bold、bolder、lighter、100~900(100的整數(shù)倍)。
技巧：
數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。
代碼演示：
運(yùn)行結(jié)果：
藍(lán)5、綜合設(shè)置字體樣式（font）
font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置，其基本語法格式如下：選擇器{字體風(fēng)格→字體粗細(xì)→字體大小→字體類型 } 使用font屬性時(shí)，必須按上面語法格式中的順序書寫，不能更換順序，各個(gè)屬性以空格隔開。 注意：其中不需要設(shè)置的屬性可以省略(取默認(rèn)值)，但必須保留font-size和font-family屬性，否則font屬性將不起作用。
代碼演示：
運(yùn)行結(jié)果：
???三、總結(jié)
屬性作用font-family可以通過指定字體的名稱或者使用通用字體類型來設(shè)置字體樣式font-size可以通過指定像素大小、百分比或者使用相對(duì)單位來設(shè)置字體大小color可以通過指定顏色名、十六進(jìn)制值或者RGB值來設(shè)置字體顏色font-weight可以通過指定數(shù)值或者使用關(guān)鍵字來設(shè)置字體的粗細(xì)程度font-style可以通過使用關(guān)鍵字來設(shè)置字體的樣式，如斜體
以上就是有關(guān)常用字體樣式的筆記內(nèi)容，希望對(duì)各位有所幫助，作者也在學(xué)習(xí)中，如有解釋不清楚或有誤的地方，還請(qǐng)各位指正。?
柚子快報(bào)邀請(qǐng)碼778899分享：前端 HTML
好文鏈接
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Homedepot家居優(yōu)選
