在HTML页面中设置字体是最基础也是最常用的操作之一。无论是调整文字大小、更换字体类型，还是修改文字颜色，都离不开字体设置。目前主要有两种方式：一种是HTML自带的字体标签写法，另一种是通过CSS样式表控制。前者简单直接但已被标准淘汰，后者灵活强大是现在的主流做法。本文将两种方法都详细讲解，并说明各自适用场景，帮助大家彻底掌握网页字体的设置技巧。
一、使用HTML字体标签设置字体
早期的HTML提供了专门的<font>标签用来设置文字的字体、大小和颜色。它有三个核心属性：face指定字体名称，size指定文字大小，color指定文字颜色。这种写法的好处是简单直观，标签直接包裹文字即可生效，不需要额外编写CSS代码。
<font face="微软雅黑" size="5" color="#333333">
这是一段设置了字体、大小和颜色的文字
</font>需要注意<font>标签的size属性取值范围是1到7，其中3是默认大小，7最大。这个数值不是像素值，而是一个相对级别，因此控制精度比较有限。如果要设置更精确的大小，只能借助CSS。另外，face属性可以写多个字体名称并用逗号分隔，浏览器会按顺序查找用户电脑上已安装的字体，找到第一个可用的就使用。
除了<font>标签，HTML还有几个标题标签<h1>到<h6>自带不同大小的字体效果，以及<big>、<small>等改变文字相对大小的标签。不过要特别强调，<font>标签在HTML4.01之后就被标记为不推荐使用，HTML5标准已经完全废弃了它。现在的浏览器出于兼容考虑仍然支持，但新项目不应该再用，正确做法是结构与样式分离，用CSS来控制字体。
二、使用CSS设置字体样式（推荐方式）
CSS提供了完整的字体控制能力，核心属性包括font-family设置字体族、font-size设置字号、font-weight设置粗细、font-style设置斜体、color设置颜色、line-height设置行高。可以把这些属性写在元素的style属性里实现行内样式。
<p style="font-family: 'Microsoft YaHei', sans-serif;
font-size: 16px;
font-weight: bold;
color: #2c3e50;">
这是一段用CSS行内样式设置字体的文字
</p>行内样式适合快速测试，但实际项目中更推荐使用内部样式表或外部样式表。内部样式表写在head部分的<style>标签中，可以为整个页面统一设置字体，比如把body的字体定为微软雅黑，所有子元素默认继承这个字体。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
font-size: 14px;
line-height: 1.8;
color: #333;
}
.title {
font-size: 24px;
font-weight: 700;
}
.italic-text {
font-style: italic;
}
</style>
</head>
<body>
<h2 class="title">CSS统一管理字体</h2>
<p class="italic-text">这段文字是斜体显示的。</p>
</body>
</html>外部样式表则是把CSS代码单独保存为一个css文件，通过<link>标签引入，适合多页面共享同一套字体方案，是最规范的做法。三种引入方式的优先级是：行内样式最高，内部和外部样式表按书写顺序决定，后写的覆盖先写的。
三、字体大小的单位选择与常见问题
CSS设置字号时单位选择很关键。px是绝对像素单位，设置多少就显示多少，直观可控；em是相对单位，基于父元素的字号计算，比如父元素是16px，子元素写1.5em就是24px；rem则是相对于根元素html的字号，不受父级影响，计算更简单。移动端适配通常推荐rem，PC端用px也没有问题。
字体族的选择还要考虑兼容性。如果用户电脑上没有安装你指定的字体，浏览器会自动回退到后备字体。因此写font-family时一定要在最后加上通用字体族，例如sans-serif（无衬线体）或serif（衬线体），保证任何环境下都有可用的显示效果。常用的中文安全字体有微软雅黑、宋体、黑体，英文字体有Arial、Helvetica、Verdana等。
还有一个常见需求是自定义网络字体。当系统字体无法满足设计要求时，可以使用CSS3的@font-face规则加载字体文件，让所有用户看到一致的字体效果，不受本地安装情况的限制。
@font-face {
font-family: "MyCustomFont";
src: url("fonts/custom.woff2") format("woff2"),
url("fonts/custom.woff") format("woff");
}
.custom-text {
font-family: "MyCustomFont", sans-serif;
font-size: 18px;
}使用网络字体要注意文件体积，中文字体文件往往有几MB，会明显拖慢加载速度。可以通过字体子集化工具只保留页面实际用到的字符，或者使用字体图标服务来减少资源消耗。总结来说，设置HTML字体时优先选择CSS方式，把字体样式集中管理，既符合现行标准，也让后期维护和整站换肤变得轻松许多。