Некоторые шрифты имеют вариант для контура и заполнения, и если вы используете их при перекрывающемся тексте, он рисует очерченный или заштрихованный штрих над заполненным текстом. Это отличается от схемы, которая гласит текст, такой как -webkit-text-stroke-color, что даст вам, так как иногда заполненный шрифт содержит затенение или другие детали.
Вот несколько примеров шрифтов, предназначенных для использования таким образом.
http://www.myfonts.com/fonts/matchandkerosene/duotone/
http://www.myfonts.com/fonts/scrowleyfonts/stomp/
Я как-то мог заставить это работать с помощью CSS следующим образом:
Это создает два промежутка H1 и использует верхний край для перемещения контура, расположенного поверх заполненного.
Однако для меня это не кажется идеальным. Две проблемы:
- Я не хочу дублировать текст в html.
- Я должен оценивать верхний маркер методом проб и ошибок.
- Если текст обертывается, это больше не работает.
Есть ли лучший способ сделать это? Я могу жить с необходимостью дублировать текст, но мне бы очень хотелось, чтобы более автоматический способ позиционирования.
Спасибо!