diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/uk/web/css/@font-face | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/uk/web/css/@font-face')
| -rw-r--r-- | files/uk/web/css/@font-face/font-display/index.html | 87 | ||||
| -rw-r--r-- | files/uk/web/css/@font-face/index.html | 197 |
2 files changed, 0 insertions, 284 deletions
diff --git a/files/uk/web/css/@font-face/font-display/index.html b/files/uk/web/css/@font-face/font-display/index.html deleted file mode 100644 index 736f517126..0000000000 --- a/files/uk/web/css/@font-face/font-display/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: font-display -slug: Web/CSS/@font-face/font-display -translation_of: Web/CSS/@font-face/font-display ---- -<div>{{CSSRef}}</div> - -<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Властивість </span></font>font-display</code> визначає як font face відображаєтся стосовно як він завантижився і готовий до використання.</p> - -<h2 id="Хронологія_відображення_шрифта">Хронологія відображення шрифта</h2> - -<p>Хронологія відображення шрифта залежить від часу на початку завантаження шрифта та його використання. Типи хронології поділені на три частини які вказують поведінку відображення усих елементів які використовують цей шрифт.</p> - -<dl> - <dt>Блокування шрифту(block)</dt> - <dd>Якщо шрифт не завантажений, усі елементи які очікують на його використання мають відображатись невидимими(<em>invisible</em>). Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.</dd> - <dt>Заміна шрифту(swap)</dt> - <dd>Якщо шрифт не завантажений, усі елементи що очікують на його використання , мають використати запасний шрифт. Якщо шрифт успішно завантажений за цей період, вони відображаются за замовчуванням.</dd> - <dt>Невдача(failure)</dt> - <dd>Якщо шрифт не був завантажений, клієнт відображає його як невдачно завантажений, що викликає звичайне резервування шрифту.</dd> -</dl> - -<p>{{cssinfo}}</p> - -<h2 id="Синтаксис">Синтаксис</h2> - -<pre class="brush: css;">/* Keyword values */ -font-display: auto; -font-display: block; -font-display: swap; -font-display: fallback; -font-display: optional;</pre> - -<h3 id="Значення">Значення</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>Відображення шрифту виконуєтся автоматично клієнтом.</dd> - <dt><code>block</code></dt> - <dd>Надає елементам короткий період блокування і нескінченний swap період.</dd> - <dt><code>swap</code></dt> - <dd>Надає надзвичайно малий період блокування і нескінченний період підміни шрифту.</dd> - <dt><code>fallback</code></dt> - <dd>Надає надзвичайно малий період блокування і малий період підміни шрифту.</dd> - <dt><code>optional</code></dt> - <dd>Надає надзвичайно малий період блокування без підміни шрифту.</dd> -</dl> - -<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - -{{csssyntax}} - -<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('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td> - <td>{{Spec2('CSS4 Fonts')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_браузерами">Сумісність з браузерами</h2> - - - -<p>{{Compat("css.at-rules.font-face.font-display")}}</p> diff --git a/files/uk/web/css/@font-face/index.html b/files/uk/web/css/@font-face/index.html deleted file mode 100644 index 0a7217c851..0000000000 --- a/files/uk/web/css/@font-face/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: '@font-face' -slug: Web/CSS/@font-face -tags: - - '@-правила' - - '@font-face' - - CSS - - CSS Шрифти - - Посилання - - типографія - - шрифти -translation_of: Web/CSS/@font-face ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>@font-face</code></strong> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/At-rule">@-правило</a> вказує спеціальний шрифт для відображення текста. Шрифт може бути завантажений з зовнішнього сервера або встановлено локально на комп'ютері користувача. Якщо функція </span><code>local()</code> вказує ім'я шрифта то його пошук буде відбуватися на комп'ютері користувача. Інакше ресурси шрифти вказані з використанням функції <code>url()</code> будуть завантажені і використані</p> - -<p>Дозвіл авторам впроваджувати їх власні шрифти дає можливість стилізувати контент без обмежень в так званих "безпечних" шрифтах (Це такі шрифти,що широко використовуються та визнані як загальнодоступні). Можливість вказувати ім'я локально встановлених шрифтів дає можливість налаштовувати шрифт більш гнучко без залежності від інтернет з'єднання.</p> - -<p>Поширеним випадком є використання <code>url()</code> і <code>local()</code> разом, що дає змогу використовувати втановлений користувачем шрифт і завантажувати шрифт у разі його відсутності на користувацькому пристрої.</p> - -<p><code>@font-face</code> @-правило може бути використане не лише на вищому рівні CSS, а й всередині будь-якого <a href="/en-US/docs/Web/CSS/At-rule#Conditional_group_rules">@-правила</a>.</p> - -<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="Опис">Опис</h3> - -<dl> - <dt>{{cssxref("@font-face/font-display", "font-display")}}</dt> - <dd>Вказує як шрифт відображатиметься в залежності від того чи він завантажений та готовий до використання.</dd> - <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt> - <dd>Задає ім'я, що буде використовуватися для задання властивостей шрифта.</dd> - <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt> - <dd>Значення {{cssxref("font-stretch")}} . Починаючи з Firefox 61 (та інших сучасних браузерів) {{cssxref("font-stretch")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-stretch: 50% 200%;</code></dd> - <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt> - <dd>Значення {{cssxref("font-style")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-style")}}.також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-style: oblique 20deg 50deg;</code></dd> - <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt> - <dd>Значення {{cssxref("font-weight")}}. Починаючи з Firefox 61 (і інших сучасних браузерів) {{cssxref("font-weight")}} також допускає задання двох значень для вказання діапазону, що підтримується шрифтом, наприклад: <code>font-weight: 100 400;</code></dd> - <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt> - <dd>Значення {{cssxref("font-variant")}}.</dd> - <dt>{{cssxref("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> - <p>Вказує ресурс, що містить дані шрифта. Це може бути URL для віддаленого файлу шрифта чи ім'я для шрифта на комп'ютері користувача.</p> - - <p>Щоб дати браузеру підказку який вибрати формат ресурсу шрифта, формат можна вказати в середині функції <code>format()</code>:</p> - - <pre class="brush: css">src: url(ideal-sans-serif.woff) <strong>format("woff")</strong>, - url(basic-sans-serif.ttf) <strong>format("truetype")</strong>;</pre> - - <p>Достіпні типи: <code>"woff"</code>, <code>"woff2"</code>, <code>"truetype"</code>, <code>"opentype"</code>, <code>"embedded-opentype"</code>, і <code>"svg"</code>.</p> - </dd> - <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt> - <dd>Діапазон Unicode кодів, що буде використовуватись в шрифті.</dd> -</dl> - -<h3 id="Формальний_синтаксис">Формальний синтаксис</h3> - -{{csssyntax}} - -<h2 id="Приклади">Приклади</h2> - -<p>Цей приклад просто вказує завантажуваний шрифт для використання і застосовує його до всього тіла документа:</p> - -<p><a href="https://mdn.mozillademos.org/files/7775/webfont-sample.html">Дивитися live приклад</a></p> - -<pre class="brush: html"><html> -<head> - <title>Web Font Sample</title> - <style type="text/css" media="screen, print"> - @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 } - </style> -</head> -<body> - This is Bitstream Vera Serif Bold. -</body> -</html> -</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="/en-US/docs/HTTP_access_control">HTTP контроль доступу</a> використовується для полегшення цього обмеження.</li> - <li><code>@font-face</code> не може бути оголошеним в 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="Підтримка_браузерів">Підтримка браузерів </h2> - -<div class="hidden">Таблиця підтримки на цій сторінці згенерована з структурованих даних будь ласка прогляньте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> і надішлінть нам pull request.</div> - -<p>{{Compat("css.at-rules.font-face")}}</p> - -<h2 id="Прогляньте_також">Прогляньте також</h2> - -<ul> - <li><a href="/en-US/docs/WOFF"> Про 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/">Гарні шрифти @font-face</a></li> - <li><a class="external" href="http://openfontlibrary.org/">Open Font Library</a></li> - <li><a class="external" href="http://caniuse.com/woff">Коли я можу використовувати WOFF?</a></li> - <li><a class="external" href="http://caniuse.com/svg-fonts">Коли я можу використовувати SVG Fonts?</a></li> - <li><a href="https://coolfont.org">Безкоштовні круті шрифти</a></li> -</ul> |
