Web前端開發(fā)技術(shù)項目教程（HTML5 CSS3 JavaScript）（微課版） 課件 5.1.9知識點5字體樣式屬性

字體樣式屬性信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》前端技術(shù)開發(fā)知識儲備字體庫設(shè)置1字體大小設(shè)置2斜體設(shè)置3粗體設(shè)置4變體設(shè)置5組合字體設(shè)置601字體庫設(shè)置前端技術(shù)開發(fā)字體庫設(shè)置前端技術(shù)開發(fā)01說明：font-family屬性可以一次定義一個或多個字體，當(dāng)定義多個字體時字體名稱之間用逗號隔開。瀏覽器讀取字體列表時，會按照定義的先后順序來決定選用哪種字體。若瀏覽器在計算機本地字庫中找不到第一種字體，則自動讀取第二種字體，若第二種字體仍未找到，則自動讀取第三種字體，依次類推。如果定義的所有字體都找不到，則選用計算機系統(tǒng)中的默認字體。font-family:FonName1,FontName2…,FontNameN;設(shè)置字體——font-family字體庫設(shè)置前端技術(shù)開發(fā)01設(shè)置字體庫的實例：HTML代碼1<h1>我是標(biāo)題</h1>2<p>Thisisaparagraph</p>CSS代碼1h1{2font-family:

"MicrosoftYahei",微軟雅黑;3}4p{5font-family:Arial,Helvetica,sans-serif;6}字體名稱有空格時用雙引號前端技術(shù)開發(fā)02字體大小設(shè)置字體大小設(shè)置前端技術(shù)開發(fā)02font-size的屬性值可以使用數(shù)值、關(guān)鍵字或百分比來表示。使用數(shù)值時用于表示字體大小的常用單位有：（1）像素(px)。（2）相對單位em和rem。 比如：目前字體大小為16px，h1{font-size:1em;}，等價于h1的字體大小為16px。（3）百分比。相對于父元素字體大小的百分比。比如：父元素的字體大小為16px，h1{font-size:100%;}，等價于h1的字體大小為16px。（4）絕對單位。 可以使用點（pt）、厘米（cm）、毫米（mm）等單位來表示。（5）關(guān)鍵字。 比如：h1{font-size:medium;}font-size:Number|Keyword|Percentage;設(shè)置字體大小——font-size字體大小設(shè)置前端技術(shù)開發(fā)02設(shè)置字體大小的實例：HTML代碼1<h1>我是標(biāo)題</h1>2<p>我是一個段落</p>3<pid="par">我也是一個段落</p>CSS代碼1#par{2font-family:

"MicrosoftYahei",微軟雅黑;3

font-size:20px;4}前端技術(shù)開發(fā)03斜體設(shè)置斜體前端技術(shù)開發(fā)03值描述normal默認值。瀏覽器顯示一個標(biāo)準(zhǔn)的字體樣式italic瀏覽器會顯示一個斜體的字體樣式oblique瀏覽器會顯示一個傾斜的字體樣式font-style屬性取值italic是使用了文字本身的斜體屬性，oblique是讓沒有斜體屬性的文字做傾斜處理。font-style:normal|italic|oblique;設(shè)置字體斜體——font-style斜體前端技術(shù)開發(fā)03設(shè)置斜體的實例：HTML代碼1<h1>我是正常字體normal</h1>2<h2>我是斜體italic</h2>3<h3>我是傾斜oblique</h3>CSS代碼1h1{2font-style:

normal;3}4h2{5font-style:italic;6}7h3{8font-style:oblique9}前端技術(shù)開發(fā)04粗體設(shè)置字體加粗前端技術(shù)開發(fā)04值描述normal默認值。定義標(biāo)準(zhǔn)的字符。bold定義粗體字符。bolder定義更粗的字符。lighter定義更細的字符。Number（100~900）定義由細到粗的字符。400等同于

normal，而

700等同于bold。font-weight屬性取值font-weight:normal|bold|bolder|lighter|Number;設(shè)置字體加粗——font-weight字體加粗前端技術(shù)開發(fā)04設(shè)置字體加粗的實例：HTML代碼1<p>我是正常字體normal</p>2<pid="one">我是加粗bold</p>3<pid="two">我是加粗程度900</p>CSS代碼1#one{2font-weight:

bold;3}4#two{5font-weight:900;6}前端技術(shù)開發(fā)05變體設(shè)置字體變體前端技術(shù)開發(fā)05font-variant屬性設(shè)置為small-caps，表示英文字體顯示為小型的大寫字母；normal表示正常的字體為默認值。font-variant:normal|small-caps;設(shè)置字體變體——font-variant字體變體前端技術(shù)開發(fā)05HTML代碼1<p>Thisisaparagraph<span>ThisIsAntherParagraph</span></p>CSS代碼1span{2font-variant:small-caps;3}設(shè)置字體變體的實例：比正常的大寫字母要小一些前端技術(shù)開發(fā)06組合字體設(shè)置字體組合屬性-font前端技術(shù)開發(fā)06該屬性是一個組合屬性，即font-style、font-variant、font-weight、font-size和font-family同時進行設(shè)置，不同屬性值之間用空格隔開。須按順序設(shè)置屬性。在該組合屬性中可增加行高的設(shè)置。默認為單倍行距。font:font-style|font-variant|font-weight|font-size|font-family;font:font-style|font-variant|font-weight|font-size/line-height|font-family;設(shè)置組合屬性——font字體組合屬性-font前端技術(shù)開發(fā)06設(shè)置字體變體的實例：HTML代碼1<p>使用組合屬性font來設(shè)置字體斜體、加粗、24像素、黑體</p>CSS代碼1p{2font:

italicbold24px黑體;3/*font:

italicbold24px/30px黑體;*/4}小結(jié)前端技術(shù)開發(fā)07font-family屬性用于改變字體的外觀。font-style屬性用于使字體變?yōu)樾斌w或傾斜。font-variant屬性用于創(chuàng)建小型大寫字母效果。font-weight屬性用于增加或減小字體的粗細。font-size屬性用于增加或減小字體的大小。font屬性用于簡寫指定其他多個字體屬性。font-family:FontName1,FontName2,FontName3;font-size:Number|KeyWord|Percentage;font-variant:Normal|small-caps;font-weight:normal|bold|bolder|lighter|Number;font-style