::first-letter实现首字母放大需满足三前提：父元素为块级容器；段首无空格、换行或标签；仅使用支持属性（如font-size、float、line-height）。中文场景兼容性差，推荐js包裹首字替代。
::first-letter 能实现首字母放大，但直接写 font-size 很可能“看起来没变大”或“整段错位”——根本原因不是语法错，而是它对容器、内容、属性都有硬性限制。
为什么::first-letter写了没反应？
最常见失效场景就三个：
- 父元素不是块级：比如
<span>Hello</span>上直接用::first-letter，必须加display: inline-block或包进<p></p> - 段首有不可见字符：开头是空格、换行、
<strong></strong>标签，伪元素就找不到“第一个可渲染字母”，直接跳过 - 用了不支持的 CSS 属性：比如
text-transform: uppercase、width、vertical-align，浏览器会静默忽略，不报错也不生效
::first-letter能用哪些样式？
它只接受一小部分属性，超出范围等于白写。关键可用项：
-
font-size、font-weight、font-family（有效） -
color、background-color（有效） -
margin-left/margin-right（左右边距可用；margin-top无效） -
line-height（仅当元素为块级时影响首行布局，值建议设为0.7–0.9防切割） -
float: left（实现环绕效果的核心，不加它就只是“变大”，不是“下沉”）
别碰：text-transform（对伪元素无效）、height、transform、display、padding-top 等。
中文首字放大能不能用::first-letter？
能写，但不推荐依赖：
- 它不识别“汉字是否为首字”，只按 Unicode 字符顺序取第一个可渲染字符
- 段首是《、【、（等标点时，可能选中的是标点而非汉字，导致放大了引号
- Chrome 和 Safari 对中文首字的判定逻辑不一致，同一段 HTML 在不同浏览器里可能放大不同字符
- 没有
text-transform效果，所谓“首字大写”在中文里纯属视觉错觉（汉字本无大小写）
真要稳定控制中文首字，得用 JS 提取首字符包裹 <span class="first-char"></span> 再单独样式——::first-letter 在中文场景下本质是“尽力而为”，不是解决方案。
浮动首字母后文字上移/重叠怎么办？
这是 float: left + font-size 放大后的典型副作用，核心是行高失控：
- 必须配
line-height: 0.8（不是1），否则首字母自身行高会撑开整段 -
margin-right建议从0.2em起调，太小文字贴住首字母，太大留白突兀 - 避免设
padding或border在伪元素上——部分旧版浏览器渲染不稳定 - 如果段落本身有
line-height，记得在::first-letter里显式覆盖，不要指望继承
真正麻烦的不是怎么写，而是怎么让放大后的首字母和后续文字在所有设备上都对齐——这需要反复试 line-height 和 font-size 的比值，而不是套固定数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
