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

Question

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

11

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

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

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

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

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

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

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

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

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

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

Спасибо!

joeld 27 июль 2012, в 02:25

Источник

Теги:

html

css

html5

webfonts

1 ответ

Ещё вопросы

Brilliand · Accepted Answer · 2012-07-27T01-37-00.000Z

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

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

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