font Property

标签：pre   width   lan   注意   orm   size   class   运用   initial   

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

font Property

标签：pre   width   lan   注意   orm   size   class   运用   initial   

原文地址：https://www.cnblogs.com/petewell/p/11516505.html