当前位置 : 主页 > 网页制作 > css >

font Property

来源:互联网 收集:自由互联 发布时间:2021-06-13
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-vari

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

上一篇:css盒模型 Box Model
下一篇:CF 999 div3
网友评论