Как использовать «два -тонированных» варианта шрифта в CSS?

У некоторых шрифтов есть вариант для контура и заполнения, и если вы используете их для перекрывающегося текста, он рисует контурный или затененный штрих поверх заполненного текста.Это отличается от простого контура, который обводит текст, как -webkit -текст -штрих -цвет, поскольку иногда заполненный шрифт содержит штриховку или другие детали.

Вот несколько примеров шрифтов, предназначенных для использования таким образом.

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

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

Мне удалось заставить это работать, используя такой CSS:

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

Это создает два диапазона H1 и использует верхнее поле -для перемещения контура поверх заполненного.

Однако это не кажется мне идеальным. Две проблемы:

• Я не хочу дублировать текст в html.
• Мне приходится угадывать верхнюю границу -методом проб и ошибок.
• Если текст переносится, это больше не работает.

Есть лучший способ это сделать? Я могу жить с необходимостью дублировать текст, но мне бы очень хотелось более автоматический способ позиционирования.

Спасибо!