Статьи

Радость подмножеств: скрещивание веб-шрифтов

Октябрь 24, 2018

95% веб-дизайна — это типографика. Оставшиеся 5% тратятся на попытки исправить бесконечную рекурсию и ругательство бегуна. Однако когда мы говорим «веб-типографика», мы редко имеем в виду дизайн шрифтов. Выбор, сопряжение и настройка шрифтов являются более распространенным видом деятельности, а типографский дизайн считается более специализированным и эзотерическим занятием.

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

body {
    font-family: Punctuation Font, Alphanumeric Font, Fallback Font;
}

К сожалению, на самом деле «подмножество» шрифта (сокращение его внутреннего набора символов до тех символов, которые вы хотите отобразить) требует использования программного обеспечения для разработки шрифтов, которое является невероятно дорогим , недоступным на вашей платформе или способным заполнить ругательства. квота в моменты установки убогой вещи .

До сих пор Благодаря «одному странному трюку», который я обнаружил с помощью Google Fonts, теперь я могу предложить вам способ изобретать подмножества без необходимости деконструировать эти шрифты вручную. Все дело в text

JAVASCRIPT

Нет, для этого не требуется JavaScript (я бы этого не делал). Я говорю о строковом javascript Для редизайна сайта Neontribe я решил использовать популярную платформу блогов Ghost , которая построена на JavaScript. Поскольку я немного нервничаю, я подумал, что было бы забавно рекламировать этот факт, отображая термин «JavaScript» в виде отвратительного шрифта. Вы видите?

Создано на JavaScript написано шрифтом Хэллоуин

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

Вместо этого я сделал это: 

 <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Creepster&amp;text=JAVSCRIPT">

Обратите внимание на вышеупомянутый text Это говорит Google Fonts, что вас интересует только предоставленный набор символов (да, 2-я буква «А» отсутствует; нам нужен только один параметр, указанный в параметре). Это побуждает Google динамически создать версию шрифта Creepster Обратите внимание на параметр kit 

 @font-face {
    font-family: "Creepster";
    font-style: normal;
    font-weight: 400;
    src: local("Creepster"), local("Creepster-Regular"), url("http://themes.googleusercontent.com/licensed/font?kit=qZohWPV4p-yb_ujchMXyh1S856IudzFr_gkPycOOILA") format("woff");
}

Когда я открываю инструменты разработчика Chrome и просматриваю шрифт, это — восхитительно — то, что я вижу. Перед кэшированием он стоит всего 2,9 КБ.

Создано на JavaScript написано шрифтом Хэллоуин

Использование параметра text Что если бы мы использовали один шрифт, чтобы закрыть пробелы, оставленные другим?

Ampersandwich

Позвольте мне описать простой пример, для которого доступна демонстрация CodePen . Давайте представим, что наше руководство по стилю диктует, что шрифт Bevan должен использоваться для заголовков второго уровня ( <h2> Коренастый! Дело в том, что мы бы предпочли, чтобы любые экземпляры амперсандов использовали буквенные формы из более элегантного шрифта, такого как Lobster 2 . Это действительно просто нюанс, но нам нравится нюанс.

Вот как это будет выглядеть:

Создано на JavaScript написано шрифтом Хэллоуин

Чего мы хотим избежать, так это добавления какой-либо разметки. Это либо усложнит редакционный процесс (что мы предпочли бы сделать в Markdown), либо потребует включения какого-то ужасного JavaScript-анализа. 

 /* No, thank you */
<h2>Rock <span class="amp">&amp;</span> Roll</h2>

/* Yes, please */
## Rock &amp; Roll

Вместо этого мы начнем с использования textLobster 2 . Это всего лишь 2 КБ для вас; Полный Лобстер 2 составляет 78,8 КБ! Мы должны URL кодировать ‘&’, следовательно, %26 

 @import url(http://fonts.googleapis.com/css?family=Lobster+Two&amp;text=%26);

Мы также импортируем Bevan , но весь шрифт. Возможно, вы захотите установить для него значение Basic Latin, если оно предназначено для заголовков, но я приведу все это для краткости в примере кода. 

 @import url(http://fonts.googleapis.com/css?family=Bevan);

Наконец, мы редактируем файл CSS со стеком шрифтов для элементов <h2> 

 h2 {
    font-family: Lobster 2, Bevan, serif;
}

Благодаря наследованию стека шрифтов Lobster 2 будет охватывать любые случаи амперсандов. Для всех оставшихся символов мы обращаемся к Bevan, а затем — просто чтобы быть уверенным — в общий системный шрифт. Нет дополнений разметки, нет JavaScript и FontForge.

Разделение проблем

То, что мы имеем здесь, является необычным проявлением принципа «разделения интересов» W3C . Делая задачу дифференцирования этого амперсанда от одного из CSS и его импортированных файлов шрифтов, мы избавляем от необходимости менять базовый документ. Это не только делает документ более понятным и более легким в обслуживании, но делает <span class="amp" /> 

 ## Rock &amp; Roll
/* or */
h2. Rock &amp; Roll
/* or simply in a text input... */
Rock &amp; Roll

Вот демонстрация CodePen, если вы хотите поближе взглянуть:

42
Share: