::first-letter 不能选中汉字，因其仅支持 unicode 字母类（l）和数字类（n）字符，而汉字属“其他字母（lo）”；应手动用 包裹首字并配合 css 精确控制。
::first-letter 不能选中汉字，这是最常踩的坑——它只对拉丁字母、数字及部分标点生效，中文字符直接失效。想给段落首个汉字加特殊字体，得换思路。
为什么 ::first-letter 对汉字无效
浏览器规范里明确将 ::first-letter 的触发条件限定在“可被 Unicode 字母类（L）或数字类（N）匹配的字符”，而汉字属于“其他字母（Lo）”，不在默认支持范围内。Chrome、Firefox、Safari 均不渲染 ::first-letter 作用于汉字后的样式，连 font-family 都会被忽略。
常见错误现象：
– 写了 p::first-letter { font-family: "Shocho", serif; }，但首字没变体
– 检查 computed styles 发现该伪元素压根没生成
– 误以为是字体没加载，反复检查 @font-face
用 <span></span> 手动包裹首字是最稳方案
国风排版讲究首字下沉+异体字+衬线强化，必须可控。手动加标签虽多写一个词，但兼容性、可维护性、SEO 友好度都远超 hack 方式。
- 把首个汉字单独包进
<span class="first-char">春</span>，再用 CSS 精确控制 - 配合
@font-face引入书法字体（如"Ma Shan Zheng"、"ZCOOL XiaoWei"），注意设置font-weight: normal避免粗细异常 - 用
float: left+line-height实现下沉效果，比initial-letter兼容更广（后者仅 Safari 16.4+ 支持） - 若需自动化，可用 JS 在 DOM 加载后查找
p或.paragraph，提取首个 Unicode 中文字符（正则/[\u4e00-\u9fa5]/），再替换为带<span></span>的结构
慎用 initial-letter：看似简洁，实则限制多
initial-letter 是 CSS Inline Layout Level 3 的新属性，理论上支持任意字符，但现实很骨感：
- Safari 是目前唯一稳定支持的浏览器，Chrome 仍处于
behind flag阶段（chrome://flags/#enable-experimental-web-platform-features） - 即使开启，对中文字体的字距、基线对齐控制极弱，常出现上下偏移或挤占行高
- 无法单独设置首字字体，只能继承父级
font-family，想用毛笔体就得整段切字体，破坏阅读节奏 - 与
text-align: justify冲突，首字位置会错乱
真正做国风排版时，首字不是“加个样式”就完事——它要和段间距、行高、字重、留白共同构成呼吸感。手动 <span></span> 虽然多敲几下，但每处控制权都在你手里；依赖伪元素或新 CSS 属性，等于把设计决策交给浏览器实现细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
