上一篇
html前端字体代码怎么写？前端开发常用字体属性详解
在 HTML 前端开发中，字体（Font）的样式控制主要通过 CSS（层叠样式表）来实现，而非直接的 HTML 标签属性，虽然 HTML5 引入了 <font> 标签的废弃状态，但现代前端开发完全依赖 CSS 属性来定义字体的外观、大小、粗细、行高以及字体族。
以下是关于 HTML 前端字体代码的详细解析，涵盖核心属性、常用配置及最佳实践。
核心 CSS 字体属性
控制字体最基础的五个 CSS 属性如下：
| 属性名 | 英文说明 | 作用描述 | 常见值示例 |
|---|---|---|---|
| font-family | Font Family | 指定字体的名称，浏览器会按优先级依次查找，直到找到可用的字体。 | Arial, 'Microsoft YaHei', sans-serif |
| font-size | Font Size | 定义字体的大小。 | 16px, 2em, 14pt, small |
| font-weight | Font Weight | 定义字体的粗细程度。 | normal, bold, 100-900 (数字) |
| font-style | Font Style | 定义字体的风格，主要用于斜体。 | normal, italic, oblique |
| line-height | Line Height | 定义行高，即两行文字基线之间的距离，影响垂直间距。 | 5, 24px, 150% |
字体族 (font-family) 的详细配置
font-family 是决定网页视觉风格的关键，为了确保跨设备和跨操作系统的兼容性，必须使用字体栈（Font Stack），即按优先级列出多个字体名称，最后以通用字体族（Generic Family）
通用字体族分类
- serif: 衬线字体（如宋体、Times New Roman）,适合长文阅读。
- sans-serif: 无衬线字体（如黑体、Arial），现代网页最常用,屏幕显示清晰。
- monospace: 等宽字体（如 Consolas, Courier New）,常用于代码展示。
- cursive: 手写体。
- fantasy: 装饰性字体。
配置示例
body { / 优先使用微软雅黑，备用黑体，最后回退到无衬线字体 / font-family: "Microsoft YaHei", "Heiti SC", sans-serif; }
注意：
- 如果字体名称中包含空格或特殊字符（如 Times New Roman 或 Arial Black）,必须使用单引号或双引号包裹。
- 中文字体名称建议使用中文引号或英文引号包裹,以确保兼容性。
字体大小 (font-size) 的单位选择
前端开发中，font-size 有多种单位,每种单位有其适用场景：
| 单位 | 类型 | 特点与适用场景 |
|---|---|---|
| px | 绝对单位 | 像素，固定大小，适用于需要精确控制布局的场景，但缺乏响应式灵活性。 |
| em | 相对单位 | 相对于父元素的字体大小，如果父元素字体变大，子元素也会随之变大，适合嵌套结构。 |
| rem | 相对单位 | 相对于根元素（<html>）的字体大小，比 em 更易预测，是现代响应式设计的首选单位。 |
| 百分比 | 相对于父元素字体大小的百分比，行为类似 em。 | |
| vw/vh | 视口单位 | 相对于视口宽度/高度，适用于需要随屏幕宽度动态调整的大标题。 |
推荐实践：
- 全局基础字体使用 rem 或 px。
- 组件内部字体使用 rem 以保持与根字体比例一致。
- 响应式大标题可使用 clamp() 函数结合 rem 或 vw。
字体粗细 (font-weight) 的数值映射
font-weight 可以使用关键字或数字，数字范围是 100 到 900，步长为 100。
- normal 或 400: 正常粗细。
- bold 或 700: 粗体。
- lighter: 比父元素更细。
- bolder: 比父元素更粗。
注意： 并非所有字体都支持 100-900 的所有层级，如果字体文件不包含特定粗细的字重，浏览器可能会通过模拟加粗（font-synthesis: bold）来显示,这可能导致显示效果不佳。
现代字体加载：@font-face
除了系统字体，前端开发经常需要加载自定义字体（如品牌专用字体），这通过 @font-face 规则实现。
@font-face { font-family: 'MyCustomFont'; src: url('fonts/MyCustomFont-Regular.woff2') format('woff2'), url('fonts/MyCustomFont-Regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; / 关键：优化字体加载体验，避免 FOIT / } h1 { font-family: 'MyCustomFont', sans-serif; }
关键点：
- 格式选择：优先使用 woff2，兼容性最好且体积最小。woff 作为备用。
- font-display: swap：建议添加此属性，它允许文本在字体加载完成前先用备用字体显示，加载完成后立即切换，避免文字不可见（FOIT）或闪烁（FOUT）。
字体优化与性能建议
- 子集化（Subsetting）：如果只使用部分字符（如仅中文常用字），应对字体文件进行子集化,大幅减小文件体积。
- 预加载（Preload）：对于关键字体，使用 <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> 提前加载。
- 避免过多字体变体：每个字体粗细、斜体都是一个独立的 HTTP 请求,尽量精简使用的字体变体数量。
- 使用系统字体栈：对于非品牌核心字体，优先使用系统内置字体（如 system-ui, -apple-system, Segoe UI）,它们加载最快且与操作系统风格一致。
相关问题与解答
问题 1：为什么我的 font-weight: bold 在某些自定义字体上显示效果很差，看起来像被强行加粗了？
解答：
这是因为该自定义字体文件本身可能只包含“正常”（Normal）和“粗体”（Bold）两个字重，或者根本不支持动态加粗，当浏览器遇到 font-weight: bold 或 font-weight: 700 时，如果找不到对应的粗体字体文件，它会使用 CSS 的 font-synthesis: bold 功能，通过算法强行将正常字体的笔画加粗，这会导致字体变形、模糊或笔画粘连。
解决方案：
- 提供完整的字重文件：在 @font-face 中为每个需要的字重（如 300, 400, 700）提供对应的字体文件。
- 禁用合成：在 CSS 中添加 font-synthesis: none;，这样浏览器就不会强行加粗，而是保持原样（可能看起来不够粗，但不会变形）。
- 使用正确的字重值：确保 HTML/CSS 中使用的 font-weight 值与提供的字体文件字重严格匹配。
问题 2：在响应式网页设计中，rem 和 em 有什么区别？应该如何选择？
解答：
- em 是相对于父元素的字体大小，如果父元素的字体大小是 16px，1em 16px，如果嵌套层级深，em 的计算会变得复杂且容易出错（子元素是父元素的 1.2em，而父元素又是其父元素的 1.2em，那么子元素实际上是根元素的 1.44em）。
- rem 是相对于根元素（<html>）的字体大小，无论嵌套多深，1rem 始终等于 <html> 标签设置的 font-size（通常是 16px）。
选择建议：
- 推荐使用 rem 作为全局字体大小的单位，因为它具有可预测性，便于维护和设计系统的一致性，你只需要在根元素设置一个基准大小,所有组件都可以基于此进行缩放。
- 使用 em 的场景较少，通常用于需要相对于当前容器动态调整的场景，例如某些组件内部的间距或字体大小，当希望该组件整体放大时，其内部元素也按比例放大，但在现代布局中，rem 配合 CSS 变量或媒体查询通常能更好地满足需求。
