Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版） 课件 5.1.9知识点5字体样式属性

字体样式属性信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》前端技术开发知识储备字体库设置1字体大小设置2斜体设置3粗体设置4变体设置5组合字体设置601字体库设置前端技术开发字体库设置前端技术开发01说明：font-family属性可以一次定义一个或多个字体，当定义多个字体时字体名称之间用逗号隔开。浏览器读取字体列表时，会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机本地字库中找不到第一种字体，则自动读取第二种字体，若第二种字体仍未找到，则自动读取第三种字体，依次类推。如果定义的所有字体都找不到，则选用计算机系统中的默认字体。font-family:FonName1,FontName2…,FontNameN;设置字体——font-family字体库设置前端技术开发01设置字体库的实例：HTML代码1<h1>我是标题</h1>2<p>Thisisaparagraph</p>CSS代码1h1{2font-family:

"MicrosoftYahei",微软雅黑;3}4p{5font-family:Arial,Helvetica,sans-serif;6}字体名称有空格时用双引号前端技术开发02字体大小设置字体大小设置前端技术开发02font-size的属性值可以使用数值、关键字或百分比来表示。使用数值时用于表示字体大小的常用单位有：（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）关键字。 比如：h1{font-size:medium;}font-size:Number|Keyword|Percentage;设置字体大小——font-size字体大小设置前端技术开发02设置字体大小的实例：HTML代码1<h1>我是标题</h1>2<p>我是一个段落</p>3<pid="par">我也是一个段落</p>CSS代码1#par{2font-family:

"MicrosoftYahei",微软雅黑;3

font-size:20px;4}前端技术开发03斜体设置斜体前端技术开发03值描述normal默认值。浏览器显示一个标准的字体样式italic浏览器会显示一个斜体的字体样式oblique浏览器会显示一个倾斜的字体样式font-style属性取值italic是使用了文字本身的斜体属性，oblique是让没有斜体属性的文字做倾斜处理。font-style:normal|italic|oblique;设置字体斜体——font-style斜体前端技术开发03设置斜体的实例：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}前端技术开发04粗体设置字体加粗前端技术开发04值描述normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。Number（100~900）定义由细到粗的字符。400等同于

normal，而

700等同于bold。font-weight属性取值font-weight:normal|bold|bolder|lighter|Number;设置字体加粗——font-weight字体加粗前端技术开发04设置字体加粗的实例：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}前端技术开发05变体设置字体变体前端技术开发05font-variant属性设置为small-caps，表示英文字体显示为小型的大写字母；normal表示正常的字体为默认值。font-variant:normal|small-caps;设置字体变体——font-variant字体变体前端技术开发05HTML代码1<p>Thisisaparagraph<span>ThisIsAntherParagraph</span></p>CSS代码1span{2font-variant:small-caps;3}设置字体变体的实例：比正常的大写字母要小一些前端技术开发06组合字体设置字体组合属性-font前端技术开发06该属性是一个组合属性，即font-style、font-variant、font-weight、font-size和font-family同时进行设置，不同属性值之间用空格隔开。须按顺序设置属性。在该组合属性中可增加行高的设置。默认为单倍行距。font:font-style|font-variant|font-weight|font-size|font-family;font:font-style|font-variant|font-weight|font-size/line-height|font-family;设置组合属性——font字体组合属性-font前端技术开发06设置字体变体的实例：HTML代码1<p>使用组合属性font来设置字体斜体、加粗、24像素、黑体</p>CSS代码1p{2font:

italicbold24px黑体;3/*font:

italicbold24px/30px黑体;*/4}小结前端技术开发07font-family属性用于改变字体的外观。font-style属性用于使字体变为斜体或倾斜。font-variant属性用于创建小型大写字母效果。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