::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><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
然后统一控制：
.first-quote {
font-size: 2.2em;
line-height: 0.75;
float: left;
margin-right: 0.15em;
}
- 避免用
text-transform或content动态插入引号——它会破坏语义和可访问性 - 服务端渲染或构建时注入最稳；若必须前端处理，用
el.innerHTML.replace(/^([“”‘’"'])(.+)/, '<span class="first-quote">$1</span>$2')，但注意不要二次包裹已有span - 别依赖
initial-letter：它不处理引号，且对中文无大小写变换能力
如果坚持用::first-letter，至少要避开这些坑
即使你不打算统一引号，也得知道哪些写法会让效果彻底失效：
- 父元素用了
display: flex或display: grid——::first-letter立刻退化为无样式文本 -
<p>\n “你好”</p>中的换行符会让伪元素选中“”而非“你”，但 Safari 可能连“”都不认 - 写了
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 结构是否主动可控。引号不是装饰，是语义的一部分；把它从“自动识别”拉回“明确声明”，反而更轻、更稳、更容易测试。
