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

字体样式属性信息安全技术应用ApplicationofInformationSecurityTechnology《前端技术开发》

前端技术开发知识储备字体库设置1字体大小设置2斜体设置3粗体设置4变体设置5组合字体设置6

01字体库设置前端技术开发

字体库设置前端技术开发01说明：font-family属性可以一次定义一个或多个字体，当定义多个字体时字体名称之间用逗号隔开。浏览器读取字体列表时，会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机本地字库中找不到第一种字体，则自动读取第二种字体，若第二种字体仍未找到，则自动读取第三种字体，依次类推。如果定义的所有字体都找不到，则选用计算机系统中的默认字体。font-family:FonName1,FontName2…,FontNameN;设置字体——font-family

字体库设置前端技术开发01设置字体库的实例：HTML代码1h1我是标题/h12pThisisaparagraph/pCSS代码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代码1h1我是标题/h12p我是一个段落/p3pid=par我也是一个段落/pCSS代码1#par{2font-family:MicrosoftYahei,微软雅黑;3font-size:20px;4}

前端技术开发03斜体设置

斜体前端技术开发03值描述normal默认值。浏览器显示一个标准的字体样式italic浏览器会显示一个斜体的字体样式oblique浏览器会显示一个倾斜的字体样式font-style属性取值italic是使用了文字本身的斜体属性，oblique是让没有斜体属性的文字做倾斜处理。font-style:normal|italic|oblique;设置字体斜体——font-style

斜体前端技术开发03设置斜体的实例：HTML代码1h1我是正常字体normal/h12h2我是斜体italic/h23h3我是倾斜oblique/h3CSS代码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代码1p我是正常字体normal/p2pid=one我是加粗bold/p3pid=two我是加粗程度900/pCSS代码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代码1pThisisaparagraphspanThisIsAntherParagraph/span/pCSS代码1s