CSS 텍스트 획이 글자 바깥 쪽

Question

좋아, 이제 조금 어려움을 겪어 왔지만 나는 원하는 모양을 가지고 있지만 항목을 배치하는 데 어려움을 겪고있다. 기본적으로 외부에 스트로크가있는 스트로크 된 텍스트가 필요합니다. 즉, 웹킷 텍스트 스트로크는 쓸모가 없습니다.

그래서 두 개의 텍스트 요소를 서로 겹쳐 놓고 그 방향으로 배치 할 것이라고 생각했습니다. 그리고 그것은 위대한 작품, 제외하고 위치를 사용하고 있습니다 : 절대 요소는 본질적으로 높이가 없습니다.

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;} 

그래서 여기에 문제가 있습니다. hcontainer는 높이가 없어서 흐름을 엉망으로 만들 때 높이가 설정되어 있기 때문에 높이가 설정되어 있어야합니다. 문제는 그 높이를 동적으로 만들어 요소를 적절히 배치 할 수있게하는 것입니다.

각 제목에 대해 별도의 컨테이너를 만들 수 있지만 그 정도는 조금 비쌉니다. 누구든지 내가 여기서하려는 일을하는 더 좋은 방법을 생각할 수 있습니까? 또는 높이 문제 주위에 방법?

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

Answer 1

정말 그 의미를 이해하지 못하는 "문제는 그래서 공간 수있는 요소가 제대로 그 높이가 동적하고 있습니다." 그러나 .h 컨테이너에 높이를 선언 할 필요가 없으면 절대 배치를 사용하는 대신 .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; 
}