直接给 ol 或 li 设置 font-family 只影响文字内容，不影响序号；统一字体需用 li::marker（现代推荐，Safari≤16.4 不支持）或 li::before + counter()（兼容性最佳，完全可控）。
ol 列表里的文字字体，和普通段落一样改，但必须注意：序号（编号）和文字内容默认是不同渲染路径，font-family、font-size 等属性不会自动继承到序号上——除非你用的是 list-style-type 原生编号且没关掉默认样式。
直接给 ol 或 li 设 font-family 就行吗？
可以，但只影响文字内容，不影响序号本身。比如：
ol {
font-family: "Helvetica Neue", sans-serif;
font-size: 16px;
}
这段代码会让每个 li 里的文字变字体，但 Chrome/Firefox 下的数字序号仍可能沿用系统 UI 字体（尤其在 macOS 上），视觉上出现“字体重叠不一致”。
- 真正统一字体，得显式作用于
li::marker（现代写法）或li::before（兼容写法） -
list-style-position: outside是默认值，此时序号在文本流外，不受li的line-height或vertical-align直接控制 - 如果用了
list-style: none+li::before自定义编号，那字体完全由你写的font-family决定
li::marker 改序号字体最干净，但要注意兼容性
li::marker 是语义正确、性能好、写法简洁的方案，但 Safari ≤16.4 不支持（2026 年多数用户已升级，但内网/教育场景仍有遗留）。
立即学习“前端免费学习笔记（深入）”；
ol {
list-style: decimal;
}
li::marker {
font-family: "SF Pro Display", system-ui;
font-weight: 600;
}
- 必须确保
ol没设list-style: none，否则::marker无生效对象 -
li::marker不能设display、margin，能用的样式有限（font-*、color、text-transform等） - 若要加空格或前缀（如 “1. ”），就得切到
li::before方案
用 li::before + counter() 完全掌控字体和格式
这是最通用的做法，既能换字体，又能加标点、图标、颜色，还兼容 IE9+。
ol {
list-style: none;
counter-reset: item;
}
li {
counter-increment: item;
}
li::before {
content: counter(item) ". ";
font-family: "Inter", sans-serif;
color: #2563eb;
font-weight: 600;
margin-right: 0.5em;
}
-
counter-reset必须写在ol上，不是li；漏写会导致所有counter(item)返回0 -
content里拼字符串时，不要留空格（如"counter(item) . "错误），空格要写在引号内 - 若列表嵌套，需为每层定义独立计数器名（如
chapter、section），避免互相干扰
真正难的不是改字体，而是让序号和文字在不同字号、不同 line-height、不同字体度量下保持基线对齐——哪怕只换了个字体，都可能需要微调 vertical-align 或加 padding-top 补偿。
