From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../web/css/@font-face/font-display/index.html | 107 +++++++++++++ .../web/css/@font-face/font-family/index.html | 114 +++++++++++++ .../zh-cn/web/css/@font-face/font-style/index.html | 133 +++++++++++++++ files/zh-cn/web/css/@font-face/index.html | 178 +++++++++++++++++++++ files/zh-cn/web/css/@font-face/src/index.html | 82 ++++++++++ 5 files changed, 614 insertions(+) create mode 100644 files/zh-cn/web/css/@font-face/font-display/index.html create mode 100644 files/zh-cn/web/css/@font-face/font-family/index.html create mode 100644 files/zh-cn/web/css/@font-face/font-style/index.html create mode 100644 files/zh-cn/web/css/@font-face/index.html create mode 100644 files/zh-cn/web/css/@font-face/src/index.html (limited to 'files/zh-cn/web/css/@font-face') diff --git a/files/zh-cn/web/css/@font-face/font-display/index.html b/files/zh-cn/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..be69002f0d --- /dev/null +++ b/files/zh-cn/web/css/@font-face/font-display/index.html @@ -0,0 +1,107 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +tags: + - CSS + - 参考 + - 字体 +translation_of: Web/CSS/@font-face/font-display +--- +
{{CSSRef}}
+ +

font-display 属性决定了一个@font-face 在不同的下载时间和可用时间下是如何展示的。

+ +

字体显示时间轴

+ +

字体显示时间线基于一个计时器，该计时器在用户代理尝试使用给定下载字体的那一刻开始。时间线分为三个时间段，在这三个时间段中指定使用字体的元素的渲染行为。

+ +
+
字体阻塞周期
+
如果未加载字体，任何试图使用它的元素都必须渲染不可见的后备字体。如果在此期间字体已成功加载，则正常使用它。
+
字体交换周期
+
如果未加载字体，任何尝试使用它的元素都必须呈现后备字体。如果在此期间字体已成功加载，则正常使用它。
+
字体失败周期
+
如果未加载字体，用户代理将其视为导致正常字体回退的失败加载。
+
+ +

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

规范

+ + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}初始定义
+ +

浏览器兼容性

+ + + +

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

+ +

参见

+ + diff --git a/files/zh-cn/web/css/@font-face/font-family/index.html b/files/zh-cn/web/css/@font-face/font-family/index.html new file mode 100644 index 0000000000..1002d02fb4 --- /dev/null +++ b/files/zh-cn/web/css/@font-face/font-family/index.html @@ -0,0 +1,114 @@ +--- +title: font-family +slug: Web/CSS/@font-face/font-family +translation_of: Web/CSS/@font-face/font-family +--- +
{{CSSRef}}
+ +
font-family属性允许我们为页面上的字体指定一个由{{cssxref("@font-face")}} 规则定义的字体族
+ +

The font-family CSS descriptor allows authors to specify the font family for the font specified in an {{cssxref("@font-face")}} rule.

+ +

{{cssinfo}}

+ +

语法

+ +
/* <string> values */
+font-family: "font family";
+font-family: 'another font family';
+
+/* <IDENT> value */
+font-family: examplefont;
+
+ +

取值

+ +
+
<family-name>
+
指定字体族名称
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

示例

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

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#font-family-desc', 'font-family')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("4")}}12.0{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("6.0")}}{{CompatOpera("9.0")}}{{CompatSafari("3.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatAndroid("2.2")}}{{CompatGeckoMobile("1.9.1")}}{{CompatIE("10.0")}}{{CompatNo}}{{CompatOpera("12.0")}}{{CompatSafari("3.1")}}
+
diff --git a/files/zh-cn/web/css/@font-face/font-style/index.html b/files/zh-cn/web/css/@font-face/font-style/index.html new file mode 100644 index 0000000000..a8c5e39654 --- /dev/null +++ b/files/zh-cn/web/css/@font-face/font-style/index.html @@ -0,0 +1,133 @@ +--- +title: font-style +slug: Web/CSS/@font-face/font-style +translation_of: Web/CSS/@font-face/font-style +--- +

{{CSSRef}}

+ +

概述

+ +

font-style 描述符允许开发者在@font-rule规则中为指定字体样式(该条目区别于font-style，意指用在@font-rule中的font-style属性)

+ +

For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the font-style descriptor to explicitly specify the font face's style. The values for the CSS descriptor is same as that of its corresponding font property.

+ +

{{cssinfo}}

+ +

Syntax

+ +
+
font-style: normal;
+font-style: italic;
+font-style: oblique;
+ +

Values

+ +

normal
+ Selects the normal version of the font-family.

+ +

italic
+ Specifies that font-face is an italicized version of the normal font .

+ +

oblique
+ Specifies that the font-face is an artificially sloped version of the normal font.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

As an example, consider the garamond font family, in its normal form, we get the following result:

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

unstyled Garamond

+ +

The italicized version of this text uses the same glyphs present in the unstyled version, but they are artificially sloped by a few degrees.

+ +

artificially sloped garamond

+ +

On the other hand, if a true italicized version of the font family exists, we can include it in the src descriptor and specify the font style as italic, so that it is clear that the font is italicized. True italics use different glyphs and are a bit different from their upright counterparts, having some unique features and generally have a rounded and calligraphic quality. These fonts are specially created by font designers and are not artificially sloped.

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

italic garamond

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("1.9.1")}}4.0  4.010.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatNo}}10.0{{CompatVersionUnknown}}
+
+
diff --git a/files/zh-cn/web/css/@font-face/index.html b/files/zh-cn/web/css/@font-face/index.html new file mode 100644 index 0000000000..1f5430e318 --- /dev/null +++ b/files/zh-cn/web/css/@font-face/index.html @@ -0,0 +1,178 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +tags: + - '@规则' + - 字体 +translation_of: Web/CSS/@font-face +--- +
{{CSSRef}}
+ +
@font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。
+ +
+ +
通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。
+ +
+ +
在同时使用url()和local()功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。
+ +
+ +
@font-face 规则不仅仅使用在CSS的顶层，还可以用在任何CSS条件组规则中.
+ +
+ +
@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}
+ +

概述

+ +

这是一个叫做@font-face 的CSS @规则 ，它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。

+ +

语法

+ +
{{csssyntax}}
+ +

取值

+ +
+
{{cssxref("@font-face/font-family", "font-family")}}
+
所指定的字体名字将会被用于font或font-family属性( i.e. font-family: <family-name>; )
+
{{cssxref("@font-face/src", "src")}}
+
远程字体文件位置的URL或者用户计算机上的字体名称， 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。 如果找不到该字体，将会尝试其他来源，直到找到它。
+
{{cssxref("@font-face/font-variant", "font-variant")}}
+
A {{cssxref("font-variant")}} value.
+
{{cssxref("@font-face/font-stretch", "font-stretch")}}
+
A {{cssxref("font-stretch")}} value.
+
{{cssxref("@font-face/font-weight", "font-weight")}}
+
A {{cssxref("font-weight")}} value.
+
{{cssxref("@font-face/font-style", "font-style")}}
+
对于src所指字体的描述。如果所需字体符合描述，则采用本font-face所定义的字体。
+
{{cssxref("@font-face/unicode-range", "unicode-range")}}
+
在该@font-face中定义的unicode字体范围
+
+ +

示例

+ +

下面的例子简单定义了一个可下载的字体，并应用到了文档的整个body标签上。

+ +

View live sample

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=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;
+}
+
+ + + +
+

接下来的例子在英文原文中已被删除。

+
+ +

这个例子新定义了一个字体，正常粗细的字采用字体Times New Roman，粗体字采用Consolas。

+ +
@font-face {
+    font-family: myFirstFont;
+    src: local("Times New Roman");
+    font-weight:normal;
+}
+
+@font-face {
+    font-family: myFirstFont;
+    src: local(Consolas);
+    font-weight:bold;
+}
+
+ +

注意

+ + + +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}{{Spec2('WOFF2.0')}}Font format specification with new compression algorithm
{{SpecName('WOFF1.0', '', 'WOFF font format')}}{{Spec2('WOFF1.0')}}Font format specification
{{SpecName('CSS3 Fonts', '#font-face-rule', '@font-face')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

浏览器兼容性

+ +

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

+ +

参考

+ + diff --git a/files/zh-cn/web/css/@font-face/src/index.html b/files/zh-cn/web/css/@font-face/src/index.html new file mode 100644 index 0000000000..e209486348 --- /dev/null +++ b/files/zh-cn/web/css/@font-face/src/index.html @@ -0,0 +1,82 @@ +--- +title: src +slug: Web/CSS/@font-face/src +translation_of: Web/CSS/@font-face/src +--- +
{{CSSRef}}
+ +

{{cssxref("@font-face")}} 中的src描述符指定了包含字体数据的资源。@font-face 规则中需要指定这个属性。

+ +

它的值是一个有优先级的，以逗号分割的外部引用或者本地安装的字体名称。当需要使用字体时，用户代理（指浏览器的意思）将会使用以逗号分隔的参考集中能成功激活的第一个参考值。如果是包含无效数据的字体或者本地的字体资源不存在，用户代理将会忽略当前字体并且加载下一个字体。

+ +

与CSS中的其他URL一样，URL可以是相对的，在这种情况下，它相对于包含@ font-face规则的样式表的位置进行解析。对于SVG字体，URL指向文档中定义的包含SVG字体的元素。如果省略元素引用，则默认引用第一个定义字体。同样，字体容器只加载@font-face 规则给定的其中一种字体。片段标识符用于指示要加载的字体。如果容器格式缺少定义的片段标识符方案，将会使用一个简单的基于1的索引方案（e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.）

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* <url> values */
+src: url(https://somewebsite.com/path/to/font.woff); /* Absolute URL */
+src: url(path/to/font.woff);                         /* Relative URL */
+src: url(path/to/font.woff) format("woff");          /* Explicit format */
+src: url('path/to/font.woff');                       /* Quoted URL */
+src: url(path/to/svgfont.svg#example);               /* Fragment identifying font */
+
+/* <font-face-name> values */
+src: local(font);      /* Unquoted name */
+src: local(some font); /* Name containing space */
+src: local("font");    /* Quoted name */
+
+/* Multiple items */
+src: local(font), url(path/to/font.svg) format("svg"),
+     url(path/to/font.woff) format("woff"),
+     url(path/to/font.otf) format("opentype");
+
+ +

Values

+ +
+
<url> [ format( <string># ) ]?
+
Specifies an external reference consisting of a {{cssxref("<url>")}}, followed by an optional hint using the format() function to describe the format of the font resource referenced by that URL. The format hint contains a comma-separated list of format strings that denote well-known font formats. If a user agent doesn't support the specified formats, it skips downloading the font resource. If no format hints are supplied, the font resource is always downloaded.
+
<font-face-name>
+
Specifies the name of a locally-installed font face using the local() function, which uniquely identifies a single font face within a larger family. The name can optionally be enclosed in quotes.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@font-face {
+  font-family: examplefont;
+  src: local(Example Font),
+       url('examplefont.woff') format("woff"),
+       url('examplefont.otf') format("opentype");
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#src-desc', 'src')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser compatibility

+ + + +

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

-- cgit v1.2.3-54-g00ecf