Вы, вероятно, уже читали о различных вариантах для расширенной веб-типографики: некоторые из них используются для улучшения четкости, другие выполняют только декоративные фцнкции. Росчерки и дополнительные стили определенно попадают во вторую категорию.

Росчерки — это дополнительные знаки, в которых есть типографические завитки. Некоторые шрифты, такие как Zapfino, включают витиеватые росчерки, которые похожи на старинный рукописный текст, а у других шрифтов отличия довольно небольшие, например, как в шрифте French Canon typeface, созданном Igino Marini, который используется в этом уроке.

Пример росчерков шрифта Zapfino

Такие типографические росчерки можно добавить на веб-страницу с помощью простого значения CSS3 для свойства задания особенностей шрифта, конечно, это можно сделать, только если шрифт OpenType, у которого есть вариант с росчерками, правильно подключен к этой веб-странице и браузер, в котором эта страница просматривается, поддерживает особенности шрифтов OpenType:

@font-face { 
        font-family: "French Canon";
        src: url("french-canon.otf");
        font-weight: 100;
}
h1 {
        font-family: "French Canon", cursive;
        font-feature-settings: "swsh";
}

Сейчас уже нет необходимости в использовании приставок производителей для современных версий браузеров.

В результате получим следующее:

Обратите внимание на разницу во внешнем виде заголовка без использования росчерков в первом случае и с росчерками во втором случае.

Использование росчерков для первых букв и контекстных росчерков

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

body p:first-of-type:first-letter {
        font-size: 300%;
        display: inline-block;
        float: left;
        margin-right: .5rem;
        font-feature-settings: "swsh";
}

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

h1 {
        font-feature-settings: "cswh";
}

У некоторых шрифтов OpenType есть второй вариант букв с росчерками, который можно задать с помощью следующей записи:

h1 {
        font-feature-settings: "cswh" 2;
}

Обратите внимание, ранее W3C в модуле шрифтов CSS3 предлагался другой вариант, запись font-variant-alternates: swash. Но на сегодняшний момент он почти не поддерживается браузерами.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание классических типографских эффектов: перенос слов
• Тетрадка в линейку с расположением на ней текста на SVG и CSS
• Полностью симметричное расположенных заголовков при помощи CSS