::first-letter对中文引号无效，因其仅匹配Unicode字母类（Lu/Ll/Lt）、数字或部分标点（Ps/Pe/Pi/Pf/Po），而浏览器对全角引号处理不一致：Chrome/Firefox常选中“”，Safari可能跳过直接选汉字；可靠方案是手动包裹引号并样式控制。
为什么::first-letter对中文引号无效
它不是“不支持中文”，而是规范里根本没把全角引号（如“、”、『、』）当作可独立选中的“首字母”。::first-letter只匹配 Unicode 字母类（Lu/Ll/Lt）、数字或部分标点（Ps/Pe/Pi/Pf/Po），但浏览器实际实现中，对中文引号的处理极不一致：Chrome 和 Firefox 通常会选中“，而 Safari 可能跳过它、直接选中后面的汉字。结果就是你写了 p::first-letter { font-size: 2em; }，有的浏览器放大引号，有的放大“你”，完全不可控。
统一中英文引号的唯一可靠方式
放弃靠 ::first-letter 自动识别，改用显式包裹。无论开头是“Hello”还是“你好”，都手动加一层 span：
<p><span class="first-quote">“</span>你好世界</p> <p><span class="first-quote">"</span>Hello world</p>
然后统一控制：
.first-quote {
font-size: 2.2em;
line-height: 0.75;
float: left;
margin-right: 0.15em;
}
- 避免用
text-transform或content动态插入引号——它会破坏语义和可访问性 - 服务端渲染或构建时注入最稳；若必须前端处理，用
el.innerHTML.replace(/^([“”‘’"'])(.+)/, '$1$2')，但注意不要二次包裹已有span - 别依赖
initial-letter：它不处理引号，且对中文无大小写变换能力
如果坚持用::first-letter，至少要避开这些坑
即使你不打算统一引号，也得知道哪些写法会让效果彻底失效：
- 父元素用了
display: flex或display: grid——::first-letter立刻退化为无样式文本 -
\n “你好”
- 写了
float: left却漏了line-height: 0.75——首字视觉上“浮”在行首，根本没下沉 - 给
p设了text-transform: uppercase——英文引号后接的字母会被转大写，但中文引号后的字不受影响，进一步加剧不一致
字体差异比你想的更关键
同一段 CSS，在 Noto Serif SC 和 Source Han Serif 下，““” 的字形宽度、基线位置、甚至是否被截断都不同。尤其当 font-size 超过 2.5em 时：
- 衬线字体（如 Noto Serif）对引号的钩形、倾斜度还原更好，适合强调
- 无衬线字体（如 PingFang SC）容易让全角引号显得单薄、悬浮，需额外加
vertical-align: -0.1em微调（但 Safari 兼容性差） - 永远在真实设备上测 iOS Safari ——它对全角标点的
::first-letter支持最保守，常直接忽略
真正统一的起点不是 CSS 写法，而是 HTML 结构是否主动可控。引号不是装饰，是语义的一部分；把它从“自动识别”拉回“明确声明”，反而更轻、更稳、更容易测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
