CSS에서 "2 톤"글꼴 변형을 사용하는 방법은 무엇입니까?

Question

특정 글꼴에는 외곽선 및 채우기 변형이 있으며, 중첩 텍스트에이 글꼴을 사용하면 채워진 텍스트 위에 윤곽선 또는 음영 획을 그립니다. 이것은 채워진 글꼴에 음영이나 다른 세부 사항이 포함되어 있기 때문에 -webkit-text-stroke-color와 같은 텍스트를 쓰는 외곽선과는 다릅니다.

다음은 이러한 방식으로 사용하도록 설계된 글꼴의 예입니다.

http://jsfiddle.net/6SakC/2/

이 두 H1 스팬을 만들어에 상단 여백을 사용

http://www.myfonts.com/fonts/matchandkerosene/duotone/

http://www.myfonts.com/fonts/scrowleyfonts/stomp/

나는 종류의 수 같은 CSS를 사용하여 작업이 제대로 처리되지 못했습니다 채워진 꼭대기에 윤곽선 하나를 옮깁니다.

그러나 이것은 나에게 이상적인 것 같지 않습니다. 두 가지 문제 :

• 나는 HTML의 텍스트를 복제하고 싶지 않습니다.
• 시행 착오로 인해 여백을 상상해 봐야합니다.
• 텍스트가 줄 바꿈되면 더 이상 작동하지 않습니다.

더 좋은 방법이 있나요? 나는 텍스트를 복제해야만 할 때 살 수 있지만, 실제로 위치를 지정하는 데 더 자동적 인 방법을 원합니다.

감사합니다.

Answer 1

는이 jsFiddle에서와 같이, H1 내부 윤곽 텍스트를 배치하는 대신 마진을 추정하는 절대 위치를 사용할 수있다 : 또한, 텍스트 배치에 대한 문제를 해결 http://jsfiddle.net/6SakC/4/

한다.

마크 업에서 텍스트가 중복되지 않도록 jsFiddle : http://jsfiddle.net/6SakC/5/과 같이 자바 스크립트를 사용하여 중복 텍스트를 만들 수 있습니다 (텍스트가 표시되지 않는 순간이 있기 때문에 최선의 방법은 아닙니다. 윤곽선 및 브라우저 설정에서 JS가 때때로 비활성화됩니다.)