2023學(xué)年完整公開課版CSS字體樣式

——CSS字體樣式移動商務(wù)系統(tǒng)前端設(shè)計CSS字體樣式文字是網(wǎng)頁中最重要的設(shè)計元素之一，同時也是網(wǎng)站信息傳遞給用戶的主要載體。在網(wǎng)頁設(shè)計中，字體是文字的外在形式特征，一些設(shè)計師為了凸顯不同的設(shè)計效果，往往選擇不同樣式的字體來進行視覺效果設(shè)計。字體從商業(yè)角度劃分，分為收費字體和免費字體兩大類。例如在日常生活中常用到的方正系列字體，從方正字庫官網(wǎng)（）可以看到，將方正字體分為：“免費字體”、“基礎(chǔ)字體”和“精選字體”三類。CSS字體樣式免費字體：包括方正黑體、方正書宋、方正仿宋、方正楷體?；A(chǔ)字體：包括方正超粗黑體、方正宋黑體、方正大黑體、方正細黑一體、方正中等線體、方正細等線體、方正粗圓體、方正準(zhǔn)圓體、方正細圓體、方正報宋體、方正宋三體、方正宋一體、方正大標(biāo)宋體、方正小標(biāo)宋體、方正彩云體、方正琥珀體、方正隸變體、方正隸書體、方正魏碑體、方正行楷體、方正姚體、方正綜藝體。精選字體：包括免費字體、基礎(chǔ)字體類以外的其它全部方正字體。如方正蘭亭黑系列、博雅宋系列、正黑系列、倩體系列等。CSS字體樣式CSS字體樣式font-family規(guī)定元素的字體系列。font-family可以把多個字體名稱作為一個“回退”機制。在CSS中，有兩種不同類型的字體系列。通用字體系列：擁有相似外觀的字體系統(tǒng)組合。特定字體系列：具體的字體系列（如黑體、微軟雅黑等）。除了各種特定的字體系列外，CSS定義了5種通用字體系列，分別是Serif字體、Sans-serif字體、Monospace字體、Cursive字體、Fantasy字體。CSS字體樣式現(xiàn)場演示：案例9-11：字體系列CSS字體樣式font-size屬性用來定義文本的大小。該屬性值可以為絕對值或相對值。絕對值是將文本設(shè)置為指定的大小，此時不允許用戶在所有瀏覽器中改變文本大?。ú焕诳捎眯裕?，絕對大小在確定了輸出的物理尺寸時很有用。相對值是相對于周圍的元素來設(shè)置大小，允許用戶在瀏覽器改變文本大小。CSS字體樣式現(xiàn)場演示：案例9-12：字體大小CSS字體樣式font-weight屬性用來定義字體的粗細。CSS字體樣式現(xiàn)場演示：案例9-13：字體加粗CSS字體樣式font-style屬性用來定義字體的風(fēng)格，該屬性值有三種：normal、italic、oblique。normal：默認(rèn)值，對文本不做任何改動。italic：定義文本斜體顯示。斜體（italic）是一種簡單的字體風(fēng)格，對每個字母的結(jié)構(gòu)有一些小改動，來反映變化的外觀。oblique：定義文本傾斜顯示。傾斜（oblique）文本則是正常豎直文本的一個傾斜版本。CSS字體樣式現(xiàn)場演示：案例9-14：字體風(fēng)格CSS字體樣式font-style屬性用來定義字體的風(fēng)格，該屬性值有三種：normal、italic、oblique。normal：默認(rèn)值，對文本不做任何改動。italic：定義文本斜體顯示。斜體（italic）是一種簡單的字體風(fēng)格，對每個字母的結(jié)構(gòu)有一些小改動，來反映變化的外觀。oblique：定義文