1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
|
---
title: Веб-шрифты
slug: Learn/CSS/Styling_text/Web_fonts
translation_of: Learn/CSS/Styling_text/Web_fonts
original_slug: Learn/CSS/Styling_text/Веб_шрифты
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div>
<p class="summary">В первой статье модуля, мы изучали основные функции CSS доступные для стилизации шрифтов и текста. В этой статье мы продвинемся дальше изучая веб-шрифты в деталях — они позволяют вам загружать пользовательские шрифты вместе с вашей веб-страницей, <span class="tlid-translation translation" lang="ru"><span title="">чтобы обеспечить более разнообразный, индивидуальный стиль текста.</span></span></p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Предварительные требования:</th>
<td>Основная компьютерная грамотность, основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основы CSS текста и шрифта</a>.</td>
</tr>
<tr>
<th scope="row">Задача:</th>
<td>
<p>Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно.</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Краткое_повторение_семейств_шрифтов">Краткое повторение семейств шрифтов</h2>
<p>Как мы рассматривали в <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальной стилизации текста и шрифта</a>, шрифты применённые к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:</p>
<pre class="brush: css notranslate">p {
font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}</pre>
<p>Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространённых системах — так называемые <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Безопасные веб-шрифты</a>. <span class="tlid-translation translation" lang="ru"><span title="">Вы можете использовать стек шрифта для указания предпочтительных шрифтов</span></span>, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, <span class="tlid-translation translation" lang="ru"><span title="">но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.</span></span></p>
<h2 id="Веб-шрифты">Веб-шрифты</h2>
<p>Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, <span class="tlid-translation translation" lang="ru"><span title="">это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своём распоряжении именно те шрифты, которые вы укажете.</span></span> Замечательно! Требуемый синтаксис выглядит примерно так:</p>
<p>Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:</p>
<pre class="brush: css notranslate">@font-face {
font-family: "myFont";
src: url("myFont.woff");
}</pre>
<p><span class="tlid-translation translation" lang="ru"><span title="">Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:</span></span></p>
<pre class="brush: css notranslate">html {
font-family: "myFont", "Bitstream Vera Serif", serif;
}</pre>
<p><span class="tlid-translation translation" lang="ru"><span title="">Синтаксис становится немного сложнее, чем этот;</span> <span title="">мы вдадимся в подробности ниже.</span></span></p>
<p><span class="tlid-translation translation" lang="ru"><span title="">Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:</span></span></p>
<ol>
<li>Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.</li>
<li>В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие <span class="tlid-translation translation" lang="ru"><span title="">как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.</span></span></li>
</ol>
<div class="note">
<p><strong>Обратите внимание</strong>: Веб-шрифты как технология поддерживается в Internet Explorer начиная с 4 версии!</p>
</div>
<h2 id="Активное_изучение_пример_веб-шрифта">Активное изучение: пример веб-шрифта</h2>
<p>Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. <span class="tlid-translation translation" lang="ru"><span title="">Сложно продемонстрировать это на встроенном живом примере</span></span>, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса</p>
<p>Вы должны использовать файлы <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> как отправную точку добавляя в них ваш код (см. <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">живой пример</a>). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле <code>web-font-start.css</code> вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера.</p>
<h3 id="Поиск_шрифтов">Поиск шрифтов</h3>
<p>В этом примере мы будем использовать два веб-шрифта, один для заголовков, и другой для основного текста. Для того чтобы начать нам необходимо найти файлы шрифтов, которые содержат эти шрифты. Шрифты созданы шрифтовыми "цехами" и хранятся в разных форматах фалов. Как правило существует три типа сайтов, где вы можете получить шрифты:</p>
<ul>
<li>Бесплатный дистрибьютер шрифтов: <span class="tlid-translation translation" lang="ru"><span title="">это сайт, который предоставляет бесплатные шрифты для скачивания</span></span> (<span class="tlid-translation translation" lang="ru"><span title="">могут существовать некоторые условия лицензии, например, указание создателя шрифта)</span></span>. Примеры включают <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a>, и <a href="https://everythingfonts.com/">Everything Fonts</a>.</li>
<li>Платный дистрибьютер шрифтов: это сайт, который предоставляет шрифты за плату, например <a href="http://www.fonts.com/">fonts.com</a> или <a href="http://www.myfonts.com/">myfonts.com</a>. Также вы можете купить шрифты напрямую у производителя шрифтов, например <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a>, или <a href="http://www.exljbris.com/">Exljbris</a>.</li>
<li>Сервис онлайн шрифтов: это сайт, который предоставляет вам шрифты, делая весь процесс проще. Смотрите раздел {{anch("Использование онлайн-сервиса шрифтов")}} для более подробной информации.</li>
</ul>
<p>Давайте найдём какие-нибудь шрифты! Отправляйтесь на <a href="https://www.fontsquirrel.com/">Font Squirrel</a> и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдёте каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).</p>
<p>В любом случае распакуйте архив со шрифтом (веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию). Вы можете обнаружить несколько файлов шрифтов в упаковке (архиве) — некоторые шрифты распространяются как семейство с различными доступными вариантами, например тонкий, средний, жирный, курсив, тонкий курсив и т.д. <span class="tlid-translation translation" lang="ru"><span title="">В этом примере мы просто хотим, чтобы вы позаботились о едином файле шрифта для каждого варианта.</span></span></p>
<div class="note">
<p><strong>Обратите внимание</strong>: В разделе "Find fonts" в колонке справа, вы можете кликать по различным тегам и классификациям чтобы отфильтровать отображаемые варианты для выбора.</p>
</div>
<h3 id="Генерация_требуемого_кода">Генерация требуемого кода</h3>
<p>Теперь вам надо будет сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта проделайте следующие шаги.</p>
<ol>
<li><span class="tlid-translation translation" lang="ru"><span title="">Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.</span></span></li>
<li>Перейдите на Fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a>.</li>
<li>Выгрузите два ваших файла шрифтов используя кнопку <em>Upload Fonts.</em></li>
<li>Поставьте галочку отмеченную "Yes, the fonts I'm uploading are legally eligible for web embedding".</li>
<li>Кликните по <em>Download your kit</em>.</li>
</ol>
<p>После того как генератор закончит обработку, вы должны получить ZIP файл к загрузке — сохраните его в той же директории что и ваши HTML и CSS.</p>
<h3 id="Реализация_кода_в_вашем_демо">Реализация кода в вашем демо</h3>
<p>Теперь распакуйте набор веб-шрифта, который вы только что сгенерировали. Внутри распакованной папки вы увидите три полезных элемента:</p>
<ul>
<li>несколько версий каждого шрифта (например <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code> и т.д.; <span class="tlid-translation translation" lang="ru"><span title="">предоставленные шрифты будут обновляться со временем по мере изменения требований поддержки браузера</span></span>). Как упомянуто выше, несколько шрифтов нужны для кросс-браузерной поддержки — это метод Fontsquirrel быть уверенными что вы получили всё что вам надо.</li>
<li>Демо файл HTML для каждого шрифта — загрузите их в ваш браузер чтобы посмотреть, как будет выглядеть шрифт в разных контекстах использования.</li>
<li>Файл <code>stylesheet.css</code>, который содержит сгенерированный @font-face код который вам нужен.</li>
</ul>
<p>Для внедрения их в ваше демо следуйте следующим шагам:</p>
<ol>
<li>Переименуйте распакованную папку на что-нибудь лёгкое и простое, например <code>fonts</code>.</li>
<li>Откройте файл <code>stylesheet.css</code> и скопируйте содержимое обоих <code>@font-face</code> блоков в ваш файл <code>web-font-start.css</code> — вам надо вставить их в самый верх, до любого вашего CSS, так как шрифты должны быть импортированы до того, как вы сможете использовать их на вашем сайте.</li>
<li>Каждый из функций <code>url()</code> указывает на файл шрифта который мы хотим импортировать в наш CSS — мы должны убедиться в том, что пути к файлам верные, поэтому добавьте <code>fonts/</code> в начало каждого пути (настройте так как необходимо).</li>
<li>Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:</li>
</ol>
<pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre>
<p><span class="tlid-translation translation" lang="ru"><span title="">Вы должны получить демо-страницу с какими-то реализованными симпатичными шрифтами. Поскольку различные шрифты создаются в разных размерах, вам может понадобиться настроить размер, интервалы и т.д., чтобы отладить внешний вид.</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
<div class="note">
<p><strong>Обратите внимание</strong>: Если у вас возникли какие-либо проблемы с тем что что-то не работает, смело сравнивайте файлы вашей версии с нашей законченной — см. <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">run the finished example live</a>).</p>
</div>
<h2 id="Использование_онлайн-сервиса_шрифтов">Использование онлайн-сервиса шрифтов</h2>
<p>Онлайн-сервисы шрифтов обычно хранят и обслуживают шрифты для вас, поэтому вам не надо переживать о написании <code>@font-face</code> кода и обычно необходимо просто вставить строчку или две простого кода в ваш сайт для того чтобы все работало. Примеры включают <a href="https://fonts.adobe.com/">Adobe Fonts</a> и <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>. Большинство из этих услуг на основе подписки, за исключением <a href="https://www.google.com/fonts">Google Fonts</a>, полезный бесплатный сервис, особенно для быстрого тестирования работы и написания демо.</p>
<p>Большинство из этих сервисов легки в использовании, поэтому мы не будем освещать их в деталях. Давайте кратко рассмотрим Google fonts, чтобы вы понимали идею. И снова, используйте копии <code>web-font-start.html</code> и <code>web-font-start.css</code> в качестве отправной точки.</p>
<ol>
<li>Отправляйтесь на <a href="https://www.google.com/fonts">Google Fonts</a>.</li>
<li>Используйте фильтры с правой стороны чтобы отобразить типы шрифтов, которые вы хотите выбрать и выберите пару шрифтов, которые вам понравятся.</li>
<li>Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.</li>
<li>Когда вы выбрали семейства шрифтов, нажмите на панель <em>[Number] Families Selected</em> в низу страницы.</li>
<li>На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить её в head вашего HTML файла. Вставьте его выше существующего {{htmlelement("link")}} элемента для того, чтоб шрифт импортировался до того, как вы начнёте пользоваться им в вашем CSS.</li>
<li>Далее вам надо скопировать CSS-объявления<span class="tlid-translation translation" lang="ru"><span title="">, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.</span></span></li>
</ol>
<div class="note">
<p><strong>Обратите внимание</strong>: Вы можете найти законченные версии <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, если вам необходимо сверить вашу работу с нашей (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">см. live</a>).</p>
</div>
<h2 id="font-face_более_детально">@font-face более детально</h2>
<p>Давайте исследуем тот <code>@font-face</code> синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:</p>
<pre class="brush: css notranslate">@font-face {
font-family: 'ciclefina';
src: url('fonts/cicle_fina-webfont.eot');
src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/cicle_fina-webfont.woff2') format('woff2'),
url('fonts/cicle_fina-webfont.woff') format('woff'),
url('fonts/cicle_fina-webfont.ttf') format('truetype'),
url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
font-weight: normal;
font-style: normal;
}</pre>
<p>Это называется "пуленепробиваемым @font-face синтаксисом", после публикации Пола Айриша (Paul Irish), с самого начала, когда <code>@font-face</code> начал получать популярность (<a href="https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Давайте пройдёмся по нему, чтобы посмотреть, что он делает:</p>
<ul>
<li><code>font-family</code>: В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта. Вы можете указать его как угодно, если вы используете его последовательно в вашем CSS.</li>
<li><code>src</code>: В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS (<code>url</code> путь) и формат каждого файла шрифта (<code>format</code> часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделённых запятыми — браузер будет искать среди них и использовать первый который найдёт и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдёт, даже если он не умеет использовать этот шрифт.</li>
<li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: В этих строках указывается какую толщину имеет шрифт и является ли он курсивом или нет. Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения {{cssxref("font-weight")}}/{{cssxref("font-style")}} для выбора между ними, <span class="tlid-translation translation" lang="ru"><span title="">вместо того, чтобы называть всех разных членов семейства шрифтов разными именами. </span></span><a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face совет: установите font-weight и font-style так чтобы ваш CSS был простым</a> от Роджера Джонсона (Roger Johansson) покажет, что делать более детально.</li>
</ul>
<div class="note">
<p><strong>Обратите внимание</strong>: Вы также можете указать определённые значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, <span class="tlid-translation translation" lang="ru"><span title="">который является конкретным диапазоном символов</span></span>, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> от Drew McLellan предоставляет некоторые полезные идеи того как это использовать</p>
</div>
<h2 id="Переменные_шрифты">Переменные шрифты</h2>
<p>В браузерах доступна новая технология, называемая переменными шрифтами — это шрифты, которые позволяют включить в единственный файл много разных вариантов дизайнов шрифтов, вместо того чтобы иметь отдельные файлы шрифтов для каждой ширины, толщины или стиля. <span class="tlid-translation translation" lang="ru"><span title="">Они несколько продвинуты для нашего курса для начинающих</span></span>, <span class="tlid-translation translation" lang="ru"><span title="">но если вы хотите расширить свои знания и посмотреть на них, прочитайте наше </span></span><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Руководство по переменным шрифтам</a>.</p>
<h2 id="Испытайте_свои_навыки!">Испытайте свои навыки!</h2>
<p>Вы достигли конца этой статьи и уже испытали некоторые навыки в наших разделах активного изучения, но сможете ли вы вспомнить самую важную информацию продвигаясь дальше? Вы можете найти задание для проверки того что вы усвоили информацию к конце модуля — см. <a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Задание: стилизация школьного сайта</a>.</p>
<h2 id="Заключение">Заключение</h2>
<p><span class="tlid-translation translation" lang="ru"><span title="">Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».</span></span></p>
<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p>
<h2 id="В_этом_модуле">В этом модуле</h2>
<ul>
<li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальная стилизация текста и шрифта</a></li>
<li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li>
<li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li>
<li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li>
<li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Задание: Стилизация школьного сайта</a></li>
</ul>
|
