字母之外的CSS文字笔划

Question

好吧，现在一直在挣扎着这一点，我几乎想要外观，但现在正在努力定位项目。基本上我想在外面用笔画描边文字，这意味着webkit文字描边是没用的。

所以我想我会把两个文本元素放在一起，然后这样做。而且，这很好，除了我使用的位置：绝对的元素本质上没有高度。

的HTML看起来像这样：

<div class="hcontainer" 
    <h2>A Framework For Web Artisans</h2> 
    <span class="h2white">A Framework For Web Artisans</span> 
</div> 

这样的CSS：

h2{font-size:2em; 
margin: 10px 0; 
color:#234F70; 
-webkit-text-stroke: 10px #531A16; 
-webkit-text-fill-color:#FFF; 
letter-spacing:-2px; 
position:absolute; 
top:10px; 
left:0px;} 

.h2white{font-family:dom_bold,arial black; 
font-size:2em; 
margin: 10px 0; 
color:#FFF; 
position:relative; 
top:10px; left:0px; 
letter-spacing:-2px; 
position:absolute;} 

.hcontainer{position:relative;clear:both;height:2em;} 

所以这里的问题。 h容器需要有一个设定的高度，因为它所包含的元素是绝对定位的，因此没有高度并混乱了流动。问题在于使高度动态变化，因此我可以正确地放置元素。

我可以为每个标题制作一个单独的容器，但这似乎有点多。任何人都可以想出一个更好的方法来做我想在这里做的事情吗？或围绕身高问题的方式？

http://jsfiddle.net/calder12/9M7YZ/

Answer 1

我真的不明白它的意思是“问题是要做出高度动态的，所以我能空间的元素正确。”但是，如果您不想在.hcontainer上声明高度，则可以使用.h2white上的负顶部边距将其放在红色h2的顶部，而不是使用绝对定位。像这样：

http://jsfiddle.net/9M7YZ/10/

.h2white{ 
    font-family:lemon; 
    font-weight:bold; 
    font-size:4em; 
    color:#FFF; 
    letter-spacing:-2px; 
    margin-top:-86px; 
    position:absolute; 
}