1 1字体和字体的组合 2 1.1字体组合 3 字体组合一般是由很多种字体组成,字体之间使用逗号隔开,客户端按照排列的先后顺序选择一种用来 4 呈现文字字体.如:p{font-family:verdana,arial,sans-serif;} 5 客户端首先在字体库中寻找verdana字体,如果没有找到就找arial字体,还没找到就在sans-serif字体 6 组合中选择一个字体来显示. 7 8 1.2字体名组合 9 字体名组合就是由多个字体名放在一起构成的字体组合.列如,前面的示例中,verdana和arial都是字体 10 名,它们共同构成一种字体组合. 11 在使用字体名组合时,应该注意以下事项: 12 (1)字体名中如果有空白,那么应该用引号括上,如"Times New Roman" 13 (2)字体名中如果包含保留关键字,那么应该首先进行转义.如双引号,单引号,逗号等 14 (3)字体名中如果与关键字initial,inherit,default,serif,sans-serif,monospance,fantansy, 15 cursive相同,那么也必须使用引号括住 16 (4)在中英文字体混用组合时,应尽量将中文字体名放在最前面,这样只有在找不到中文字体时才 17 会找英文字体 18 19 1.3同用字体组合 20 客户端浏览器千差万别,有一种最坏的情况,就是所有的字体名都不可用时,可以使用通用字体组合. 21 通用字体组合是一个备用机制,当所有指定字体都不可用时,就使用通用字体组合.通用字体组合是关键字 22 不能使用引号包括 23 通用字体组合由5种类型的组合而成: 24 (1)serif(带衬线的字体,如大写的I顶部与顶部的横线) 25 (2)sans-serif(不带衬线的字体,英文前缀sans即是"非"的意思) 26 (3)cursive(草书字体) 27 (4)monospace(等宽字体,特点就是每一个字符的宽度相同) 28 29 2字体设置 30 还有一些属性用于设置字体样式,粗细,大小等 31 2.1字体样式 32 font-style属性用于设置字体样式,包括常规,斜体和倾斜字体. 33 normal用于定义常规字体\italic用于斜体\oblique用于倾斜字体. 34 如: p{font-style:italic} 35 p em{font-style:normal;} 36 在这里p元素的常规文本以斜体显示,但是在p元素内部em标签强调文本却以常规字体显示. 37 38 2.2字体变体 39 使用font-variant属性可以设置字体的变体,该属性有两个值可以选用:normal和small-caps. 40 normal用于指定一个未标记为small-caps的字体,small-caps(小体大写,指的是将字母小写的转换与大写的相同,但 41 尺寸不尽相同) 42 43 2.3字体粗细 44 font-weight属性指定了字体的粗细.属性值可以是数字,也可以使关键字,并且客户端浏览器会将粗细关键字与数值关 45 联起来,并将关键字影射为粗细数值,也就是是说,数值才是该属性的计算值 46 属性及属性值描述如下: 47 (1)100--900:这些值构成了一个有序系列,每一个数值表示一个粗细值,它表示的粗细至少和它的父元素相同 48 (2)normal:等于400 49 (3)bold:等于700 50 (4)bolder:指定比父元素更粗的字体.如父元素字体粗细为400,那么bolder表示将字体设置为500,除了父元素 51 字体为900,那么此时当前字体也为900了 52 (5)lighter:指定比父元素字体更细的字体.除非父元素字体粗细为100,那么此前的字体粗细也是100 53 54 2.4字体大小 55 font-size属性用于设置字体大小,其取值方式有4种 56 p{font-size:normal;} p{font-size:larger;} p{font-size:12px;} p{font-size:20%;} 57 (1)绝对大小 58 绝对大小指的是使用关键字来设置字体大小,font-size属性默认值为medium关键字 59 (2)相对大小 60 相对大小也是使用关键字来设置字体大小,有两个关键字可用:larger/smaller 61 这两个关键字被解释为相对于字体大小索引表中的字体大小和父元素的字体大小 62 (3)长度值 63 长度值指定了一个绝对的字体大小,不允许为负数 64 (4)百分比值 65 一个百分比值指定了一个相对于父元素字体大小的绝对字体大小,可以使用百分比值或者以em,ex单位表示的值 66 67 2.5快捷方式属性 68 font属性是上述属性font-style,font-variant,font-weight,font-size,line-height,font-family的快捷方式属性 69 虽然有点快捷,貌似不利于基础一般的人看懂 70 71 2.6字体变形拉伸 72 font-stretch属性可以对正常的字体进行拉伸,改变字体的正常宽度,或者增宽,或变窄. 73 相关属性值如下: 74 (1)wider:把变形拉伸设置为更进一步的较宽值 75 (2)narrower:把变形拉伸设置为更进一步的较窄值 76 77 2.6字体大小的调整 78 对于任何给定的字体大小,不同字体的客观尺寸和文本的易读性各不相同,为了区分,字体的小写字母x的高度(称为x-height) 79 与font-size高度之间的比率称为一个字体的aspect值,当字体拥有高的aspect值时,那么当此字体设置为很小的时候更易阅读. 80 81 使用font-size-adjust属性为某个元素规定一个aspect值,这样可以保持字体的x-height的值,即强制使用同一大小的x-height 82 该属性的值可以使关键字none,或者是一个长度数字.关键字none表示允许字体组合中的每一个字体遵循自己的x-height值.长度 83 数字则是为字体组合中所有字体强迫使用同一x-height值 84 85 3使用@font-face规则来定义字体 86 @font-face规则也可用于定义字体,并且它有一个增强的功能:可实现字体链接,即样式表可以引用远程计算机的特定字体,供浏览器下载 87 和使用. 88 3.1引用字体 89 src描述符用于指定字体文件的位置,可以使相对路径或者是绝对路径 90 如:引用远程字体 91 @font-face{font-family:MyFontFamily;src:url() format(truetype);} 92 93 字体类型(format参数):truetype(TrueType .ttf),opentype(OpenType字体 .ttf,.otf),truetype-aat(带有allple advance 94 typography扩展的true-type字体 .ttf),embedded(嵌入式OpenType .eot),svg(svg字体 .svg,svgz) 95 96 引用本地安装字体 97 表示的是字体的全名,并且作为local()函数的参数引用.由于它可能包含任意字符,包含空格与标点, 98 因此全名最好包含在引号中,但不是必须的 99 @font-face{font-family:MyfontFamily;src:local("BT Century ");}100 101 3.2定义字体功能102 font-family描述符定义一个字体组合名103 font-style描述符定义字体样式104 font-weight描述符定义字体粗细105 font-stetch描述符定义字体变形拉伸106 107 3.3定义字符范围108 uniconde-range描述符可以给指定字体支持的unicode字符的范围.范围指定以"U+"开头,而后紧挨着的是"起始Unicode代码点",109 紧挨着"短划线",而后紧挨着"结束Unicode代码点"110 如:@font-size{font-family:Myfont;src();unicode-range:U+0-7F;}111 "短划线"和结束"Unicode"代码点可以省去,这时表示单个字符,如U+416.也可以使用问号"?"作为通配符,表示任意数字,如:U+4??112 113