css中首字母下沉

While it’s long been possible to create traditional dropcaps on the web using the ::first-letter pseudo selector, the process has been difficult: not only does it require a lot of careful, precise CSS, but any changes to the surrounding text, such as altering the typeface or line-height, push the dropcap out of alignment, whereas a good dropcap should always be “top and tail” with its associated text:

长期以来，使用::first-letter伪选择器在网络上创建传统的首字下沉很可能，但此过程非常困难：不仅需要大量仔细，精确的CSS ，而且还需要对周围的文本进行任何更改，例如在更改字体或行高时，将首字下沉不对齐，而好的首字应始终在其相关文本的“顶部和底部”：

This complete independence between body text and initial cap meant any changes required alterations to both elements, including within responsive design and @media queries. As a result, CSS dropcaps have tended to be individually art-directed, making them extremely expensive to create, and leaving a typographical feature that has been a standard for over 400 years relatively rare on the web… and when they were attempted, often done badly.

正文和初始上限之间的完全独立性意味着任何更改都需要对这两个元素进行更改，包括响应式设计和@media查询中的更改。 结果，CSS首字下沉往往是单独进行艺术指导的，因此制作起来极其昂贵，并且在400多年来一直是印刷标准中的一项印刷功能在网络上相对罕见……当尝试使用时， 通常会这样做严重的 。

Along with its excellent work on CSS blend modes, shapes, regions and other modules, the Adobe web development team has proposed a new CSS property, initial-cap, that addresses just this issue. While support is limited right now to Chrome and Safari, a nice little polyfill has been released that provides support for the proposal in all modern browsers, giving developers and designers an easy way to add dropcaps to their pages.

除了在CSS混合模式 ， 形状 ，区域和其他模块方面的出色工作之外，Adobe Web开发团队还提出了一个新CSS属性initial-cap ，它可以解决此问题。 虽然目前对Chrome和Safari的支持非常有限，但已经发布了一个不错的小polyfill ，可以在所有现代浏览器中为该提案提供支持，从而为开发人员和设计人员提供了一种在其页面上添加首字下沉的简便方法。

The specification works using the same ::first-letter selector, but makes the styling of dropcaps much easier. For example, to style the first letter of the very first paragraph in a page, we could add in the :first-of-type pseudo selector:

该规范使用相同的::first-letter选择器工作，但使::first-letter下沉的样式更加容易。 例如，要为页面中第一段的第一个字母设置样式，我们可以添加:first-of-type伪选择器：

p:first-of-type::first-letter {initial-letter: 3; color: red;
}

…meaning “make the dropcap red, and as high as the first three lines of text in the paragraph”. Naturally, the spec covers a lot of territory, including different writing directions, dealing with descenders and short paragraphs, and much more. Right now, the major limitation is that ::first-letter (and pseudo elements in general) can’t take all the CSS properties required for a truly great dropcap. Until that is resolved, the polyfill requires that we add markup to indicate which letter we want to apply the effect to:

…意思是“将首字下标设为红色，并使其与段落中前三行文字一样高”。 自然，该规范涵盖了很多领域，包括不同的写作方向，涉及后代和短段落的内容等等。 现在，主要的限制是::: ::first-letter (和一般的伪元素)不能采用真正强大的dropcap所需的所有CSS属性。 在解决该问题之前，polyfill要求我们添加标记以指示我们要将效果应用于哪个字母：

<p><span id="dropcap">M</span>y father’s family name being Pirrip, and my Christian name Philip, my infant tongue could make of both names nothing longer or more explicit than Pip...

Then add the polyfill to the bottom of the page and target the <span>:

然后将polyfill添加到页面底部，并定位<span> ：

<script src="dropcap.min.js"></script>
<script>
var dropcap = document.getElementById("dropcap");
window.Dropcap.layout(dropcap, 3);
</script>

Our CSS then changes to target this id:

然后，我们CSS更改为以该id为目标：

#dropcap {color: red;
}

It’s also possible to create a “pop-cap” by specifying a second, optional, baseline value for the method:

还可以通过为该方法指定第二个可选baseline值来创建“ pop-cap”：

window.Dropcap.layout(dropcap, 3, 2);

This aligns the baseline of the dropcap with the second line of text, but keeps the dropcap three lines high. (By default, an undeclared baseline automatically takes the line-height value).

这使首字下沉的基线与文本的第二行对齐，但使首字下沉保持三行高。 (默认情况下，未声明的baseline自动采用line-height值)。

使首字下沉响应 (Making the dropcap responsive)

An initial letter three lines high will likely be too large at the screen size of mobile devices, so it must be reduced at an appropriate breakpoint:

在移动设备的屏幕尺寸上，三行高的首字母可能会太大，因此必须在适当的断点处减小它：

@media all and (max-width: 600px) {p:first-of-type::first-letter {initial-letter: 2;}
}

Making the dropcap responsive with the polyfill is slightly more complex, as it uses matchMedia to switch the size of the letter: consult the CodePen repo for more information.

使用polyfill使首字下沉响应变得稍微复杂一点，因为它使用matchMedia来切换字母的大小：有关更多信息，请参见CodePen存储库 。

结论 (Conclusion)

initial-letter is a promising proposal, filling a typographical gap that has had to be addressed with complex CSS hackery. I’ll return to expand this article as the specification is ironed out and browser support increases; you may wish to follow me on Twitter to receive alerts on updates.

initial-letter是一个很有前途的建议，它填补了必须通过复杂CSS黑客解决的印刷空白。 随着规范的制定和浏览器支持的增加，我将继续扩展本文。 您可能希望在Twitter上关注我，以接收有关更新的警报。

翻译自: https://thenewcode.com/961/Big-Beautiful-Dropcaps-with-CSS-initial-letter

css中首字母下沉