CSS Fonts字体

• 字体系列 

     font-family属性用来指定一个字体系列。可将多个字体用逗号隔开来设定，如果浏览器不支持或未安装一个字体就会使用下一个。可取family-name(用户指定的字体)，generic-name(通常系列，一般pc都会安装)以及继承自父元素。

<p style="font-family: '楷体';">指定一个字体</p>
<p style="font-family: '?体','宋体';">找不到使用下一个</p>

 

• 字体大小

     font-size属性用于设置字体大小。该属性设置了7个大小规格，xx-small(large)、x-samll(large)、small(large)、medium(默认);或者使用smaller与larger获得比父元素更小/大的尺寸；也可以指定一个固定值、或用%根据父元素设置以及继承自父元素。

<p style="font-size:xx-small">xx-small</p>
<p style="font-size: x-small;">x-small</p>
<p style="font-size: small;">small</p>
<p style="font-size: medium;">medium</p>
<p style="font-size: large;">large</p>
<p style="font-size: x-large;">x-large</p>
<p style="font-size: xx-large;">xx-large</p>
<p style="font-size: 10px;">固定值</p>
<div style="font-size: medium;">
    <p style="font-size: 50%;">使用百分比</p>
    <p style="font-size: smaller;">smaller</p>
    <p style="font-size: larger;">larger</p>
</div>

•  字体样式

     font-style属性指定字体的样式。可取normal(默认)、italic(斜体)、oblique(倾斜)以及继承自父元素。关于italic与oblique的区别:italic使用字体自带的斜体状态，对于没有斜体的字体将不起作用；而oblique将字体向右倾斜对任何字体都有效。

<p style="font-family: '楷体';font-style: normal;">默认</p>
<p style="font-family: '楷体';font-style: italic;">斜体</p>
<p style="font-family: '楷体';font-style: oblique;">倾斜</p>

 

•  小型大写字母

     font-variant 属性设置小型大写字母来显示文本。取small-caps使将文本中的所有小写字母转换为大写字母，但字体尺寸比正常大写字母更小。也可取normal(默认)以及继承自父元素。

<p style="font-variant: small-caps;">This Is Smaller</p>

 

•  文本粗细

     font-weight 属性设置文本的粗细。 可取4个文字值(normal默认、bold粗体、bolder更粗、lighter更细)、9个数字值(100-900其中400=normal，700=bold)，以及继承自父元素。

<p style="font-weight: normal;">normal</p>
<p style="font-weight: bold;">bold</p>
<p style="font-weight: bolder;">bolder</p>
<p style="font-weight: lighter;">lighter</p>
<p style="font-weight: 100;">100</p>
<p style="font-weight: 200;">200</p>
<p style="font-weight: 300;">300</p>
<p style="font-weight: 400;">400</p>
<p style="font-weight: 500;">500</p>
<p style="font-weight: 600;">600</p>
<p style="font-weight: 700;">700</p>
<p style="font-weight: 800;">800</p>
<p style="font-weight: 900;">900</p>

•  简写属性

     font 简写属性在一个声明中设置所有字体属性。语法为font-style  font-variant  font-weight font-size/line-height  font-family 。font-family与font-size是必需项，font-size可用line-height代替。

<p style="font: italic small-caps bold xx-large '楷体';">简写属性Font</p>