DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!
initial-letter
是一个 CSS 属性,用于选择应用该属性的元素的首字母,并指定字母占用的行数。
您可能在新闻网站上看到过类似的内容,其中开头段落的首字母比其他内容更大。

以前,对内容的首字母进行样式设置需要使用一个小技巧,您需要将字母包装在 <div>
中,并应用一个类对其进行样式设置
/* Style that first letter! */
.first-letter {
font-size: 35px;
line-height: 70px;
}
<p><span class="first-letter">O</span>nce upon a time in a faraway land...<p>
这种方法有效,但它比我们想要的 HTML 标记更多,并且会打断我们的内容。 此外,每次您想要使用它时都必须手动应用该类,这很麻烦。
这就是 initial-letter
的用武之地
/* Style that first letter! */
.subhead {
initial-letter: 2;
}
<p class="subhead">Once upon a time in a faraway land...<p>
这样更简洁! 另一种方法是将其应用于 ::first-letter
伪选择器
/* Style that first letter! */
.subhead::first-letter {
initial-letter: 2;
}
您看到了吗? initial-letter
属性会自动计算创建我们定制的下降帽所需的字体大小和行数! 您希望它占用正好 2、3、4 或更多行吗? 将属性告诉它,它会完成繁重的工作。

语法和值
initial-letter: normal | [<number> <integer>];
initial-letter
接受以下值
normal
: 对首字母不应用缩放效果。 这在您需要重置从级联继承的值时很有用。<number>
: 字母应占用的行数,负值不允许。<integer>
: 字母应下沉的行数,负值不允许。 如果您需要将字母向下移动以适应棘手的间距问题,这将非常有用,但如果没有指定,它将采用<number>
的值
示例

对首字母进行样式设置可用于实现一些精美的排版设计方法。 请注意,以下示例目前仅受 Safari 支持。
下降帽 可能是最常用的用例
查看示例:initial-letter: 下降帽 作者:Geoff Graham (@geoffgraham) 在 CodePen 上。
上升帽 是另一个示例
查看示例:initial-letter: 上升帽 作者:Geoff Graham (@geoffgraham) 在 CodePen 上。
方块帽 回溯到古老的童话故事
查看示例:initial-letter: 方块帽 作者:Geoff Graham (@geoffgraham) 在 CodePen 上。
浏览器支持
此浏览器支持数据来自 Caniuse,其中有更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
130 | 否 | 否 | 127 | TP* |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 否 | 127 | 18.0* |
相关
更多信息
- CSS 内联布局模块级别 3: 官方规范
- Jen Simmons Labs: 演示和用例示例
- Firefox 票证: 支持该功能的开放票证
- Internet Explorer 票证: 支持该功能的开放票证
这是一个很好的介绍,并且将是一个非常有用的功能。不幸的是,我们已经过了两年,但实际上仍然没有浏览器支持。