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两属性是必要指定的,缺一不可。
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
This is a paragraph, normal.
This is a paragraph, italic.
This is a paragraph, oblique.
结果为
相较之下你会发现italic模式是斜体,而onlique模式则是更斜。
二、font-variant
其值有normal(默认值)、small-caps
My name is Hege Refsnes.(normal)
My name is Hege Refsnes.(small-caps)
结果为
由此可知,small-caps模式会将所有小写的英文字母变大写,
但须注意变大写的字母其size并不会变大。
三、font-weight
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
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
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