initial-letter

Avatar of Geoff Graham
Geoff Graham

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 或更多行吗? 将属性告诉它,它会完成繁重的工作。

将属性更改为占用 1、2 和 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,其中有更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
130127TP*

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712718.0*

相关

更多信息