可以，first-letter伪元素能放大段落首字，但仅适用于块级元素的第一个字母或标点，且需配合float、line-height等属性确保排版稳定。
first-letter 伪元素能放大段落首字吗
可以，但仅限于块级元素（如 <p>、<div>）的**第一个字母或标点符号**，且该元素必须有可渲染的文本内容。它不能作用于行内元素（如 <span>）直接包裹的文本，也不能跨标签生效——比如 <p><em>A</em>bc</p> 中的 A 就不会被 ::first-letter 选中（因为被 <em> 包裹后不再是“段落开头的裸字符”）。
为什么设置了 font-size 却没变大
常见原因是样式被覆盖或选择器权重不足，尤其容易踩以下三个坑：
-
::first-letter必须写在块级元素的 CSS 规则里，不能单独定义（例如不能只写p::first-letter { font-size: 2em; }而不给p设任何样式） - 如果父容器设置了
font-size: 0或使用了transform: scale()，::first-letter的尺寸可能被继承或干扰 - 某些字体（尤其是等宽字体或图标字体）对
line-height和vertical-align敏感，首字可能“看起来没放大”，其实是基线偏移导致视觉错位
如何让首字真正撑开并保持排版稳定
关键不是只调 font-size，而是配合 line-height、float 和 margin 控制布局流。下面是一个可靠写法：
p {
line-height: 1.6;
}
p::first-letter {
font-size: 3em;
font-weight: bold;
float: left;
line-height: 1;
margin-right: 0.2em;
margin-bottom: -0.15em;
}
说明：float: left 是让首字脱离文本流、实现传统“首字下沉”效果的核心；line-height: 1 防止放大后行高撑开；负的 margin-bottom 是为了微调基线对齐，避免下一行文字被顶高。
立即学习“前端免费学习笔记（深入）”；
移动端或响应式场景下要注意什么
直接写死 3em 在小屏上会溢出。更稳妥的做法是：
- 用
clamp()动态缩放：font-size: clamp(1.5rem, 4vw, 3rem); - 避免在
::first-letter上设width或height—— 它不支持盒模型尺寸控制 - 如果用 Web Font，确保字体加载完成后再渲染（否则首字可能短暂回退为系统字体，尺寸跳变）
首字放大看着简单，实际依赖渲染引擎对伪元素的解析细节，尤其是和 float、inline formatting context 的交互。一旦发现不对齐或换行异常，优先检查 line-height 和 float 的组合是否被其他样式干扰。
