使用 CSS 的首字下沉答案

【问题标题】：Drop-caps using CSS使用 CSS 的首字下沉
【发布时间】：2013-02-01 18:09:51
【问题描述】：

如何使每个段落的第一个字符看起来像这样：

我更喜欢只使用 CSS。

【问题讨论】：

<span style="float: left; font-size: 3em"> 也许？
跨浏览器支持重要吗？

标签： html css

【解决方案1】：

p:first-letter {
    float: left;
    font-size: 5em;
    line-height: 0.5em;
    padding-bottom: 0.05em;
    padding-top: 0.2em;
}

根据需要调整字体、填充、行高。

示例：http://jsfiddle.net/RLdw2/

【讨论】：

很棒的解决方案。 Wiki 必须用您的答案更新其页面；）

【解决方案2】：

添加这个p:first-letter{font-size:50px}

DEMO

这是图片中显示的满足您要求的确切解决方案

DEMO 2

WIKIPEDIA EXPLANATION

【讨论】：

所有浏览器都支持吗？
不，我不希望第一个字母更大，我希望它与图像中显示的完全一致。
不是 OP 要求的。

【解决方案3】：

see DEMO here...

CSS///

p{ width:300px; border:1px solid #000;}
p:first-letter
{font-size:52px;color:#8A2BE2;font-weight:bold;float: left;margin-top:4px;}

HTML///

<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseduo element to give effect to
the first characters  of any HTML element.</p>


<p>The first character of this paragraph will be 52px big
as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseduo element to give effect to
the first characters  of any HTML element.</p>

【讨论】：