From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../ru/web/css/@font-face/font-display/index.html | 143 ++++++++++++++ files/ru/web/css/@font-face/font-family/index.html | 67 +++++++ files/ru/web/css/@font-face/index.html | 206 +++++++++++++++++++++ 3 files changed, 416 insertions(+) create mode 100644 files/ru/web/css/@font-face/font-display/index.html create mode 100644 files/ru/web/css/@font-face/font-family/index.html create mode 100644 files/ru/web/css/@font-face/index.html (limited to 'files/ru/web/css/@font-face') 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 +--- +
{{CSSRef}}
+ +

Описание

+ +

Дескриптор font-display определяет то, как шрифт, подключенный через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.

+ +

Временная шкала отображения шрифтов

+ +

Временная шкала отображения шрифтов основывается на таймере, который запускается в момент, когда пользовательский агент начинает попытки по применению загруженного шрифта.  Эта временная шкала разделена на три отрезка, приведенных ниже, которые диктуют поведение рендеринга любых элементов с использованием шрифта.

+ +
+
Период блокировки шрифта (Font block period)
+
Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен с невидимым запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.
+
Период подмены шрифта (Font swap period)
+
Если шрифт не загружен, любой элемент, который пытается его использовать, должен быть отрендерен запасным шрифтом. Если за это время шрифт успешно загружается, то он используется, как обычно.
+
Период отказа шрифта (Font failure period)
+
Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.
+
+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Значения свойства */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

Значения

+ +
+
auto
+
Стратегию загрузки шрифта определяет пользовательский агент.
+
block
+
Для шрифта задается короткий период блокировки и бесконечный период подмены.
+
swap
+
Для шрифта не задается период блокировки и задается бесконечный период подмены.
+
fallback
+
Для шрифта задается очень короткий период блокировки и короткий период подмены.
+
optional
+
Для шрифта задается очень короткий период блокировки и не задается период подмены.
+
+ +

Официальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
@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;
+}
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Font Rendering', '#font-display-desc', 'font-display')}}{{Spec2('CSS Font Rendering')}}Исходное описание
+ +

Поддержка браузерами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatChrome(60)}}{{CompatUnknown}}{{CompatGeckoDesktop("46.0")}}[2]{{CompatNo}}{{CompatOpera(36)}}[1]{{CompatSafari(11.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Базовая поддержка{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("46.0")}}[2]{{CompatUnknown}}{{CompatOpera(37)}}[1]{{CompatSafari(11.1)}}{{CompatChrome(59.0)}}[1]
+
+ +

[1] За флагом.

+ +

[2] Эта возможность доступна, начиная с версии Firefox 46 с настрокой layout.css.font-display.enabled, по умолчанию false.  См. ({{bug(1157064)}}).

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 +--- +
{{CSSRef}}
+ +

CSS дескриптор font-family позволяет авторам указывать font family для шрифта, указанного в правиле {{cssxref("@font-face")}}.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* <string> значения */
+font-family: "font family";
+font-family: 'another font family';
+
+/* <custom-ident> значение */
+font-family: examplefont;
+
+ +

Значения

+ +
+
<family-name>
+
Указывает имя font family.
+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +
@font-face {
+  font-family: examplefont;
+  src: url('examplefont.ttf');
+}
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментрий
{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}{{Spec2('CSS3 Fonts')}}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("css.at-rules.font-face.font-family")}}

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 +--- +
@font-face CSS @-правило позволяет указать шрифты для отображения текста на веб-страницах, которые могут быть загружены либо с удаленного сервера, либо с компьютера пользователя. Если в правиле была объявлена функция local(), с названием шрифта, то будет производиться поиск на компьютере пользователя, и в случае обнаружения будет использован этот шрифт. Иначе будет скачан и использован шрифт, указанный в функции url().
+ +
 
+ +
@font-face позволяет разрабатывать контент не ограничиваясь набором "безопасных" шрифтов (шрифтов, которые настолько распространены, что считаются доступными по умолчанию). Возможность определить локально установленный шрифт позволяет более гибко настраивать шрифты не полагаясь на соединение с интернетом. 
+ +
 
+ +
Распространенным случаем является одновременное использование url() и local(), чтобы использовать локальный шрифт, если он доступен, или иначе скачать копию шрифта.
+ +
 
+ +
Это правило может использоваться не только на верхнем уровне CSS, но и внутри любого  @-правила.
+ +
@font-face {
+ font-family: "Open Sans";
+ src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+ +

Синтаксис

+ +

Descriptors

+ +
+
{{cssxref("@font-face/font-display", "font-display")}}
+
Определяет как отображается шрифт, основываясь на том, был ли он загружен и готов ли к использованию.
+
+ +
+
{{cssxref("@font-face/font-family", "font-family")}}
+
Указывает имя шрифта, которое будет использоваться для задания свойств шрифта.
+
{{cssxref("@font-face/font-stretch", "font-stretch")}}
+
Значение {{cssxref("font-stretch")}}.
+
{{cssxref("@font-face/font-style", "font-style")}}
+
Значение {{cssxref("font-style")}}.
+
{{cssxref("@font-face/font-weight", "font-weight")}}
+
Значение {{cssxref("font-weight")}}.
+
{{cssxref("@font-face/font-variant", "font-variant")}}
+
Значение {{cssxref("font-variant")}}.
+
{{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
+
Позволяет контролировать другие расширенные особенности OpenType-шрифтов.
+
{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
+
Позволяет осуществлять низкоуровневый контроль над вариациями OpenType и TrueType шрифтов, указывая четырёхбуквенные названия осей для изменения вместе с их значениями.
+
{{cssxref("@font-face/src", "src")}}
+
Задает ресурс, содержащий данные шрифта. Это может быть URL-адрес расположения удаленного файла шрифта или имя шрифта на компьютере пользователя.
+
+ Чтобы дать браузеру возможность выбрать наиболее подходящий формат шрифта, его можно указать при объявлении внутри функции format():
+ + 
src: url(ideal-sans-serif.woff) format("woff"),
+     url(basic-sans-serif.ttf) format("opentype");
+
+ +

Список доступных форматов: "woff", "woff2", "truetype", "opentype", "embedded-opentype", и "svg".

+
+
+ +
+
{{cssxref("@font-face/unicode-range", "unicode-range")}}
+
Диапазон Unicode кодов, который будет использоваться в шрифте.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Примеры

+ +

Этот пример просто указывает загружаемый шрифт для использования и применяет его ко всему телу документа:

+ +

Смотреть живой пример

+ +
<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>
+
+ +

В этом примере используется локальный пользовательский шрифт "Helvetica Neue Bold"; если у пользователя этот шрифт не установлен (используются два различных имени), тогда вместо него используется загружаемый шрифт с названием "MgOpenModernaBold.ttf":

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+       local("HelveticaNeue-Bold"),
+       url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

MIME-типы шрифтов

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ФорматMIME-тип
TrueTypefont/ttf
OpenTypefont/otf
Web Open File Formatfont/woff
Web Open File Format 2font/woff2
+ +

Заметки

+ + + +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}Спецификация нового формата шрифта с новым алгоритмом сжатия
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}Спецификация формата шрифта
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}Первоначальное определение
+ +

Browser compatibility

+ +

{{Compat("css.at-rules.font-face")}}

+ +

See also

+ + + +

{{CSSRef}}

-- cgit v1.2.3-54-g00ecf