css中首字母下沉

Using a decorative initial capital letter to start a paragraph is a very old technique, pre-dating the invention of movable type. Some of the most beautiful and ornate initial capitals are associated with illuminated manuscripts, largely written by clergy between the 4

^th and 15 ^th centuries CE.

^第 4和^第 15个世纪CE之间主要写的神职人员。

Initial capitals have an important editorial role to play: they indicate to the reader that a new section of text has begun. Initial caps are typically several times larger than the base font used on the page, and are featured only once per text section: in a traditional book, once per chapter; in a website, perhaps once per page. They are commonly associated with leading, opening, or first paragraphs.

首字母大写起着重要的编辑作用：它们向读者表明新的一段文字已经开始。 初始大写通常比页面上使用的基本字体大几倍，并且每个文本部分仅显示一次：在传统书籍中，每章一次； 在网站上，也许每页一次。 它们通常与开头，开头或第一段相关。

An oversized initial capital letter that shares a common baseline with the first line of text is known as a standing initial capital, standing cap, or pop cap. An initial capital letter that has several lines of text to its right is known as a dropped initial capital, or drop cap.

与第一行文字具有相同基准的超大写首字母被称为常备大写，大写或大写 。 首字母大写带有多行文字的地方称为首字母大写或首字下沉 。

简单的站立帽 (Simple Standing Cap)

First, our code:

首先，我们的代码：

<h1>The First Phillipic</h1>
<p>Philip, after the defeat of Onomarchus, had marched toward the pass of Thermopylae, which, however, he found occupied by the Athenians, who had sent a force for the purpose of preventing his advance. Being baffled there, he directed his march into Thrace, and alarmed the Athenians for the safety of their dominions in the Chersonese.

The matching CSS:

匹配CSS：

h1 + p:first-letter {font-size: 300%;
}

Note that an initial cap is typically changed in appearance in greater ways than we have done here: color, font (a sans-serif typeface is often used) and other properties are often altered.

请注意，初始大写字母的外观更改通常比我们在此做的更大： color ， font (通常使用无衬线字体)和其他属性经常被更改。

简单的首字下沉 (Simple drop cap)

Turning the initial cap into a drop cap could not be simpler:

将最初的上限变成首字下放再简单不过了：

h1 + p:first-letter {font-size: 300%;float: left;
}

Note that any element can be floated, not just images. We would typically add margin, padding and other properties to this declaration in order to improve the appearance of the drop cap. Unfortunately, the browser will not attempt to align the baseline of the drop cap to the nearest matching text line; that will be up to us.

请注意，任何元素都可以浮动，而不仅仅是图像。 我们通常会在此声明中添加margin ， padding和其他属性，以改善首字下沉的外观。 不幸的是，浏览器不会尝试将首字下沉的基线与最匹配的文本行对齐； 这将取决于我们。

基于图像的首字下沉 (Image-based drop cap)

A truly ornate standing or drop cap, like the illuminated example that led this entry, would not be text, but an image. In that case, the id and existing style would be removed, to make way for HTML code. If our image was called p.jpg, then our HTML code would be:

一个真正的华丽站立或首字下沉，就像引导该条目的发光示例一样，不是文字，而是图像。 在这种情况下，将删除id和现有样式，以便为HTML代码腾出空间。 如果我们的图像称为p.jpg ，那么我们HTML代码将是：

<p><img src="p.jpg" alt="P" style="float: left;">hilip,
after the defeat of Onomarchus, had marched toward the pass of Thermopylae, which, however, he found occupied by the Athenians…

Note that in this case the image physically replaces the first letter. Because of this it is particularly important to set the alt value of the image correctly, so that if the drop cap image did not load for any reason the paragraph text would still read correctly, with the missing image being replaced with the value of the attribute. For this reason, we would not provide a height and width for the image: unlike normal circumstances, we do not want to preserve space for the image in the eventuality that it did not load.

请注意，在这种情况下，图像会物理替换第一个字母。 因此，正确设置图像的alt值尤为重要，因此，如果由于任何原因未加载首字下沉图像，则段落文本仍将正确读取，而丢失的图像将替换为属性值。 因此，我们不会为图像提供height和width ：与正常情况不同，我们不希望在图像未加载的情况下保留图像的空间。

翻译自: https://thenewcode.com/51/Classic-Typography-Effects-in-CSS-Basic-Initial-Caps-and-Drop-Caps

css中首字母下沉