上一篇
html字体系列
HTML字体设置主要通过CSS实现，常用
font-family指定字体系列（如Arial/Helvetica、Times New Roman、Courier New），建议优先使用系统安全字体，按优先级排列备选方案，并通过 @font-face引入自定义字体，需注意
HTML字体基础标签
HTML中直接控制字体的标签较少,主要通过以下标签实现基础排版：
| 功能描述 | |
|---|---|
<font> | 已废弃的标签（HTML5不支持），曾用于设置字体颜色和大小（建议使用CSS替代） |
<h1>-<h6> | 标签，默认包含不同大小的粗体字，<h1>最大，<h6>最小 |
<p> | 段落标签，默认显示为标准正文字体 |
<strong> | 物理样式标签，显示为加粗文本（语义上强调内容重要性） |
<em> | 物理样式标签，显示为斜体文本（语义上强调内容强调） |
<small> | 显示为较小字号的文本（常用于免责声明等次要信息） |
<mark> | 高亮显示文本（通常为黄色背景） |
CSS字体控制核心属性
现代网页设计主要通过CSS控制字体样式,核心属性包括：
| 属性 | 功能描述 |
|---|---|
font-family | 指定字体族（可设置多个备选字体，用逗号分隔） |
font-size | 设置字号（支持px/em/rem/%等单位，建议使用rem适配响应式布局） |
font-weight | 设置字体粗细（100-900数值或normal/bold关键词） |
font-style | 设置字体样式（normal/italic/oblique） |
line-height | 行高（建议使用数值或rem单位，影响文本垂直间距） |
color | 文本颜色（支持十六进制/RGB/RGBA/预定义色名） |
text-align | 文本对齐方式（left/right/center/justify） |
text-decoration | 文本装饰（underline/overline/line-through/none） |
letter-spacing | 字符间距（建议使用em/rem单位保持比例） |
word-spacing | 单词间距（较少使用，需注意中文排版效果） |
字体加载与性能优化
| 技术方案 | 适用场景 |
|---|---|
| @font-face | 自定义字体嵌入，支持OTF/TTF/WOFF格式（需考虑跨域和文件大小） |
| Google Fonts | 快速引用开源字体库（需注意网络请求对首屏渲染的影响） |
| 字体子集化 | 仅加载所需字符范围（如中文网站只加载简体中文字符） |
| 字体懒加载 | 使用<link rel="preload">或JavaScript动态加载非关键字体 |
| 字体格式选择 | WOFF2（压缩率高，现代浏览器支持）、WOFF（较旧浏览器）、SVG（图标字体） |
字体兼容性处理
| 问题类型 | 解决方案 |
|---|---|
| 中文字体显示模糊 | 优先使用系统自带中文字体（如Microsoft YaHei/Heiti SC），或通过-webkit-font-smoothing优化 |
| 自定义字体跨浏览器兼容 | 同时提供多种字体格式（如WOFF2+WOFF+TTF），并通过unicode-range限制字符范围 |
| 字体加载阻塞渲染 | 使用<link>标签的rel="preload"配合as="font"声明，或采用异步加载脚本 |
| 字体版权风险 | 使用开源许可字体（如思源黑体），或购买商业字体授权 |
响应式字体设计
| 技术方案 | 实现原理 |
|---|---|
| rem单位 | 基于根元素字体大小（建议设置html { font-size: 16px }） |
| em单位 | 相对父元素字体大小（注意嵌套计算可能导致比例失真） |
| 媒体查询 | 根据视口宽度动态调整字体大小（如@media (max-width: 768px) { body { font-size: 14px; }） |
| vw/vh单位 | 按视口百分比设置字体（如font-size: 2vw会随窗口宽度变化） |
| 流体类型 | 结合calc()函数实现复杂自适应（例：font-size: calc(1em + 1vw)） |
常见问题与解答
Q1：为什么推荐使用CSS而不是<font>标签控制字体？
A1：<font>标签属于HTML4时代的过时语法，存在以下缺陷：
- 破坏文档结构与样式的分离原则
- 无法实现复杂字体效果（如渐变/阴影）
- 不利于响应式设计和多设备适配
- 不符合现代前端开发规范（影响SEO和可维护性）
建议通过CSS的font属性族统一管理字体样式。
Q2：如何在移动端优化字体显示效果？
A2：可采取以下优化措施：
- 启用字体平滑处理：
html { -webkit-font-smoothing: antialiased; } - 限制自定义字体使用场景（如仅用于标题，正文使用系统字体）
- 采用字体分级加载策略（首屏关键内容优先加载）
- 使用矢量图标代替小型字体图标（减少DOM节点）
- 在iOS系统注意禁用字体自动缩放：`body { -webkit-text-size-adjust: 100
