自定义 font-family 会导致 list-style-type 序号/符号消失，是因为浏览器渲染标记时会尝试继承该字体，若其缺失 u+2022 等关键字形或 fallback 链断裂，便显示为空白；可通过 ::marker 单独设字体或重置 ul/ol 的 font-family 修复。
为什么自定义 font-family 会让 list-style-type 的序号/符号消失
不是字体本身“不支持序号”，而是浏览器在渲染 list-style-type 生成的标记（如圆点、数字、罗马字母）时，会回退到系统默认字体（通常是 sans-serif 或 serif），而这个回退过程可能被显式设置的 font-family 意外拦截或干扰。尤其当自定义字体缺少基本 ASCII 符号（如 •、◦、▸）或数字字形时，浏览器无法 fallback 到可用字形，最终渲染为空白。
哪些 font-family 值容易触发这个问题
以下情况最常导致序号不可见：
-
font-family: "PingFang SC", "Helvetica Neue", sans-serif;—— 苹果系字体在某些版本中缺失disc对应的实心圆点字形（U+2022），且未正确 fallback -
font-family: "Noto Sans CJK SC", "Source Han Sans CN";—— 中文字体通常不包含西文列表符号，又没声明sans-serif作为兜底 -
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI";—— 这些系统字体族在 Windows/macOS/Linux 上行为不一致，部分环境下会跳过 marker 渲染 - 显式写了
font-family: "CustomWebFont", sans-serif;，但 WebFont 文件里漏掉了 Unicode 区块 U+2000–U+206F（通用标点）或 U+0030–U+0039（数字）
怎么验证是不是 font-family 导致的
打开开发者工具，在 Elements 面板选中 li 元素，查看 Computed 标签页里的 font-family 实际生效值；再手动在 Styles 面板临时删掉所有 font-family 声明，观察序号是否立刻出现。若恢复后消失，就基本锁定问题。
- 更直接的方法：在控制台执行
getComputedStyle(document.querySelector('li')).fontFamily，确认最终解析出的字体链 - 注意：
list-style-type的标记不受li的font-family直接控制，但现代浏览器（Chrome/Firefox）会尝试用其继承的字体渲染，失败则 fallback；Safari 更倾向于忽略继承，坚持用系统默认 - 如果用了
@font-face，检查该字体文件是否包含U+2022（bullet）、U+25E6（circle）、U+25B8（black right-pointing pointer）等常用 marker 字符
修复方案：不改字体也能让序号回来
根本解法是切断 font-family 对 marker 的影响，而不是反复调字体文件：
- 给
ul或ol显式重置font-family: sans-serif;，确保 marker 使用稳定字体 - 用
::marker伪元素单独控制序号样式：li::marker { font-family: "Segoe UI", "Helvetica Neue", sans-serif; }（Chrome 117+/Firefox 117+/Safari 17.4+ 支持） - 若需兼容旧浏览器，退回
::before + counter()方案，并在::before中明确指定font-family - 避免在
ul或li上写过于激进的字体继承，比如* { font-family: "MyFont" !important; }—— 这类全局强覆盖几乎必现问题
真正容易被忽略的是：font-family 对 list-style-type 的影响不是线性的，它依赖浏览器内部的 fallback 路径和字体元数据完整性，而非单纯“字体有没有这个字符”。哪怕字体文件里真有 •，如果 OpenType 表里没声明支持该 Unicode 区块，照样不显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
