font Property font CSS 属性
CSS font 属性的语法为
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
其实就是font-style、font-variant、font-weight、font-size、line-height、font-family属性的简写,
至于caption、icon、menu、message-box、small-caption、status-bar属性不比较不常用,
而且我也不知道如何用,所以就先忽略。
在使用font简写时,其中font-size、font-family两属性是必要指定的,缺一不可。
p.ex1 { font: 15px sans-serif; } p.ex2 { font: italic bold 12px/30px Georgia, serif; } This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
以下各别列出font底下属性的用法,当全都了解时,就知道font属性简写的用法了。
一、font-style
其有normal(默认值)、italic、oblique
p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; } This is a paragraph, normal. This is a paragraph, italic. This is a paragraph, oblique.
结果为
相较之下你会发现italic模式是斜体,而onlique模式则是更斜。
二、font-variant
其值有normal(默认值)、small-caps
p.normal { font-variant: normal; } p.small { font-variant: small-caps; } My name is Hege Refsnes.(normal) My name is Hege Refsnes.(small-caps)
结果为
由此可知,small-caps模式会将所有小写的英文字母变大写,
但须注意变大写的字母其size并不会变大。
三、font-weight
p.normal { font-weight: normal; } p.lighter { font-weight: lighter; } p._100 { font-weight: 100; } p.bold { font-weight: bold; } p.bolder { font-weight: bolder; } p._600 { font-weight: 600; } This is a paragraph.(normal) This is a paragraph.(lighter) This is a paragraph.(100) This is a paragraph.(bold) This is a paragraph.(bolder) This is a paragraph.(600)
结果为
在chrome实测结果,normal模式的字体粗细似乎就等于lighter也等于100~500,
而bold模式的字体粗细似乎就等于bolder也等于600~900。
四、font-size
p.large { font-size: large; } p.px { font-size: 50px; } p.percent { font-size: 200%; } This is a paragraph. This is a paragraph.(large) This is a paragraph.(px) This is a paragraph.(percent)
结果为
字体大小font-size属性有可套用的数值可选如medium(默认值)、xx-small、x-small、small、large、
x-large、xx-large、smaller、larger。
但我个人认为使用px、%单位会比较可以灵活运用。
五、line-height
p.three { line-height: 3; } p.px { line-height: 20px; } p.percent { line-height: 200%; } This is a paragraph with a standard line-height. This is a paragraph with a standard line-height. The default line height in most browsers is about 110% to 120%. This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph
结果为
就是指字里行间的间距,数值可为normal(默认值)、纯数字(可有小数点)、px、%。
六、font-family
请看font-family文章
参考数据:
CSS Fonts @font-face
原文:大专栏 font Property