字体设置是网页排版的基础，一个页面的可读性和美观度很大程度上取决于字体样式和大小的处理是否得当。在HTML中设置字体，本质上是通过CSS的字体相关属性来控制文字的渲染效果，核心属性包括font-family（字体族）、font-size（字号）、font-weight（字重）、font-style（字形）和line-height（行高）等。下面我们从样式引入方式、具体属性用法、单位选择以及自定义字体几个方面来系统讲解。
一、三种CSS样式引入方式
在HTML中应用字体样式有三种方式，分别是行内样式、内部样式表和外部样式表。行内样式直接写在标签的style属性中，优先级最高，适合临时调试；内部样式表写在head部分的<style>标签内，适合单个页面使用；外部样式表则是把样式写进独立的css文件，再通过<link>标签引入，是实际项目中最推荐的方式。
三种方式的示例如下：
<!-- 方式一：行内样式 -->
<p style="font-family: 'Microsoft YaHei'; font-size: 16px;">行内样式设置的文字</p>
<!-- 方式二：内部样式表 -->
<head>
<style>
p { font-family: 'Microsoft YaHei'; font-size: 16px; }
</style>
</head>
<!-- 方式三：外部样式表 -->
<head>
<link rel="stylesheet" href="style.css">
</head>需要强调的是，实际开发中应尽量避免大量使用行内样式，因为它会让HTML结构变得混乱，难以维护。外部样式表可以实现多个页面共享同一套字体规则，修改一处即可全局生效，这是工程化开发的最佳实践。另外，废弃的<font>标签和face属性在HTML5中已经不被支持，应当使用CSS来完成所有字体控制。
二、font-family设置字体样式
font-family用于指定文字使用的字体，可以同时声明多个字体作为备选，浏览器会按顺序尝试，如果用户系统没有安装第一个字体，就自动使用第二个，依此类推。这就是所谓的字体回退机制，为了保证跨平台的显示一致性，一定要在字体列表末尾加上通用字体族，比如sans-serif或serif。
body {
/* 多个备选字体，最后加通用字体族 */
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}书写时注意几点规则：字体名包含空格或中文时必须用引号包裹，比如上面的"Microsoft YaHei"；英文字体名建议放在中文前面，这样英文字符会优先用英文字体渲染，显示效果更好；通用字体族有五个常用值，分别是serif（衬线体）、sans-serif（无衬线体）、monospace（等宽体）、cursive（手写体）和fantasy（幻想体），它们不需要引号。
中文字体在不同操作系统上名称不同，比如苹果系统的苹方是PingFang SC，Windows系统的微软雅黑是Microsoft YaHei。如果希望全平台显示统一的品牌字体，就需要借助后面讲到的@font-face自定义字体方案。此外，font-weight控制字体的粗细，常用值有normal（400）、bold（700），也可以写100到900的数值；font-style用来设置斜体，常用值是italic和normal。
三、font-size设置字体大小
font-size支持的单位很多，不同单位适用的场景差别很大，选错单位会导致页面缩放异常或维护困难。常用的单位有px、em、rem和百分比，下面逐一分析。
px是绝对单位，一像素就是一像素，设置后大小固定，优点是直观精确，缺点是无法随用户的浏览器设置缩放，移动端适配时不灵活。em是相对单位，相对于父元素的字号计算，如果父元素是16px，那么子元素设置1.5em就是24px，但em存在层层嵌套后不断累乘的问题，容易出现失控。rem则是相对于根元素html的字号计算，不受父级影响，计算简单可控，是目前响应式布局的主流选择。
html { font-size: 16px; } /* 1rem = 16px */
.title { font-size: 1.5rem; } /* 24px */
.content { font-size: 0.875rem; } /* 14px */
.small { font-size: 0.75rem; } /* 12px */搭配line-height行高使用时，推荐使用无单位的数值，比如line-height: 1.5表示行高是字号的1.5倍，这样行高会随字号自动等比缩放，比写死px值更灵活。正文中文字号一般设置为14px到16px之间，过小会影响阅读体验，标题可以根据层级从h1到h6依次递减，形成清晰的视觉层次。
四、使用@font-face加载自定义字体
当系统自带字体无法满足设计需求时，可以使用CSS3提供的@font-face规则加载自定义字体文件。它的原理是把字体文件放到服务器上，通过CSS声明一个自定义字体名，浏览器会下载字体文件并渲染文字，这样无论用户设备上有没有安装该字体，都能正确显示。
@font-face {
font-family: "MyCustomFont";
src: url("fonts/myfont.woff2") format("woff2"),
url("fonts/myfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.title {
font-family: "MyCustomFont", sans-serif;
}使用时有几个要点需要注意：字体文件建议使用woff2格式，它体积小、压缩率高，主流浏览器都已支持，同时提供woff作为旧浏览器的回退；src中写多个格式时浏览器会按顺序选择支持的格式。中文字体文件通常有几MB大小，直接加载会严重拖慢页面速度，实际项目中一般只导出页面用到的字符子集，或者使用字体图标、可变字体等技术来优化。
总结一下，HTML中设置字体主要包括三个层面：选择合适的样式引入方式，用font-family配合回退机制控制字体样式，用合适的单位设置font-size控制字号，必要时再通过@font-face引入个性化字体。掌握这些属性的组合使用，就能应对绝大多数网页文字排版需求。
html字体设置font-familyfont-size修改时间：2026-08-31 07:20:56