首页 > 代码库 > CSS属性之字体(Font)

CSS属性之字体(Font)

CSS属性之字体(Font)

技术分享


font:[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] 

复合属性,各属性见下文。

必须同时包含font-size和font-family,且这两个值顺序不能变,其他关键字的值放到这两个值的前面,顺序可以随意打乱。

可以在字号值(font-size)上放一个可选的行高值(line-height)作为字号的某种附属值,后面必须有font-family。


font-style:normal | italic | oblique

normal: 指定文本字体样式为正常的字体。

italic: 指定文本字体样式为斜体。对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique。

oblique: 指定文本字体样式为倾斜的字体。人为的使文字倾斜,而不是去选取字体中的斜体字。

注:italic 和 oblique 的区别实在看不出来,至少在Chrom浏览器下看不出来。


font-variant:normal | small-caps

normal: 正常的字体。

small-caps: 小型的大写字母字体。


font-weight:normal | bold | bolder | lighter | <integer>

normal: 正常的字体。相当于number为400。

bold: 粗体。相当于number为700。 

bolder: 特粗体。也相当于strong和b对象的作用。

lighter: 细体。

<integer>: 用数字表示文本字体粗细。取值范围:100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 。


font-size:<absolute-size> | <relative-size> | <length> | <percentage>

<absolute-size>: 根据对象字体进行调节。可选参数值:xx-small | x-small | small | medium | large | x-large | xx-large。以 medium 作为基础参照,xx-small相当于medium 3/5 (h6),x-small: 3/4,small: 8/9 (h5),medium: 1 (h4),large: 6/5 (h3),x-large: 3/2 (h2),xx-large: 2/1 (h1)。

<relative-size>: 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。可选参数值:smaller | larger。 

<length>: 用长度值指定文字大小。不允许负值。 

<percentage>: 用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。 


font-family:[ <family-name> | <generic-family> ] [, <family-name> | <generic-family>]*

<family-name>: 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文,则应使用引号括起 。

<generic-family>: 字体序列名称。 


font-stretch:ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

ultra-condensed: 比正常文字宽度窄4个基数。 

extra-condensed: 比正常文字宽度窄3个基数。 

condensed: 比正常文字宽度窄2个基数。 

semi-condensed: 比正常文字宽度窄1个基数。 

normal: 正常文字宽度。

semi-expanded: 比正常文字宽度宽1个基数。 

expanded: 比正常文字宽度宽2个基数。 

extra-expanded: 比正常文字宽度宽3个基数。 

ultra-expanded: 比正常文字宽度宽4个基数。 

技术分享

但即使支持,显示效果也与正常文字并无不同。 


CSS属性之字体(Font)