Как использовать "двухтонные" варианты шрифтов в CSS?

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

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

Я как-то мог заставить это работать с помощью CSS следующим образом:

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

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

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

Ответы

Ответ 1

Вы можете разместить текст контура внутри h1 и использовать абсолютное позиционирование вместо оценки поля, как в этом jsFiddle: http://jsfiddle.net/6SakC/4/

Это также решает проблему с переносом текста.

Чтобы избежать дублирования текста в разметке, вы можете использовать JavaScript для создания повторяющегося текста, как в этом jsFiddle: http://jsfiddle.net/6SakC/5/ ( Это может быть не самая лучшая идея, хотя, поскольку текст может получить момент для отображения без контура, а JS иногда отключается в настройках браузера.)