Создание прозрачной сквозной или текстурированный стиль шрифта

Question

Можно ли указать стиль шрифта (цвет шрифта и т.д.), так что вместо того, чтобы использовать сплошной цвет, что мог:

• Иметь HTML-элемент поверх другого и сделать шрифт прозрачным, поэтому я могу пропустить текст через верхний элемент и увидеть содержимое нижнего элемента через область букв?

• Укажите текст с изображениями (например, не анимированный), поэтому я могу использовать текстурированный текст вместо сплошных цветов?

Возможно или нет, используя любой уровень/версию CSS или HTML5 или какую-либо собственную спецификацию веб-браузера?

Возможно ли определить область каждой буквы, по крайней мере, с помощью Canvas, или она должна выполняться полностью вручную или невозможна в виде простого HTML/HTML5/CSS?

Answer 1

Я думаю, что первый, о котором вы говорите, похож на обтравочную маску в Illustrator? Если это так, то есть функция background-clip, которая описана here on CSS-Tricks, но это только поддержка браузеров webkit на данный момент, я не уверен в IE10, так как это имеет дополнительную совместимость, чем другие версии IE.

Быстро Google-узором «Узорчатый текст с помощью CSS» показан this page, который объясняет это.

EDIT ---------------

Для WebKit браузерах является webkit-background-clip и для IE9 + это просто background-clip

Answer 2

Если вы хотите установить прозрачность текст просто использовать:

color: rgba(0, 0, 0, .5); 

Смотреть подробнее здесь http://www.w3schools.com/cssref/css_colors_legal.asp

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

Answer 3

Вы можете попробовать создать svg mask с текстом, который хотите использовать, а затем embed the SVG code directly into the HTML. Этот подход должен работать в большинстве современных браузеров.