Question

我正在尝试用一个大的第一个字母和其他字母的间距来设置一个单词。我目前的解决方案非常难看：请参阅here（以及发生故障的jsfiddle here）。

理想情况下，不要像这样丑陋：<dropcap>T</dropcap><span style="letter-spacing:.2em;">HERE</span><span style="margin-left:-.2em;"> is</span> nothing more unreasonable...

我可以像这样明智：<dropcap>THERE</dropcap> is nothing more unreasonable...

有什么想法吗？感谢。

Answer 1

您可以使用:first-letter pseudo-element.

:first-letter伪元素是主要用于创建常见印章效果，如滴帽。这个伪元素代表了第一个格式的第一个字符块级元素中的文本行，内联块，表格标题，a 表格单元格或列表项目。

IE8 +和所有现代浏览器都支持它。

例如：http://jsfiddle.net/HTnBP/4/

对于问题的另一半，请尝试：

T<span>HERE</span>

div > span:first-child {
    letter-spacing: .2em;
    margin-right: -.2em
}

http://jsfiddle.net/HTnBP/5/

我真的没有看到使用自定义dropcap元素的重点。除非您不介意添加extra complexity以支持IE8及更低版本，否则您根本不关心这些浏览器。

Answer 2

或许你可以使用我找到的这个JS解决方案

http://webplatform.adobe.com/dropcap.js/

设置特定单词的第一个字母等

2 个答案: