initial commit

3 files changed, 416 insertions, 0 deletions

diff --git a/files/ru/web/css/@font-face/font-display/index.html b/files/ru/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..e2e0876cc0
--- /dev/null
+++ b/files/ru/web/css/@font-face/font-display/index.html
@@ -0,0 +1,143 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Описание">Описание</h2>
+
+<p>Дескриптор <code>font-display</code> определяет то, как шрифт, подключенный через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.</p>
+
+<h3 id="Временная_шкала_отображения_шрифтов">Временная шкала отображения шрифтов</h3>
+
+<p>Временная шкала отображения шрифтов основывается на таймере, который запускается в момент, когда пользовательский агент начинает попытки по применению загруженного шрифта.  Эта временная шкала разделена на три отрезка, приведенных ниже, которые диктуют поведение рендеринга любых элементов с использованием шрифта.</p>
+
+<dl>
+ <dt>Период блокировки шрифта (Font block period)</dt>
+ <dd>Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен с невидимым запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.</dd>
+ <dt>Период подмены шрифта (Font swap period)</dt>
+ <dd>Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.</dd>
+ <dt>Период отказа шрифта (Font failure period)</dt>
+ <dd>Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.</dd>
+</dl>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css;">/* Значения свойства */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt>auto</dt>
+ <dd>Стратегию загрузки шрифта определяет пользовательский агент.</dd>
+ <dt>block</dt>
+ <dd>Для шрифта задается короткий период блокировки и бесконечный период подмены.</dd>
+ <dt>swap</dt>
+ <dd>Для шрифта не задается период блокировки и задается бесконечный период подмены.</dd>
+ <dt>fallback</dt>
+ <dd>Для шрифта задается очень короткий период блокировки и короткий период подмены.</dd>
+ <dt>optional</dt>
+ <dd>Для шрифта задается очень короткий период блокировки и не задается период подмены.</dd>
+</dl>
+
+<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css; highlight[7]">@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS Font Rendering', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS Font Rendering')}}</td>
+   <td>Исходное описание</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatChrome(60)}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoDesktop("46.0")}}<sup>[2]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera(36)}}<sup>[1]</sup></td>
+   <td>{{CompatSafari(11.1)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>Базовая поддержка</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatGeckoMobile("46.0")}}<sup>[2]</sup></td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatOpera(37)}}<sup>[1]</sup></td>
+   <td>{{CompatSafari(11.1)}}</td>
+   <td>{{CompatChrome(59.0)}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] За флагом.</p>
+
+<p>[2] Эта возможность доступна, начиная с версии Firefox 46 с настрокой <code>layout.css.font-display.enabled</code>, по умолчанию <code>false</code>.  См. ({{bug(1157064)}}).</p>
diff --git a/files/ru/web/css/@font-face/font-family/index.html b/files/ru/web/css/@font-face/font-family/index.html
new file mode 100644
index 0000000000..39fc326e69
--- /dev/null
+++ b/files/ru/web/css/@font-face/font-family/index.html
@@ -0,0 +1,67 @@
+---
+title: font-family
+slug: Web/CSS/@font-face/font-family
+tags:
+  - Шрифты
+  - дескрипторы
+translation_of: Web/CSS/@font-face/font-family
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS дескриптор <strong><code>font-family</code></strong> позволяет авторам указывать font family для шрифта, указанного в правиле {{cssxref("@font-face")}}.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<pre class="brush: css">/* &lt;string&gt; значения */
+font-family: "font family";
+font-family: 'another font family';
+
+/* &lt;custom-ident&gt; значение */
+font-family: examplefont;
+</pre>
+
+<h3 id="Значения">Значения</h3>
+
+<dl>
+ <dt><code>&lt;family-name&gt;</code></dt>
+ <dd>Указывает имя font family.</dd>
+</dl>
+
+<h3 id="Синтаксис_2">Синтаксис</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: examplefont;
+  src: url('examplefont.ttf');
+}
+</pre>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментрий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Первое определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.at-rules.font-face.font-family")}}</p>
diff --git a/files/ru/web/css/@font-face/index.html b/files/ru/web/css/@font-face/index.html
new file mode 100644
index 0000000000..7ae73142db
--- /dev/null
+++ b/files/ru/web/css/@font-face/index.html
@@ -0,0 +1,206 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+  - '@font-face'
+  - At-rule
+  - CSS
+  - CSS Fonts
+  - NeedsTranslation
+  - Reference
+  - типографика
+translation_of: Web/CSS/@font-face
+---
+<div><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> <font>позволяет указать </font><font>шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя. Если в правиле была объявлена функция </font><code>local()</code>, с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции <code>url()</code>.</div>
+
+<div> </div>
+
+<div><code>@font-face</code> позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом. </div>
+
+<div> </div>
+
+<div>Распространенным случаем является одновременное использование <code>url()</code> и <code>local()</code>, чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.</div>
+
+<div> </div>
+
+<div><font>Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого </font> <a href="/en-US/docs/CSS/At-rule">@-правила</a>.</div>
+
+<pre class="brush: css no-line-numbers">@font-face {
+ font-family: "Open Sans";
+ src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}</pre>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<h3 id="Descriptors">Descriptors</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt>
+ <dd>Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.</dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
+ <dd>Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.</dd>
+ <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
+ <dd>Значение {{cssxref("font-stretch")}}.</dd>
+ <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
+ <dd>Значение {{cssxref("font-style")}}.</dd>
+ <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
+ <dd>Значение {{cssxref("font-weight")}}.</dd>
+ <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
+ <dd>Значение {{cssxref("font-variant")}}.</dd>
+ <dt>{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}</dt>
+ <dd>Позволяет контролировать другие расширенные особенности OpenType-шрифтов.</dd>
+ <dt>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</dt>
+ <dd>Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.</dd>
+ <dt>{{cssxref("@font-face/src", "src")}}</dt>
+ <dd><font>Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.<br>
+ <br>
+ Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции <code>format()</code>:</font><br>
+
+ <pre><code>src: url(ideal-sans-serif.woff) format("woff"),
+     url(basic-sans-serif.ttf) format("opentype");</code>
+</pre>
+
+ <p>Список доступных форматов: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, и <code>"svg"</code>.</p>
+ </dd>
+</dl>
+
+<dl>
+ <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
+ <dd>Диапазон Unicode кодов, который будет использоваться в шрифте.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Примеры">Примеры</h2>
+
+<p>Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:</p>
+
+<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">Смотреть живой пример</a></p>
+
+<pre class="brush: html">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p>В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold"; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием "MgOpenModernaBold.ttf":</p>
+
+<pre class="brush: css">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+<h2 id="MIME-типы_шрифтов">MIME-типы шрифтов</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th>Формат</th>
+   <th>MIME-тип</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>TrueType</td>
+   <td><code>font/ttf</code></td>
+  </tr>
+  <tr>
+   <td>OpenType</td>
+   <td><code>font/otf</code></td>
+  </tr>
+  <tr>
+   <td>Web Open File Format</td>
+   <td><code>font/woff</code></td>
+  </tr>
+  <tr>
+   <td>Web Open File Format 2</td>
+   <td><code>font/woff2</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Заметки">Заметки</h2>
+
+<ul>
+ <li>Веб шрифты попадают под правило ограничения домена (файлы шрифтов должны находиться на том же самом домене, что и использующая их страница), если это ограничение не снимается с помощью <a href="/ru/docs/Словарь/CORS">CORS</a>.</li>
+ <li>@font-face не может быть объявлен внутри CSS-селектора. Следующий пример не будет работать:
+  <pre class="brush: css; example-bad">.className {
+  @font-face {
+    font-family: MyHelvetica;
+    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
+        url(MgOpenModernaBold.ttf);
+    font-weight: bold;
+  }
+}</pre>
+ </li>
+</ul>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарии</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>Спецификация нового формата шрифта с новым алгоритмом сжатия</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WOFF1.0', '', 'WOFF font format')}}</td>
+   <td>{{Spec2('WOFF1.0')}}</td>
+   <td>Спецификация формата шрифта</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Первоначальное определение</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WOFF">About WOFF</a></li>
+ <li><a href="https://everythingfonts.com/font-face">Everythingfonts font-face generator</a></li>
+ <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li>
+ <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li>
+ <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li>
+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">Microsoft Developer Network (MSDN) @font-face reference</a></li>
+ <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li>
+ <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li>
+</ul>
+
+<p>{{CSSRef}}</p>