::first-letter中font-family不生效的根本原因是其仅继承父元素显式声明的字体，不拾取系统默认或ua样式表fallback；必须在父元素（如p）上明确设置font-family并确保webfont加载完成。
为什么 font-family 在 ::first-letter 里有时不生效
根本原因不是语法写错，而是浏览器对伪元素的字体回退机制更严格——它只继承父元素明确声明的 font-family，不会自动拾取系统默认字体或 UA 样式表里的 fallback。如果父 p 没设 font-family，伪元素可能直接回退到无衬线体，甚至忽略你写的装饰性字体。
实操建议：
- 必须在父元素（如
p）上显式声明font-family，哪怕只是font-family: serif; - 装饰性字体（如
'Cinzel'、'Playfair Display'）要确保已通过@font-face加载完成，否则会静默降级 - 避免用系统字体名如
"Times"单独出现，加引号且带 fallback：font-family: "Cinzel", "Georgia", serif; - 中文场景下，首字是汉字时，某些字体（如细黑体）缺乏下沉视觉重量，可叠加
font-weight: bold或transform: scale(1.05);
::first-letter 里哪些 font-* 属性真正有用
font-family、font-size、font-weight、font-style 和 text-transform 是稳定支持的；但 font-variant（如 small-caps）在多数浏览器中对伪元素无效，font-stretch 几乎所有引擎都忽略。
容易踩的坑：
-
font-size推荐用em或rem，不用px——否则在用户缩放页面时会失联 -
font-weight设900比bold更可靠，尤其当字体本身没定义bold字重时 -
text-transform: uppercase对中文无影响，但对英文首字母很关键；若原文是小写a，不加这句就出不来大写效果 - 别尝试
font-feature-settings：目前仅 Safari 部分支持，Chrome/Firefox 基本不响应
中文字体 + ::first-letter 的真实表现差异
中文没有“字母”概念，但 ::first-letter 仍会捕获第一个 Unicode 字符（如“春”、“《”、“【”）。问题在于：不同字体对单个汉字的字面框（inline-box）高度、基线位置、字重渲染差异极大，导致下沉对齐不稳定。
解决路径：
- 优先选有明确“标题体”设计的中文字体，比如
"Noto Serif SC"、"KaiTi"，避开 UI 类黑体（如"PingFang SC"） - 用
line-height: 0.75+float: left控制下沉深度，比单纯调font-size更可控 - 首字符前有标点（如
「春天来了」）时，::first-letter会选中「，但视觉上不突出——这时应手动用<span class="dropcap">「</span>春替代 - WebFont 加载期间可能出现“字体闪动”（FOIT/FOUT），可在
@font-face中加font-display: swap;缓解
当 ::first-letter 和 flex/grid 父容器冲突时怎么办
只要父元素设了 display: flex 或 display: grid，::first-letter 就彻底失效——这不是 bug，是 CSS 规范明确定义的行为：伪元素依赖块格式化上下文（BFC），而 flex/grid 容器不提供它。
替代方案不是妥协，而是结构换思路：
- 把首字单独包一层
<span class="first-char">春</span>，再用float: left或display: inline-block模拟下沉 - 在 flex 容器内，用
align-self: flex-start+margin-top: -0.5em微调垂直位置 - Grid 布局中，给首字 span 分配独立
grid-area，配合place-self: start end锚定左上角 - 别用
position: absolute覆盖——会导致屏幕阅读器跳过该字符，可访问性受损
最常被忽略的一点：伪元素的字体艺术感，本质依赖于文本流的自然包裹与基线对齐。一旦脱离块上下文，就得靠人工重建这个关系——不是加更多 CSS，而是接受“首字”已从语义变成视觉组件，该写 HTML 就写 HTML。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
