站长百科 | 数字化技能提升教程 数字化时代生存宝典 
一、HTML字体结构
在CSS中，字体可以通过 font 属性来设置，它可以接受一个由字体名或字体族名组成的列表。当浏览器需要显示网页时，它会从这个列表中选择第一个可用的字体。使用 CSS 可以将字体应用于不同的 HTML 元素，为元素设置样式规则分别是<style>、<head>、<link>、<head>、<h2>等。
示例：
<h2>Education</h2>
该标题自动以绿色、30 磅、斜体字体呈现：
span.example{color:green; font-size:30pt; font-style:italic;}Education
二、标题字体
<h#> ... </h#> #=1, 2, 3, 4, 5, 6
<hn>---</hn> 这些标记显示黑体字。 <hn>---</hn> 这些标记自动插入一个空行，不必用 < p> 标记再加空行。
因此在一行中无法使用不同大小的字体。
三、字体大小
用字体大小属性(size)来设定字体的大小。
<font size=#> ... </ font> #=1, 2, 3, 4, 5, 6, 7 or +#, -# <basefont size=#> #=1, 2, 3, 4, 5, 6, 7
示例代码：
<font size=3>站长百科</font> <font size=2>站长百科</font> <font size=1>站长百科</font>
四、字体颜色
指定颜色 <font color=#> ... </font> #=rrggbb 16 进制数码，或者是下列预定义色彩： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
示例代码如下：
<font color=Yellow>站长百科</font> <font color=red>站长百科</font>
五、页面字体
为整个网页设置字体属性只需要定位正确的元素即可。假设我们希望整个页面使用通用的无衬线系统字体，可以通过这个 CSS 声明来做到这一点：
body { font-family: sans-serif; }
对网页上的字体进行全局 CSS 声明的一个常见原因是使字体颜色与全局背景颜色兼容。在这种情况下，我们可以使用 CSS 设置所有样式属性，并将它们全局应用于整个网页。例如，以下代码将页面的背景色设置为黑色，将字体设置为白色，将字体系列设置为无衬线。它还将链接颜色设置为白色，将访问的链接颜色设置为黄色。
body { color: white; background-color: black; font-family: sans-serif; } a { color: white; } a:visited { color: yellow; }
六、HTML字体类别
HTML中包含以下几种不同类别的字体：
- 衬线和无衬线：有些字母的末尾是平淡的，而另一些字母的末尾有一个短笔画，这些短笔画称为衬线，而无衬线字体没有；
- 字体和手写字体：对于具有个性的某种类型的网站来说，手写字体可能是一个不错的选择，但只能用于标题和徽标，而不能用于段落或列表；
- 等宽字体：每个字符占用相同水平空间的字体称为等宽字体；
- 显示和装饰字体：显示和装饰字体是引人注目的字体设计，旨在限制徽标和顶级标题的使用。
七、构建字体堆栈
并非所有浏览器和操作系统都能够呈现所有字体。因此，在选择字体时，需要指定后备字体样式，这是通过使用 CSS 属性构建字体堆栈来完成的。
通常，字体堆栈将包含至少三个字体选项：
- 选择作为设计字体的 Web 字体；
- 预安装在几乎所有浏览器和操作系统上的回退通用字体；
- 浏览器可用于从系统上可用的字体中选择字体的通用字体系列。在实践中，段落元素的字体堆栈可能如下所示：font-family。
p { font-family: "Open Sans", Tahoma, sans-serif; }
八、字体堆栈语法
HTML属性值需要使用引号括起来，当字体名称包含空格或特殊字符时，需要将其括在引号中。在大多数情况下，双引号和单引号都可以使用。尽管在内联样式中可以添加字体，但通常更推荐将字体样式定义放在外部CSS样式表中。虽然在极少数情况下可能会使用内联样式来添加字体，但通常建议将字体的样式定义放在外部CSS样式表中，以便实现更好的代码组织和维护。
