{"componentChunkName":"component---src-templates-post-js","path":"/html-css/kak-primenyat-variativnie-shrifty-v-realnom-mire/","result":{"pageContext":{"slug":"kak-primenyat-variativnie-shrifty-v-realnom-mire","content":"\n<p>Использование вариативных шрифтов в реальном мире становится все хитрее. Этот пост объясняет то, как мы разобрались с ними в нашем новом проекте для сайта Ampersand и что мы выучили в процессе обучения.</p>\n\n\n\n<p class=\"author\"><em>Это дополненный перевод статьи&nbsp;</em><a href=\"https://clearleft.com/posts/how-to-use-variable-fonts-in-the-real-world\"><em>How to use variable fonts in the real world</em></a></p>\n\n\n\n<p><strong>Вариативный шрифт&nbsp;</strong>— это единичный файл шрифта, который ведет себя по разному в разной стилизации. Есть множество сайтов, которые показывают возможности вариативных шрифтов и технологию вариации шрифтов в них, но для нового сайта Ampersand конференции мне хотелось показать то, как используются вариативные шрифты в реальном мире, то есть в контексте разработки. Возможно это первый коммерческий сайт, который вообще это сделал.</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"680\" height=\"334\" src=\"https://stasonmars.ru/wp/wp-content/uploads/2020/10/1_DeXFbrZsDLRLmZnPobJJkw.png\" alt=\"\" class=\"wp-image-29\" srcset=\"https://stasonmars.ru/wp/wp-content/uploads/2020/10/1_DeXFbrZsDLRLmZnPobJJkw.png 680w, https://stasonmars.ru/wp/wp-content/uploads/2020/10/1_DeXFbrZsDLRLmZnPobJJkw-300x147.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\" /></figure>\n\n\n\n<p id=\"5df6\">Два месяца назад поддержка браузерами вариативных шрифтов была на уровне 7%, но на данный момент их поддерживает&nbsp;<a href=\"https://caniuse.com/#search=variable%20fonts\">уже более 65% бразуеров.</a>&nbsp;Safari 11, Chrome 62+, Firefox 57+ и Edge 17+ все они поддерживают вариативные шрифты(<em>Firefox делает это только на маке и если то, если вы выставите нужные параметры</em>). Это говорит о том, что вариативные шрифты это уже вполне применяемая технология на данный момент. Но как вы видите, не все её равноценно поддерживают.</p>\n\n\n\n<p id=\"0dca\">Софт с поддержкой вариативных шрифтов уже присутствует на рынке гораздо в большем количестве, чем вы можете себе предположить. Для примера, последняя версия Photoshop и Illustrator их поддерживают и если вы используете macOS 10.13+ или iOS 11+ системный шрифт San Francisco, то он кстати широко использует вариативность шрифтов. Это говорит о том, что доступность вариативных шрифтов для использования в вебе сильно ограничена. На время написания статьи было только несколько коммерческих вариативных шрифтов,&nbsp;<a href=\"http://cjtype.com/dunbar/\">Dunbar</a>&nbsp;и&nbsp;<a href=\"https://djr.com/fit/\">Fit</a>&nbsp;заметные исключения, но есть и растущее число бесплатных и экспериментальных вариативных шрифтов, как продемонстрировано в песочнице&nbsp;<a href=\"https://www.axis-praxis.org/\">Axis Praxis</a>&nbsp;и на&nbsp;<a href=\"http://v-fonts.com/\">Variable Fonts.</a></p>\n\n\n\n<p id=\"8ad5\">Из этой ограниченной палитры шрифтов, мы выбрали Mutator Sans для отображаемого текста и Source Sans для основного текста в дизайне Saul Bass. Оба шрифта позволили нам воспользоваться вариативностью изменения их насыщенности. Оба выбранных шрифта привели нас к искусной, много-ступенчатой работе при применении вариативных шрифтов на сайте. Я покажу вам как мы все это сделали и применили на сайте, с использованием упрощенных примеров кода.</p>\n\n\n\n<h2 id=\"786c\"><strong>1. Ссылки на шрифты</strong></h2>\n\n\n\n<p id=\"edaa\">Чтобы применить вариативные шрифты и заставить их работать в простом виде вам нужно сделать несколько простых манипуляций. На время написания статьи у Safari и Chrome была самая полная поддержка. Если вы сделаете так, как описано ниже, то вам понадобится последняя версия одного из этих брузеров.</p>\n\n\n\n<p id=\"c85c\">Мы скачали Source Sans вариативный шрифт с&nbsp;<a href=\"https://github.com/adobe-fonts/source-sans-pro/releases\">Github</a>&nbsp;и применили&nbsp;<code>@font-face</code>&nbsp;с форматом&nbsp;<code>truetype-variations</code>, чтобы связать его со стилями.</p>\n\n\n\n<pre class=\"wp-block-code css\"><code>@font-face {\n  font-family: 'SourceSans';\n  src: url('source-sans-variable.ttf') format('truetype');\n}</code></pre>\n\n\n\n<p>Дальше мы могли бы выставить вариативный шрифт Source Sans, как основной на странице</p>\n\n\n\n<pre class=\"wp-block-code css\"><code>html {\n  font-family: 'SourceSans', sans-serif;\n}</code></pre>\n\n\n\n<h2 id=\"eee7\"><strong>2. Выставляем насыщенность шрифта</strong></h2>\n\n\n\n<p id=\"f97f\">Исполнение вариативности шрифтов в CSS разработана, чтобы использовать существующие свойства для определенных предустановленных вариаций. Мы используем три варианта насыщенности в теле письма: обычный, полужирный и черный. Мы выставляем жирным шрифтам font-weight, обычным способом:</p>\n\n\n\n<pre class=\"wp-block-code css\"><code>.hero { font-weight: 900; }\n.blurb { font-weight: 600; }</code></pre>\n\n\n\n<p id=\"5a77\">Тем не менее, это не работает как ожидалось без изменения правила&nbsp;<code>@font-face</code>. Когда вы применяете дескриптор&nbsp;<code>font-weight</code>&nbsp;в правиле&nbsp;<code>@font-face</code>, то вы говорите браузеру, что шрифт соответствует насыщенности и только этой насыщенности. Когда вы пропускаете&nbsp;<code>font-weight</code>&nbsp;дескриптор, браузер относится к правилу так, как если бы вы выставили&nbsp;<code>font-weight: 400</code>. В этом случае, является ли ваш шрифт вариативным с указанием насыщенности или нет, эта самая насыщенность будет сжата до&nbsp;<code>400</code>.</p>\n\n\n\n<p id=\"ccf3\">Чтобы использовать параметры насыщенности и чтобы&nbsp;<code>font-weight</code>&nbsp;свойства работали так, как ожидалось, нам надо добавить диапазон использования&nbsp;<code>font-weight</code>&nbsp;в&nbsp;<code>@font-face</code>&nbsp;правило:</p>\n\n\n\n<pre class=\"wp-block-code css\"><code>@font-face {\n  font-family: 'SourceSans';\n  src: url('source-sans-variable.ttf') format('truetype');\n  font-weight: 1 999;\n}</code></pre>\n\n\n\n<p id=\"06e4\">Диапазон использования позволяет вариативным шрифтам показывать в любой насыщенности от&nbsp;<code>1 до 999</code>. Конечно же вы можете указать более сложный и точный радиоус, если хотите. В ближайшем будущем CSS Fonts уровня 4 в спецификациях, позволят вам пропускать дескрипторы диапазонов, так как дефолтное значение получит новое значение auto, следовательно можно будет использовать полный диапазон насыщенности в вариативных шрифтах и по-умолчанию будет&nbsp;<code>normal</code>&nbsp;для статичных шрифтов. Тоже самое применится и для других дискрипторов, таких как&nbsp;<code>font-stretch</code>.</p>\n\n\n\n<p id=\"3232\">С вариативными шрифтами, насыщенность ваших шрифтов не обязательно должна быть ограничена шагом в&nbsp;<code>100</code>. Это может быть любое целое число в радиусе с&nbsp;<code>1 до 999</code>. Для основного хединга, мы использовали утонченные отличия в насыщенности для каждого символа, чтобы создать более рукописный эффект в дизайне:</p>\n\n\n\n<pre class=\"wp-block-code css\"><code>b:nth-child(1) { font-weight: 300; }\nb:nth-child(2) { font-weight: 250; }\nb:nth-child(3) { font-weight: 275; }</code></pre>\n\n\n\n<h2 id=\"8e87\"><strong>3. Частичное включение в подкатегорию и создание WOFF2</strong></h2>\n\n\n\n<p id=\"deb3\">Вариативный шрифт Source Sans довольно большой, файл TrueType весит 491Kb. В основном это из-за того, что он имеет большой набор символов, практически 2000 глифов, включая Greek, Cyrillic, альтернативные знаки и символы. Вашим первым шагом будет сокращение размеров файла и создание подкатегории частичного включения в шрифт, которая больше не будет включать в себя символы, которые вам вообще никогда не понадобятся.</p>\n\n\n\n<p id=\"5c58\">Мы решили быть довольно консервативными в том, что нам будет нужно, так что мы решили взять простую латиницу, дополнение Latin-1 и Latin Extended-A диапазон символов. Всего около 400 символов, покрывая почти все европейские языки. В Unicode это U+0020–007F, U+00A0–00FF and U+0100–017F.</p>\n\n\n\n<p id=\"92b1\">Есть множество онлайн инструментов для частичного включения шрифтов в подкатегории, например такие как&nbsp;<a href=\"https://www.fontsquirrel.com/tools/webfont-generator\">Fontsquirrel</a>. Тем не менее, все инструменты, которые я видел, вырезают разные данные. Это говорит о том, что вам нужно использовать подход командной строки. В итоге мы сделали все это, используя open source pyftsubset, компонент fonttools (Смотрите подробное&nbsp;<a href=\"https://michaeljherold.com/2016/05/04/creating-a-subset-font.html\">руководство по этому</a>) Если вам больше подходит Node, вы бы могли вместого этого использовать&nbsp;<a href=\"https://www.npmjs.com/package/glyphhanger\">Glyphhanger</a>.</p>\n\n\n\n<p id=\"4d86\">Glyphhanger и fonttools (Если вы установите&nbsp;<a href=\"https://github.com/google/woff2\">Brotli компрессию</a>) выдадут готовый подкатегоризированный файл как WOFF2. Нам по факту не нужен обычный WOFF, так как уже все браузеры, которые поддерживают вариативные шрифты, также поддерживают WOFF2.</p>\n\n\n\n<p id=\"7849\">Вся эта рутина с частичным включение в подкатегорию и конверсия в WOFF2 дали нам приятно маленький файл в 29kb. Соответственно мы обновили <code>@font-face</code> правило:</p>\n\n\n\n<pre class=\"wp-block-code css\"><code>@font-face {\n  font-family: 'SourceSans';\n  src: url('source-sans-variable.woff2') format('woff2');\n}</code></pre>\n\n\n\n<p>Итак, эта работа сделана для браузеров, которые поддерживают вариативные шрифты. Но это едва ли половина истории.</p>\n\n\n\n<h2 id=\"bd3a\"><strong>4. Задаем шрифты для неподдерживающих браузеров</strong></h2>\n\n\n\n<p id=\"3fb8\">Вариативные шрифты рендерятся на браузерах, которые не поддерживают вариативность в шрифтах, но очевидно у вас нет контроля над тем какая насыщенность или другой подобный пример будет использоваться.</p>\n\n\n\n<p id=\"c782\">Чтобы обойти это затруднение, вам надо предоставить невариативные шрифты для подобных браузеров. На время написания,&nbsp;<a href=\"https://www.w3.org/TR/2018/WD-css-fonts-4-20180410/#src-desc\">CSS Fonts Module Level 4</a>&nbsp;указывал, что вариативные шрифты могут быть обозначены с точным&nbsp;<code>fotmat()</code>&nbsp;значением:</p>\n\n\n\n<pre class=\"wp-block-code css\"><code>@font-face {\n   font-family: 'SourceSans';\n   src: url('source-sans-variable.woff2') format('woff2-variations');\n }</code></pre>\n\n\n\n<p>Это позволяет вам создать @font-face правила, как тут:</p>\n\n\n\n<pre class=\"wp-block-code css\"><code>@font-face {\n  font-family: 'SourceSans';\n  src: url('source-sans-variable.woff2') format('woff2-variations'),\n       url('source-sans-regular.woff2') format('woff2');\n  font-weight: 400; \n}\n\n@font-face {\n  font-family: 'SourceSans';\n  src: url('source-sans-variable.woff2') format('woff2-variations'),\n       url('source-sans-black.woff2') format('woff2');\n  font-weight: 900; \n}</code></pre>\n\n\n\n<p>Предшествующий код указывает на файлы шрифтов единого стиля с&nbsp;<code>@font-face</code>&nbsp;правилом включающим насыщенность шрифта, так же как и обычно. Вы затем можете повторить обращение к файлу вариативного шрифта в каждом правиле. Браузеры, которые поддерживают вариативные шрифты скачают файл отмеченный форматом&nbsp;<code>(‘woff2-variations’)</code>, а бразуеры которые не поддерживают, скачают одностильные шрифт, отмеченный как&nbsp;<code>(‘woff2’)</code>.</p>\n\n\n\n<p>НО! Только Safari поддерживает&nbsp;<code>format(‘woff2-variations’)</code>&nbsp;и этот&nbsp;<a href=\"https://medium.com/@clagnut/upcoming-changes-to-the-css-for-variable-fonts-4494b3b7ecdc\">синтаксис меняется</a>, что скорее приведет к беспорядку в действиях, если нам понадобятся другие поддерживаемые браузеры, чтобы получить вариативный шрифт. Таким образом, мы прибегли к другой, более многословной тактике. Во-первых, мы дали вариативному шрифту другое имя в первом одностилевом написании, таким образом это разделит ссылки на вариативные шрифты от одностилевых шрифтов:</p>\n\n\n\n<pre class=\"wp-block-code css\"><code>@font-face {\n  font-family: 'SourceSansVariable';\n  src: url('source-sans-variable.woff2') format('woff2');\n  font-weight: 1 999;\n}\n\n@font-face {\n  font-family: 'SourceSans';\n  src: url('source-sans-black.woff2') format('woff2'),\n         url('source-sans-black.woff') format('woff');\n  font-weight: 900; \n}\n\n@font-face {\n  font-family: 'SourceSans';\n  src: url('source-sans-semibold.woff2') format('woff2'),\n         url('source-sans-semibold.woff') format('woff');\n  font-weight: 600; \n}</code></pre>\n\n\n\n<p>Потом нам понадобится написать правило&nbsp;<code>@supports</code>, чтобы убедиться в том, что правильные шрифты попали в нужные браузеры:</p>\n\n\n\n<pre class=\"wp-block-code css\"><code>html {\n  font-family: 'SourceSans' sans-serif;\n}\n\n@supports (font-variation-settings: normal) {\n  html {\n    font-family: 'SourceSansVariable', sans-serif;\n  }\n}</code></pre>\n\n\n\n<p id=\"ceeb\">В коде выше, одностилевые шрифты указаны как стандарт, тем не менее, если браузер поддерживает вариативные шрифты&nbsp;<em>(это разумное предположение, которое может быть рассужено с помощью font-variation-setting)</em>, то он получит вариативный шрифт взамен.</p>\n\n\n\n<p id=\"b4d5\">И конечная шутка. Для точно работающего подхода, каждый раз когда вы видите вариативные шрифты, вы должны очевидно указывать насыщенность шрифта, даже когда она должна быть 400 или нормальной. С вариативным шрифтом, понимание браузерами дефолтной насыщенности шрифта может слегка отличаться друг от друга. В нашем тестировании, Firefox отрендерил стандартный текст значительно легче, чем Safari или Chrome, пока мы не сделали это:</p>\n\n\n\n<pre class=\"wp-block-code css\"><code>html {\n  font-family: 'SourceSans' sans-serif;\n   font-weight: 400;\n}\n\n@supports (font-variation-settings: normal) {\n  html {\n    font-family: 'SourceSansVariable', sans-serif;\n    font-variation-settings: \"wght\" 400;\n  }\n}</code></pre>\n\n\n\n<p></p>\n","type":"html-css","date":"2020-10-28T11:45:40.000Z","acf":{"seo_desc":"Использование вариативных шрифтов в реальном мире становится все хитрее. Этот пост объясняет то, как мы разобрались с ними в нашем новом проекте для сайта Ampersand и что мы выучили в процессе обучения.","pub_date":"2018-05-01","keywords":"css вариативные шрифты, как применять вариативные шрифты, вариативные шрифты","tags":"css, шрифты"},"title":"Как применять вариативные шрифты в реальном мире","id":"4b1e5798-655e-5734-9c65-d8ebd11e90d3","excerpt":"<p>Использование вариативных шрифтов в реальном мире становится все хитрее. Этот пост объясняет то, как мы разобрались с ними в нашем новом проекте для сайта Ampersand и что мы выучили в процессе обучения.</p>\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/10/DglYtvO7Bn0-4.jpg"},"interesting":[{"title":"Размеры шрифтов CSS. Пиксели vs Em vs Rem vs Проценты vs Viewport единицы","slug":"razmery-shriftov-css-pikseli-vs-em-vs-rem-procenti-vs-viewport-edinitsy","type":"html-css"},{"title":"Улучшаем производительность веб-шрифтов на реальном примере","slug":"uluchshaem-proizvoditelnost-web-shriftov-na-realnom-primere","type":"html-css"},{"title":"Как применять вариативные шрифты в реальном мире","slug":"kak-primenyat-variativnie-shrifty-v-realnom-mire","type":"html-css"}]}},"staticQueryHashes":["3576131997","63159454"]}