第二章 CSS设置字体.doc

第二章 CSS设置字体CSS字体属性包括字体族科、字体大小、字体样式、字体加粗及字体变体。1 设置字体font-family在HTML中设置字体使用的标记的face属性，而在CSS中可以使用font-family属性来设置字体。字体族科的意思就是在CSS中利用font-family属性设置文字的字体。基本语法：font-family:字体1, 字体2, 字体3,;语法说明： 应用font-family属性可以一次定义多个字体，而在浏览器读取字体时，会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机上找不到第一种字体，则自动读取第二种字体，若第二种字体也找不到，则自动读取第三种字体，这样依次类推。如果定义的所有字体都找不见，则选用计算机系统的默认字体。 在定义英文字体时，若英文字体名是由多个单词组成，并且单词之间有空格，那么一定要将字体名用引号（单引号或双引号）引起来。如：font-family:Georgia, Times New Roman, Times, serif;。实例1.html： 在CSS中设置字体 用font-family属性设置字体 字体按照隶书、楷体、宋体的顺序被浏览器选择读取网页效果如图2-1。图2-1 设置字体2 设置字号font-size在HTML中设置字体使用的标记的size属性，而在CSS中可以使用font-size属性来设置字号。不同之处还有，在HTML中设置的字号大小有7个级别，但CSS中字号的大小可以任意设置。基本语法：font-size:绝对尺寸|关键字|相对尺寸|百分比语法说明： 绝对尺寸是指尺寸大小不会随着显示器分辨率的变化而变化，也不会随着显示设备的不同而变化。如用绝对尺寸设置的文字在显示器分辨率为960600和分辨率为1024768下所显示的大小是一样的。 使用绝对尺寸设置文字大小的时候一定要加上单位，如果没有加单位，浏览器会默认以px（像素）为单位。绝对尺寸可以使用的单位包括in（英寸）、px（像素）、cm（厘米）、mm（毫米）、pt（点）、pc（皮卡）。最常用的单位还是px（像素）。（1点=1/72英寸）。 相对尺寸是指尺寸大小继承于该元素属性的前一个属性单位值。这里要强调的是，如果是在该元素的font-size属性中使用cm为属性单位，那么将直接继承于父元素的font-size属性，若没有父元素，则参考浏览器的默认字号值。 绝对尺寸和相对尺寸也可以使用关键字来定义字号。绝对尺寸的关键字有七个，分别为xx-small（极小）、x-small（较小）、small（小）、medium（标准大小）、large（大）、x-large（较大）、xx-large（极大）。相对尺寸则仅有两个关键字，分别为larger（较大）和smaller（较小）。相对尺寸的larger是指在它的上一个关键字基础上扩大一级，smaller则是在它上一个关键字基础上缩小一级。 百分比是基于父元素中字体的大小为参考值的。pfont-size:16ptbfont-size:200%这两行代码说明，所有标记中用标记定义的文字尺寸大小，是在标记中定义的文字大小的200%，即为32pt。实例2.html。 在CSS中设置字号 使用绝对尺寸设置字号大小 这是30像素大小的文字 这是0.5厘米大小的文字 这是10毫米大小的文字其中.z1font-size:0.3in定义了字号为0.3英尺的类样式z1，.z2font-size:30px定义了字号为30像素的类样式z2，.z3font-size:0.5cm定义了字号为0.5厘米的类样式z3，.z4font-size:10mm定义了字号为10毫米的类样式z4。网页效果如图2-2。图2-2 使用绝对尺寸设置字号实例3.html。 在CSS中设置字号 使用关键字设置字号大小 这是关键字为xx-small的字号大小 这是关键字为x-small的字号大小 这是关键字为small的字号大小 这是关键字为large的字号大小网页效果如图2-3。图2-3 使用关键字设置字号相对文字大小的设置比较灵活，px表示具体的像素，因此其显示大小与显示器的大小及其分辨率有关。采用%或者em都是相对于父标记而言的比例，如果没有设定父标记的字体大小，则相对于浏览器的默认值。实例4.html。CSS设置相对字体大小p.onefont-size:15px;p.one spanfont-size:200%;p.twofont-size:30px;p.two spanfont-size:0.5em;文字大小相对值，15px。文字大小相对值网页效果如图2-4。图2-4 设置字体的相对大小3 设置字体样式font-style在HTML中设置字体使用的标记设置字体为斜体，而在CSS中可以使用font-style属性来设置字体的斜体显示。基本语法：font-style:normal|italic|oblique语法说明：表2-1 font-style属性取值说明属性的取值描述normal正常显示italic斜体显示文字oblique歪斜体显示，比斜体的角度更大实例5.html。 在CSS中设置字体样式 使用font-style属性 这是属性取值为normal的正常效果 这是属性取值为italic的斜体效果 这是属性取值为oblique的歪斜体效果网页效果如图2-5。图2-5 设置字体样式4 设置字体加粗font-weight在HTML中设置字体使用的标记设置字体为粗体，而在CSS中可以使用font-weight属性来设置字体的粗体显示。基本语法：font-weight:normal|bold|bolder|lighter|number语法说明： 表2-2 font-weight属性取值说明属性的取值描述normal正常粗细bold粗体bolder加粗体lighter细体number数字一般都是整百，有九个级别100-900，数字越大字体越粗。实例6.html。 在CSS中设置字体加粗 使用font-weight设置字体加粗 font-weight属性取值为正常粗细效果 font-weight属性取值为粗体效果 font-weight属性取值为加粗体效果 font-weight属性取值为细体效果 font-weight属性取值为100的效果 font-weight属性取值为400的效果 font-weight属性取值为700的效果网页效果如图2-6。图2-6 设置字体加粗5 设置字体变体font-variant设置字体变体，实际就是设置字体是否显示为小型的大写字母。而且CSS中的font-variant属性主要用于设置英文字体。基本语法：font-variant:normal|small-caps normal表示正常的字体，默认值就为这个字体。 small-caps表示英文字体显示为小型的大写字母。实例7.html。 在CSS中设置小型的大写字母 使用font-variant属性设置字体变体 hello!you like css?小写的英文 hello!you like css?小写的英文字母变为了小型的大写字母网页效果如图2-7。图2-7 设置字体变体6 组合设置字体属性fontfont属性是一种复合属性，可以同时对文字设置多个属性。包括字体族科、字体大小、字体风格、字体加粗及字体变体。基本