font Property

2019-09-13 11:57:24 阅读：279 来源： 互联网

标签：Property normal height paragraph small font size

font Property font CSS 属性

CSS font 属性的语法为

其实就是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两属性是必要指定的，缺一不可。

<body>

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

<body>

This is a paragraph, normal.

This is a paragraph, italic.

This is a paragraph, oblique.

结果为

相较之下你会发现italic模式是斜体，而onlique模式则是更斜。

二、font-variant

其值有normal(默认值)、small-caps





    

<body>

    My name is Hege Refsnes.(normal)
    My name is Hege Refsnes.(small-caps)

结果为

由此可知，small-caps模式会将所有小写的英文字母变大写，

但须注意变大写的字母其size并不会变大。

三、font-weight





    

<body>

    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





    

<body>

    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

<body>

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

结果为

就是指字里行间的间距，数值可为normal(默认值)、纯数字(可有小数点)、px、%。

六、font-family

请看font-family文章

参考数据：

CSS Fonts @font-face

原文:大专栏 font Property

标签：Property,normal,height,paragraph,small,font,size
来源： https://www.cnblogs.com/petewell/p/11516505.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

font Property