Merge pull request #42 from fiji-flo/unslugging-ru

Unslugging ru

1 files changed, 204 insertions, 0 deletions

diff --git a/files/ru/learn/css/styling_text/web_fonts/index.html b/files/ru/learn/css/styling_text/web_fonts/index.html
new file mode 100644
index 0000000000..03318d45b6
--- /dev/null
+++ b/files/ru/learn/css/styling_text/web_fonts/index.html
@@ -0,0 +1,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>