css中首字母下沉
学习CSS：完整指南
无论您是刚刚开始使用基础知识还是想探索更高级CSS，我们都已构建了完整的指南来帮助您学习 CSS。
落帽
首字下沉是一种装饰形式，有时在一段文本的开头使用； 首字母深入多行，并在这些行内缩进正文。
这是一种排版传统，与排版本身的历史一样悠久，如今，我们可以使用CSS来使用::first-letter伪元素来模仿它。 然而，众所周知，第一个字母的样式笨拙，但是建议的initial-letter属性旨在解决这个问题。 让我们检查一下它是什么，我们可以使用它做什么，以及将来可以期待什么。
目前的方法
让我们从一个演示开始； 一段文字。
现在，我们使用::first-letter伪元素定位该段落中的第一个字符。 当前的样式化方法是使用p::first-letter { float: left; }p::first-letter { float: left; }，将其从段落中的流中拉出，然后相应地调整大小：
这还不错，可以进一步调整行高，位置等。 它也得到很好的支持 。 但这当然不是完美的。 要正确享受首付上限可以给我们带来的好处，我们需要更精确的控制和灵活性。
一种新的解决方案
W3C目前正在将 “initial-letter属性作为“编辑草稿”来讨论 （可能在标准化过程中尽早进行），旨在为我们提供所需的精确印刷控制。 它与first-letter结合使用。
它使用的第一个值决定了首字母的大小，取决于它占用了多少行。
p::first-letter {initial-letter: 3;}
看起来像这样：
注意事项
对不起，就在那儿停下来。 对此的支持仍然很差。 在撰写本文时，仅当您使用Safari OS X或iOS浏览器时，并且仅由于我们使用的是前缀的Webkit语法，以上演示才会正确显示：-webkit-initial-letter: 3;
如果您看不到我看到的内容，请看以下屏幕截图：
您可能会注意到的第一件事是不同的字体。 没有浏览器似乎可以很好地使用首字母和网络字体。 安装在系统上的所有字体都可以正常工作，尽管必须明确声明它们。 使用普通serif或sans-serif;字体堆栈的末尾似乎没有任何影响。 您将需要诸如font-family: "my web font", arial;类的东西font-family: "my web font", arial;克服浏览器的后备功能。
您将看到的第二件事是页面右侧的文本顶行。 这是一个错误，因此暂时需要解决方法。 令人高兴的是，可以通过将首字母的边界强制超出包含段落的顶部（从而使浏览器理解顶行不应等于整个容器的宽度）来实现。 较大的margin-top值可以解决问题：
@jensimmons这是非浏览器工程师试图解释我*正在*发生的事情的尝试^ Ian /tODqdaKX40
— Envato Tuts + Web（@wdtuts） 4月14日
第二值
好吧，继续吧。 第二个值的initial-letter接受是可选的。 它确定字母下沉多少行，例如：
p::first-letter {initial-letter: 3 2;}
在这里，我们声明该字母深三行，但仅下沉两行。
这被称为“下沉的首字母”，而不是真正的“首字下沉”。 同样，如果您没有看到期望的结果，请看下面的截图：
响应Swift
大写字母大写看起来很棒，但是在狭窄的视口中，您应该考虑将大写字母作为响应式排版的一部分。 您可能会在小屏幕上看到较小的正文副本，因此也可以考虑使用成比例的首字下沉。
/* set base paragraph styles */p {font-size: 1em;}/* set base drop cap styles */p::first-letter {initial-letter: 2;color: #c69c6d;margin: 1em .2em 0 0;}/* mobile first media query */@media only screen and (min-width: 800px) {/* set paragraph styles for larger screens */p {font-size: 1.25em;}/* set drop cap styles for larger screens */p::first-letter {initial-letter: 3 2;margin: 1em .5em 0 0;}}
倒退
如果要在不受支持的浏览器中查看这些演示，您可能会想知道如何最好地避免看起来荒谬的结果：
除了使字母实际上表现得像首字下沉的东西以外，我们正在获得所有样式。 使用CSS功能查询，您可以有选择地应用样式。 将您的@supports样式包装为@supports条件，如下所示：
@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {/* your initial-letter styles here */}
如果支持首字母缩写，则将应用样式；否则，将不应用样式。
注意：甚至CSS功能查询也没有普遍支持 ，因此请多加注意。 Modernizr将是一个更安全的选择。
更进一步，您甚至可能想要应用Adobe的dropcap.js JavaScript polyfill ，但我们不会在这里进行介绍。 Dudley Storey 在他的博客上做了出色的工作。
结论
现在还很早，但initial-letter大有希望。 请留意其他属性，例如initial-letter-align，这将有助于非罗马字母，而initial-letter-wrap则将使周围的文本更加紧密。
这里使用的演示功能非常强大，但是可以想象一下装饰排版的大门会打开！ 原则上，我们可以随意在首字母上使用许多熟悉的属性，包括：
有关其进度的最新信息，最好的选择是关注@jensimmons （她无所不在 ）。
翻译自: /tutorials/better-css-drop-caps-with-initial-letter--cms-26350
css中首字母下沉
