font Property

寵の児 提交于 2019-11-29 11:26:35

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


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!