CSS字体样式的4种属性（附带实例）

在文本的样式中，字体相关的 CSS 属性包括：

font-family，指定字体名称。可以逗号（,）分隔设置多个候选字体，如果字体名称包括空格，可以使用一对单引号（'）定义。
font-size，指定字体的尺寸，可以使用绝对尺寸，也可以使用相对尺寸。
font-weight，指定字体的加粗效果，属性值可以是关键字，也可以是数字。关键字包括 normal（正常，默认值）、bold（加粗）、bolder（更粗）、lighter（较细）等。数字则可以使用 100、200、300、…、900。请注意，不同的浏览器对于数字属性值的显示效果可能并不一样，建议使用关键字属性值。
font-style，字体风格，默认为 norma（l 正常），可以使用 italic 关键字指定为斜体效果。

下面的代码演示了这四种字体样式属性的应用。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
  div {
    font-weight:bold;
    font-style:italic;
    font-size:2em;
    font-family:'微软雅黑 ';
  }
</style>
</head>
<body>
<div>
  字体样式演示
</div>
</body>
</html>

页面显示效果见下图：

同时设置以上四种字体样式时，可以使用 font 属性，其格式如下：

font:<font-style> <font-weight> <font-size> <font-family>;

下面的代码中，字体设置与上例相同。

<style>
  div {
    font: italic bold 2em '微软雅黑';
  }
</style>

CSS字体样式的4种属性（附带实例）

相关文章