字体速记 CSS

CSS是前端工程师必须掌握的技能之一，掌握好CSS最基本的字体属性，可以让你的网站看上去更专业，同时也让你的代码变得更加简洁。在这篇文章中，我将向你介绍如何使用CSS使字体更美观。

字体类型（font-family）

使用font-family属性指定字体的名称。这个属性可以使用先声明的字体名称，并用逗号分隔。例如：

body {
    font-family: Arial, sans-serif;
}

这段CSS将会把Arial字体用于body元素，如果用户没有安装Arial字体，那么将使用sans-serif字体来代替。

字体大小（font-size）

字体大小是CSS样式中常常被使用的属性。它可以让你更精确地控制字体的大小。在CSS中，可以用一些单位来表示字体的大小，如px、em、rem等。例如：

h1 {
    font-size: 36px;
}
p {
    font-size: 16px;
}

这段CSS将会把字体大小设为36px和16px。

字体加粗（font-weight）

为了突出显示某些文字，我们可以设置字体加粗。字体加粗有多种方式，其中最典型的就是使用font-weight属性。例如：

h1 {
    font-weight: bold;
}

字体加粗也可以通过设置数值来完成，例如：

p {
    font-weight: 700;
}

这个数值通常的范围在100到900之间。默认值是400。

字体样式（font-style）

CSS允许你将字体变成斜体（italic）或正常体（normal）。使用font-style属性来设置即可。例如：

em {
    font-style: italic;
}

这个样式将会把标签的字体样式设为斜体。

字体颜色（color）

字体颜色可以使用color属性来控制。例如：

body {
    color: #333;
}

这段代码将会让body元素的文字颜色设置为#333，可以使用Hex颜色代码或者RGB颜色代码。

字体系列（font-style）

所谓字体系列，指在同一家字体供应商中，一组相关字体的集合。通常情况下，你会经常看到下面这些字体系列：serif、sans-serif、cursive、fantasy、monospace。例如：

body {
    font-family: Arial, sans-serif;
}

这段CSS将会把Arial字体用于body元素，如果用户没有安装Arial字体，就会使用sans-serif字体。

字体变形（font-variant）

font-variant属性控制字体是否出现变体。有两个常见的变体：小型大写字母（small-caps）和全角数字（full-width）。

h1 {
    font-variant: small-caps;
}

这个样式将会把标签的字体样式设为小型大写字母。

结尾

这里我们介绍了使用CSS控制字体的不同方式。尝试用这些属性来调整你所开发网站的字体样式，相信你的网站将会更加精美。

如果你想要更多关于CSS的教程，请访问 HTML/CSS - w3schools.com.cn。