网页设计与制作（活页式） 课件 情景8-3 字体属性

网页设计与制作CSS字体属性授课教师：吴纪磊HTMLcsscssJavaScript目录CONTENTS1知识讲解01知识点讲解学习导航

学习HTML时，可以使用文本字体样式标记及其属性控制文本字体的显示样式，但是这种方式繁琐且不利于代码的共享和移植。为此，CSS提供了相应的文本字体设置属性，使用CSS可以更轻松方便的控制文本字体样式。1、CSS字体属性

CSS字体属性用于设置字体族、大小、粗细及风格等样式。常用的字体属性如常用字体属性如下表所示：属性描述font简写（综合）属性。在一条声明中设置所有字体属性。font-family规定文本的字体系列（字体族）。font-size规定文本的字体大小。font-style规定文本的字体样式。font-variant规定是否以小型大写字母的字体显示文本。font-weight规定字体的粗细。1、CSS字体属性font-family01该属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。一般以需要的字体开始，并以通用系列结束（如果没有其他可用字体，则让浏览器选择通用系列中的相似字体）。字体名称应以逗号分隔。注意，如果字体名称不止一个单词，则必须用引号引起来。例如：body{font-family:"华文彩云","宋体","黑体";}当应用上面的字体样式时，会首选华文彩云，如果用户电脑上没有安装该字体则选择宋体，也没有安装宋体则选择黑体，当指定的字体都没有安装时，就会使用浏览器默认字体。1、CSS字体属性font-style02该属性主要用于指定斜体文本，此属性可设置三个值：normal-文字正常显示01italic-文本以斜体显示02oblique-文本为“倾斜”（倾斜与斜体非常相似，但支持较少）031、CSS字体属性font-weight03font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。在实际工作中，常用的font-weight的属性值为normal和bold。例如：.p1{font-weight:normal;}.p2{font-weight:bold;}1、CSS字体属性font-variant04该属性指定是否以small-caps字体（小型大写字母）显示文本。在small-caps字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。font-size05该属性设置文本的大小。font-size值可以是绝对或相对大小：1、CSS字体属性font-size05绝对尺寸：将文本设置为指定大小，如20px；不允许用户在所有浏览器中更改文本大小（可访问性不佳）；当输出的物理尺寸已知时，绝对尺寸很有用。相对尺寸：设置相对于周围元素的大小；允许用户在浏览器中更改文本大小。注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为16px（16px=1em）。1、CSS字体属性font06font属性是对字体样式进行综合设置。为了缩短代码，可以在一个属性中指定所有单个字体属性。font属性是以下属性的简写属性：选择器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。p{

font:italicsmall-capsbold12px/30pxGeorgia,serif;}例如：02练一练【练一练】字体属性实例运行效果03小结小结本节内容讲解了字体属性的设置，通过练习，