23 Июнь

Шрифты со слоями в CSS

Июнь 23
Автор SeRbGa
Печать Эл. почта

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

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

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

Слоеные шрифты в браузере.

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

Слоеное представление шрифтов с Div-ами.

Для начала нужно создать несколько Div-ов и назначить и ID:

<!-- HTML-->
<div id="first">
 <h1>Using Layer Fonts In CSS</h1>
</div>
<div id="second">
 <h1>Using Layer Fonts In CSS</h1>
</div>
<div id="third">
 <h1>Using Layer Fonts In CSS</h1>
</div>
/* CSS */
#first, #second, #third{
 display: block;
 position:absolute;
 top:10px;
 left:5px;
}
h1 {
 font:5em 'One';
 color:rgba(200,0,0,.85);
}
#second h1 {
 font-family:'Two';
 color:rgba(0,200,0,.85);
 }
#third h1 {
 font-family:'Three';
 color:rgba(0,0,200,.85);
}

Это действительно работает, это включает создание Div-а для каждого слоя шрифта и затем повторения того же самого содержания в каждом Div-е. Получающееся наложение.

Слоеные шрифты с псевдо элементами

Есть другой, относительно простой способ при помощи ::before и ::after псевдо элементов текст может быть выложен слоями, не загромождая HTML.

Вот то, что можно получить:

( Вы можете загрузить файлы здесь. Шрифт, которые использован состоит из 2 стилей. Я подрузил каждый файл шрифта, используя правило @fontface.)

Мы создаем тег H1, содержащий текст, который будет выложен слоями, а затем заключаем его в Div.

<div>
 <h1 text="Using Layer Fonts In CSS">Using Layer Fonts In CSS</h1>
</div>

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

h1 {
 font: 5em ‘Display’;
 color:rgba(100,60,20,1);
}

::before и ::after различный шрифт и цвет:

@font-face {
font-family: 'Display';
src: url("fonts/Basic/Scratch Basic.ttf");
}
@font-face {
font-family: 'Two';
src: url("fonts/Detail/Scratch Detail.ttf");
}
h1::before {
 content: attr(text);
 font-family:'Two';
 color:rgba(150,150,100,.5);
}
h1::after {
 content: attr(text);
 font-family:'Three';
 color: rgba(180,150,50,.5);
}

Чтобы использовать ::before и ::after, чтобы быть сверху h1, мы должны дать им position - absolute с top и left = 0, и затем обернуть все это в относительный (relative) Div.

Чтобы удостовериться, что ::before и ::after придерживаются заголовка, когда окно изменено и h1 и его Div должны быть показаны как блочный элемент:

div {
 position: relative;
 top:10px;
 left:5px;
 background-color: rgba(200,150,150,0.2);
 border-radius: 10px;
 max-width:1190px;
}

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