使用 CSS 首字母缩写词控制首写上限

Jhey Tompkins
设置样式上限的艺术已经存在数百年甚至数千年。它在印刷样式中使用，用来表示新章节或章节的开始，而且在历史中能够体现这一点。但是，在数字时代，样式设计一直是个问题。从未出现过“干净”解决方案。

使用 CSS initial-letter 属性可以大大简化操作。

浏览器支持

您可以在哪里试用 initial-letter？Safari 和 Chrome 110 均支持此功能。在 Safari 中，该属性需要 -webkit- 前缀。存在一个待解决的问题，无法在 Firefox 中实现。

使用以下命令测试是否支持 initial-letter：

@supports (initial-letter: 1 1) { /* Your supported styles */ }

当前解决方案

今天如何在 CSS 中设计下拉菜单帽的样式？

::first-letter 伪元素可以帮助我们达成目标。

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
}

但您可能需要覆盖“浮点数”之类的属性同时计算第一个字母的大小。

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
  float: left;
  line-height: 1;
  margin-right: 0.25rem;
}

引入 lh 等新的 CSS 单元可以缓解其中的部分问题。但是，这些 API 也只能获得有限的支持（目前只有 Chrome 支持 lh）。

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 3lh;
  float: left;
  line-height: 1;
  margin-right: 0.1lh;
}

首字母缩写简介

借助 initial-letter 属性，您可以更精细地控制此下拉菜单上限样式。该属性采用两个以空格分隔的值：

p::first-letter {
  initial-letter: 3.5 3;
}
  • 第一个参数定义字母的大小以及字母占用的行数。字母将在保持宽高比的同时放大。您不能使用负值，但可以使用小数值。
  • 第二个参数定义字母接收器。可以将其视为字母所在位置的偏移量。第二个值是可选项，不能为负数。如果不存在，则假定使用字母大小值（向下取整到最接近的整数）。这相当于使用关键字“drop”。接收器还接受另一个关键字值“raise”，这相当于接收器为 1。

观看此演示，在该演示中，您可以更改相应值，了解它对下拉菜单上限样式的影响。

将其与 ::first-line 结合使用，您可以得到如下代码

p::first-line {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.25rem;
}
p::first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: #3b5bdb;
  text-shadow: 0.25rem 0.25rem #be4bdb;
}

或者，您也可以为它指定 border。请注意以下示例如何使用“drop”关键字，如果省略该值，它将是默认关键字，相当于 3： css p::first-letter { font-family: "Merriweather", serif; initial-letter: 3.5 drop; font-weight: bold; line-height: 1; margin-right: 1rem; color: #3b5bdb; border: 0.25rem dashed #be4bdb; padding: 0.5rem; border-radius: 5px; }

不妨添加一个 background 或一些 box-shadow：

p::first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: var(--surface-1);
  background: #be4bdb;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}

或者将背景剪辑为文字：

p::first-letter {
  background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: transparent;
  -webkit-background-clip: text;
  padding: 0.5rem;
}

机会多多！

大功告成，您可以使用 initial-letter 更精细地控制掉帽样式！您会为排版添加下拉帽吗？如何设计照片风格？请告知我们！