recursal/MDN huggingface dataset:
逻辑属性与逻辑值的基本概念
=============

逻辑属性与逻辑值规范为 CSS 中的许多属性和值引入了相对于流的对应关系。本文介绍此规范，并解释相对于流的属性与值。

为什么我们需要逻辑属性？
------------

传统的 CSS 根据屏幕的实体尺度设置物体尺寸。因此我们说盒子具有宽度（`width`）和高度（`height`），参照上侧（`top`）和左侧（`left`）为元素定位，将物体浮动至左侧，为上侧（`top`）、右侧（`right`）、下侧（`bottom`）、左侧（`left`）赋予边框和内外边距，等等。逻辑属性与逻辑值规范定义了从这些实体值到与之等价的逻辑值（即相对于流的值）的对应关系——如 `left` 和 `right`，或者 `top` 和 `bottom` 对应于 `start` 和 `end`。

举个例子说明为什么会需要这些对应关系。我有一个布局用了 CSS 网格，网格容器应用了宽度属性，而且我用 `align-self` 和 `justify-self` 属性对齐元素。这些属性是相对于流的——`justify-self: start` 将元素对齐到行首，`align-self: start` 在块向上的效果类似。

![横排书写模式中的网格](/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values/grid-horizontal-width-sm.png)

如果我现在用 `writing-mode` 属性把这个组件的书写模式改成 `vertical-rl`，那么对齐方式还是一样的。现在行向是竖直方向而块向是水平方向。然而网格变了样，这是因为给容器赋的宽度是水平尺度，与它挂钩的是文本的实体延伸方向，而非逻辑或相对于流的延伸方向。

![竖排书写模式中的网格](/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values/grid-vertical-width-sm.png)

如果我们不用 `width` 属性而用逻辑属性 `inline-size`，那现在无论用什么书写模式显示组件都没有问题。

![竖排书写模式中的网格](/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values/grid-vertical-inline-size-small.png)

你可以在下面的运行实例里尝试一下。把 `.grid` 的 `writing-mode` 从 `vertical-rl` 改成 `horizontal-tb`，看看不同的属性是怎么改变布局的。

在不是从横排上到下的书写模式里做网站，或者在用书写模式做创意的时候，能够对应到内容的流向上是非常合理的。

块向与行向尺度
-------

在使用相对于流的属性和值时，一个关键的概念是块向与行向这两个方向。上文我们已经看到在对齐元素时，诸如弹性盒和网格布局等新的 CSS 布局方法所用的概念是块向（`block`）和行向（`inline`），而非右侧（`right`）和左侧（`left`），或者上侧（`top`）和下侧（`bottom`）。

行向是指在所用的书写模式中，一行文本延伸的方向。因此在从左到右横排的英文文档，或者从右到左横排的阿拉伯文文档中，行向为*水平方向*。若切换至竖排书写模式（如日文文档）则行向变为*竖直方向*，这是因为文本在这种书写模式中竖直延伸。

块向是指另一方向，即块——例如段落——依次显示的方向。在英文和阿拉伯文中，块沿竖直方向依次排列，而块在任意竖排书写模式中沿水平方向依次排列。

下图展示了横排书写模式中的行向与块向：

![行向轴与块向轴分别水平和竖直延伸的图示](/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values/mdn-horizontal.png)

此图展示了竖排书写模式中的块向与行向：

![块向轴与行向轴分别水平和竖直延伸的图示](/zh-CN/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values/mdn-vertical.png)

参见
--

* 网格布局中的盒对齐
* 弹性布局中的盒对齐
* Understanding Logical Properties and Values
* 书写模式
逻辑尺寸属性
======

实体尺度属性和逻辑属性用于在页面上设置元素尺寸，而我们将在本指南中解释两者之间相对于流的对应关系。

在指定元素的尺寸时，标示实体尺寸参照的是水平和竖直方向（如左和右）的实体尺度，而逻辑属性与逻辑值规范使你可以参照文本流向（行向与块向）标示尺寸。虽然对于我们中的大多数而言，这些相对于流的对应关系很可能都是默认的，但是在设计中你很可能会同时用到实体尺寸和逻辑尺寸。你可能想要某些特性在任何书写模式里参照的都是实体尺度。

尺度的对应关系
-------

下表提供了逻辑属性与实体属性的对应关系。这些对应关系假定你在 `horizontal-tb` 的书写模式里——例如英文或者阿拉伯文，此时 `width` 会对应到 `inline-size`。

假如你在竖排书写模式里，那么 `inline-size` 会对应到 `height`。

| 逻辑属性 | 实体属性 |
| --- | --- |
| `inline-size` | `width` |
| `block-size` | `height` |
| `min-inline-size` | `min-width` |
| `min-block-size` | `min-height` |
| `max-inline-size` | `max-width` |
| `max-block-size` (en-US) | `max-height` |

宽度和高度的示例
--------

`width` 和 `height` 对应的逻辑属性为 `inline-size`（设置行向长度）和 `block-size`（设置块向长度）。在英文文本中，将 `width` 换为 `inline-size`，`height` 换为 `block-size`，所得布局相同。

在下面的运行实例里，我把书写模式设置成了 `horizontal-tb`。把它改成 `vertical-rl`，你会看到第一个例子——用的 `width` 和 `height`——尽管文本变成竖排，但是在每个方向上的尺寸保持不变。第二个例子——用的 `inline-size` 和 `block-size`——会跟着文本的方向变化，就像旋转了整个块。

最小宽度和最小高度的示例
------------

`min-width` 和 `min-height` 也有对应的属性——即 `min-inline-size` 和 `min-block-size`。这些属性的用法与 `inline-size` 和 `block-size` 属性相同，但是设置的是最小尺寸而不是固定尺寸。

试试把下面的例子像第一个例子一样改成 `vertical-rl` 看看效果。我在第一个例子里用了 `min-height`，在第二个里用了 `min-block-size`。

最大宽度和最大高度的示例
------------

最后你可以用逻辑属性 `max-inline-size` 和 `max-block-size` (en-US) 替代 `max-width` 和 `max-height`。用和之前一样的方式玩玩下面的例子。

用于 resize 的逻辑关键词
----------------

`resize` 属性用于设置元素是否可调整尺寸，有实体值 `horizontal` 和 `vertical`。`resize` 也有逻辑关键词值。使用 `resize: inline` 允许沿行向调整尺寸，而 `resize: block` 允许沿块向调整尺寸。

无论你按实体还是按逻辑理解，`resize` 属性的关键词值 `both` 的效果都一样。这个值同时设置两个方向的尺度。玩玩下面的例子。
用于浮动和定位的逻辑属性
============

逻辑属性与逻辑值规范包含了 `float` 和 `clear` 的实体值的逻辑对应关系，以及用于定位布局的定位属性的逻辑对应关系。本指南介绍如何使用这些对应关系。

属性的和值的对应关系
----------

下表详列了本指南所论述的属性和值，以及其实体对应关系。假设书写模式（`writing-mode`）为横排，行内方向为从左到右。

| 逻辑属性或逻辑值 | 实体属性或实体值 |
| --- | --- |
| `float`: inline-start | `float`: left |
| `float`: inline-end | `float`: right |
| `clear`: inline-start | `clear`: left |
| `clear`: inline-end | `clear`: right |
| `inset-inline-start` | `left` |
| `inset-inline-end` | `right` |
| `inset-block-start` | `top` |
| `inset-block-end` | `bottom` |
| `text-align`: start | `text-align`: left |
| `text-align`: end | `text-align`: right |

除了这些有对应关系的属性，另有可以处理块向和行向尺度的简写属性。除 `inset` 属性外，这些属性没有与实体属性的对应关系。

| 逻辑属性 | 用途 |
| --- | --- |
| `inset-inline` | 为行向尺度同时设置上述两个偏移值。 |
| `inset-block` | 为块向尺度同时设置上述两个偏移值。 |
| `inset` | 同时设置四个偏移值，多值语法使用实体对应关系。 |

浮动和清除浮动的示例
----------

`float` 和 `clear` 属性所用的实体值为 `left`、`right` 和 `both`。逻辑属性规范定义 `inline-start` 和 `inline-end` 值对应于 `left` 和 `right`。

在下面的例子里，我有两个盒子——第一个用 `float: left` 设置了浮动，第二个用了 `float: inline-start`。如果把 `writing-mode` 改成 `vertical-rl` 或者把 `direction` 改成 `rtl`，你会看到浮动到左侧的盒子总是贴在左侧，而浮动到 `inline-start` 的元素随着 `direction` 和 `writing-mode` 变动。

示例：定位布局的偏移属性
------------

定位通常可以让我们相对于元素的包含块放置元素——我们就是参照元素在正常流里的位置给元素设置偏移。过去我们用实体属性 `top`、`right`、`bottom` 和 `left` 做这件事。

这些属性的取值是长度或百分比，而且参照的是用户屏幕的尺度。

逻辑属性规范创造了新的属性，你可以用来在你的书写模式里参照文本的流向定位。这些属性有：`inset-block-start`、`inset-block-end`、`inset-inline-start` 和 `inset-inline-end`。

在下面的例子里，带灰色点状边框的区域设置了 `position: relative`。为了在这个区域里用绝对定位放置蓝色盒子，我用了 `inset-block-start` 和 `inset-inline-end` 属性。把 `writing-mode` 属性改成 `vertical-rl`，或者加上 `direction: rtl`，看看相对于流的盒子是怎么根据文本方向保持位置的。

新的二值和四值简写属性
-----------

和规范里的其他属性一样，我们也有新的简写属性可以同时设置两个或者四个值。

* `inset`——使用实体对应关系同时设置四边。
* `inset-inline`——设置两个逻辑行向偏移。
* `inset-block`——设置两个逻辑块向偏移。
示例：text-align 的逻辑值
------------------

`text-align` 属性有参照文本方向的逻辑值——我们可以不用 `left` 和 `right` 而用 `start` 和 `end`。在下面的例子里，我在第一个块里设置了 `text-align: right`，在第二个里设置了 `text-align: end`。

如果把 `direction` 改成 `rtl`，你会看到第一个块还是右对齐的，但是第二个跑到了在左边的逻辑行末。

相比用实体方向对齐，在使用盒对齐的时候用首和末得到的效果更一致。
CSS Animations tips and tricks
==============================

CSS 动画使得你能够实现一些难以置信的效果点缀你的页面或者应用程序。然而，有些你想实现的东西表现的并不浅显易懂，或者没法使你立马想到一种聪明的解决办法。这篇文章集合一个一些温馨贴士和技巧，从而帮助你更轻松地工作，这其中包括了如何使一个已经停止的动画重新开始播放。

重新播放动画
------

CSS 动画的规范并没有提供使得动画重新激活的方法。在元素上调用`resetAnimation()` 并不生效，你也不能直接通过设置元素的 `animation-play-state`使得动画重新“跑起来”。事实上，你必须使用一些技巧使得已经停止的动画重新播放。

这有一种我们认为足够稳定和可靠的方法推荐给你。

### HTML

首先，让我们定义一个我们想要添加动画的元素`<div>` 以及一个“播放”或“重播”动画的按钮。


```html
<div class="box"></div>

<div class="runButton">Click me to run the animation</div>
```

### CSS

现在我们将使用 CSS 定义动画本身。为了简洁，有些并不重要的 CSS（如“播放”按钮的样式）并没有显示在这里。
```

.runButton {
  cursor: pointer;
  width: 300px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  margin-top: 12px;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
  font:
    14px "Open Sans",
    "Arial",
    sans-serif;
}
```



```css
@keyframes colorchange {
  0% {
    background: yellow;
  }
  100% {
    background: blue;
  }
}

.box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

.changing {
  animation: colorchange 2s;
}
```


这里有两个类。`"box"` 类基本表述了 box 的外观，它不包含任何动画信息。动画的细节包含在`"changing"` 类，它描述了名为 `"colorchange"` 的 `@keyframes` 应该这持续两秒的时间段播放动画。

注意，正因为如此，这个 box 在这里不触发任何动画效果，因此他不会动起来。

### JavaScript

接下来我们将看看 JavaScript 的部分如何工作。这里关键的部分在 `play()` 方法中，他在用户点击“播放”按钮时被触发。


```js
function play() {
  document.querySelector(".box").className = "box";
  window.requestAnimationFrame(function (time) {
    window.requestAnimationFrame(function (time) {
      document.querySelector(".box").className = "box changing";
    });
  });
}
```


这看起来有点奇怪，不是么？这是因为重新播放动画的唯一方法是删除动画效果，让文档重新计算样式以使得它知道你已经设置了它，然后再将动画效果加回该元素。要实现这个，我们必须更具创造性。

这里是`play()` 方法被调用时发生的事情：

1. box 的 CSS 类列表被重置为 `"box"`。这么做的效果是移除了在这个 box 上的其他类属性，包括处理动画的 `"changing"` 类。换句话说，我们从 box 元素上删除了动画效果。然而，改变类属性列表在样式被重新计算完成或者发生刷新事件之前并不会生效。
2. 为了确保样式被重新计算我们使用 `window.requestAnimationFrame()`，同时设置了一个回调。我们的回调在下一次重绘页面之前被调用。问题是由于它在重绘之前被调用，而此时样式还没有被真正重新计算。
3. 我们的回调聪明地调用了 `requestAnimationFrame()` 方法！这一次，回调在下一次重绘之前被调用，这发生在样式被重新计算之后。回调在 box 元素上添加 `"changing"` 类，使得重绘后重新触发动画。

当然，我们同样需要在“播放”按钮上添加事件处理方法使其生效：


```js
document.querySelector(".runButton").addEventListener("click", play, false);
```

### 结果

参见
--

* Using CSS transitions
* `Window.requestAnimationFrame()`
使用 box 值指定形状
============

创建形状的一个简单方法是使用 CSS 盒模型中的值。本文将解释如何执行此操作

允许作为形状值的 box 值为：

* `content-box`
* `padding-box`
* `border-box`
* `margin-box`

box 值还支持 `border-radius` 值，这意味着你的页面中可以有带曲线边框的内容，并且你的形状可以跟随创建的形状。

CSS 盒模型
-------

上面列出的值对应于 CSS 盒模型的各个部分。CSS 中的盒子具有内容、外边距、边框和内边距。

![包含外边距、边框、内边距和内容盒子的盒模型](/zh-CN/docs/Web/CSS/CSS_shapes/From_box_values/box-model.png)

通过对形状使用 box 值，我们可以将内容环绕在这些值定义的边上。在下面的所有示例中，我都使用了一个元素，该元素具有外边距、边框和内边距，以便你可以看到内容的不同流动方式。

### margin-box

`margin-box` 是由外部边界边定义的形状，包括形状的角半径（如果 `border-radius` 已用于定义元素）。

在下面的示例中，我们有一个圆形的紫色项，它是一个带有高度、宽度和背景色的 `<div>` 项。通过设置 `border-radius` 属性为 `border-radius: 50%` 属性，创建了一个圆形。由于元素具有外边距，你可以看到内容围绕圆形流动，并且应用了圆形的外边距。

### border-box

`border-box` 值是由外部边框边缘定义的形状。此形状遵循边框外部的所有常规边框半径形状规则。即使没有使用 CSS `border` 属性，仍然有边框。在这种情况下，它将与由外部填充边定义的形状 `padding-box` 相同。

在下面的示例中，你可以看到文本现在是如何遵循由边框创建的行的。改变边框大小，内容也会随之改变。

### padding-box

`padding-box` 值定义由外边距边缘包围的形状。此形状遵循边框内部的所有常规边框半径形状规则。如果没有外边距，则 `padding-box` 与 `content-box` 相同。

### content-box

`content-box` 值定义由外部内容边缘包围的形状。此框的每个角半径都是 0 或 border-radius、border-width、padding 中的较大值。这意味着这里不可能有负值。

什么时候使用 box 值
------------

使用 box 值是创建形状的一种简单方法，但这本质上只适用于可以使用受良好支持的 `border-radius` 属性定义的非常简单的形状。上面显示的示例显示了一个这样的用法。可以使用边框半径创建圆形，然后在其周围绘制文本。

不过，只需使用这种简单的技术，你就能创造出一些有趣的效果。在本节的最后一个示例中，我左右浮动了两个元素，在最靠近文字的方向上，每个元素的边框半径都是 100%。

对于更复杂的形状，你需要使用基本形状 (en-US)中的一种作为值，或者根据本节其他指南中涉及的图像定义你的形状。
CSS 的图形（Shape）概览
================

CSS Shapes Level 1 Specification 在 CSS 中描述了几何图形的 shape（以下叫做形状）。在“Level 1 of the specification”中定义的形状被设计用来绘制浮动的元素。这篇文章提供关于“你能如何绘制这些形状”的概览。

举个例子：你在左侧设计一个浮动元素，它可以令文本环绕于该浮动元素的右侧和底部，并且以一种矩形的样式。如果你接着指定一个圆形的样式，文本就会以圆形的样式环绕。.

事实上，我们有多种方式去创建这类形状，并且我们在指导中将会发现 CSS 形状是怎么工作的，然后就可以跟着感觉走了。

Specification 定义了什么？
--------------------

Specification 定义了三种新的权限：

* `shape-outside` — 允许定义基本形状。
* `shape-image-threshold` — 设定一个渗出阈值。如果一幅图像被用于定义形状，那么只有在大于等于渗出阈值的部分才会显示，其他部分不会显示出来。.
* `shape-margin` — 在形状外面加上边框。
定义基本的形状
-------

`shape-outside` 权限允许定义一个形状，它需要很多参数共同定义而成，这些参数被定义在 `<basic-shape>` 数据类型中。下面是一个小例子。

下面的例子中，左侧有一幅浮动的图像，然后使用`shape-outside` 权限定义一个`circle(50%)`属性。结果为文字环绕于图像，并且图像不显示为矩形，而显示为圆形。

正如这个级别的元素必须被浮动化才能适用`<basic-shape>` 一样，有时候在创建依赖时就会发生副作用。如果在浏览器中不支持形状，那么用户就会看到文本围绕在矩形的图片周围。有了形状支持之后，视觉效果就增强了。

### 基本形状

`circle(50%)` 属性是一个基本形状的例子。它定义了四个 `<basic-shape>` 函数，分别是：

* `inset()`
* `circle()`
* `ellipse()`
* `polygon()`

使用 `inset()` 修饰文本围绕效果时，你还可以增加偏移量，否则就会出现文本过于接近目标对象的情况。

我们已经看到了 `circle()` 如何创建圆形形状。 `ellipse()` 则用来创建椭圆形形状。如果还有特殊要求，使用 `polygon()` 可以创建任意难度的形状。

在我们的 Guide to Basic Shapes (en-US) 中，我们探索每一种形状，并且学会如何创建它们。

### 含有 Box 参数的形状

形状可以加上 Box 参数，因此你可以创建形状在：

* `border-box`
* `padding-box`
* `content-box`
* `margin-box`

当中。

在下面的例子中你可以改变 `border-box` 参数，然后查看形状靠近或者远离 Box 的效果。

详见 Shapes From Box Values (en-US)。

### 由 Image 创建的形状

有意思的是，可以使用带有 Alpha 通道的图像来创建（形状的）路径——文本将会围绕不透明的图像部分。这个特性允许文本覆盖图像，有时候可以将文本围绕于一幅不可见的图像，达到一种多边形文本显示的效果。

需要注意的是，这种方式必须是 CORS compatible 的，否则 `shape-outside` 相当于 `none` ，你将不会得到任何形状。

在下面的例子中，我们有一幅全透明的图像，使用如下 URL，并且指定 `shape-outside`. 属性，创建出一个模糊的形状：一幅气球图像。

#### `shape-image-threshold`

`shape-image-threshold` 属性用于设定图像透明度的阈值并用来创建形状。如果`shape-image-threshold` 是 `0.0` (缺省值) ，那么图像必须是全透明的。如果是 `1.0` 那么图像必须是模糊的。中间的值就代表了区分图像哪部分透明的阈值，以创建形状。

如果我们使用图像来创建形状，那么你可以看到阈值在起作用。在这么多例子中，如果你改变了阈值大小，形状会随之变化。

下面我们进入更深层次的Shapes from Images (en-US)学习。

`shape-margin` 属性
-----------------

`shape-margin` 属性在 `shape-outside`.周围加上边框。它使得文本的 Box 形状更短了，而且远离了形状本身。

在下面的例子中，我们在基本形状中加入了 `shape-margin` 属性。改变边框的宽度可以将文本的距离增大。

将创建的元素作为浮动元素
------------

在上面的例子中，我们使用图像或者可见元素创建形状，意思是你可以在网页上看到这些图形。或者，你也可以只创建图形（而使图形不可见），这就需要一个浮动元素，在浮动元素的基础上就可以使图形不可见。它可以是插入到文档中的冗余元素，可以是空的`<div>` 或者 `<span>` ，但是我们建议用创建好的内容。这就意味着我们可以保留 CSS 中的样式。

在下面的例子中，我们在创建好的内容中插入一个宽高为 150px 的内容。然后，我们可以使用基本基本形状，Box 参数甚至是 Alpha 通道去创建图形，使得文本可以环绕这个图形。

和`clip-path`的关系
---------------

基本图形和 Box 参数被用来创建图形时，和 `clip-path` 参数是等效的。所以如果你想要用图像创建形状的同时剪去部分图像，你可以用如下参数：

下面的图像是一个蓝色背景的方形图像，使用 `shape-outside: ellipse(40% 50%);` 和 `clip-path: ellipse(40% 50%);` 参数去剪去相同的区域，这个区域被定义为形状。

形状的开发工具
-------

和 CSS 形状的开发工具类似，Firefox 在 Firefox DevTools 中自带 Shape Path Editor (en-US) 开发工具。这个工具让你可以查看网页中的任意形状，甚至可以实时显示改变形状之后的效果。如果你的多边形不正确，你可以用 Shapes Editor 调节，然后复制粘贴到 CSS 中。

在 Firefox 60 当中，对于含有 `clip-path`的属性的元素默认启用 Shape Path Editor。你也可以编辑 含有 `shape-outside` 的属性的元素，但前提是开启`layout.css.shape-outside.enabled` 首选项。

未来的 CSS 形状特性
------------

形状初始化包括了一个 `shape-inside` 属性，用来在元素中创建形状。这个属性有可能在非浮动元素中创建形状，被移动到了 level 2 规则中。由于 `shape-inside` 以前属于 Level 1 规则，你或许可以在网上查到它的详细信息和属性。
font-family
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
**`font-family`** 属性允许我们为页面上的字体指定一个由 `@font-face` 规则定义的字体族

The **`font-family`** CSS descriptor allows authors to specify the font family for the font specified in an `@font-face` rule.

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| 初始值 | `n/a (required)` |
| 计算值 | as specified |

语法
--


```css
/\* <string> values \*/
font-family: "font family";
font-family: "another font family";

/\* <IDENT> value \*/
font-family: examplefont;
```

### 取值

`<family-name>`

指定字体族名称

### Formal syntax
```

font-family =   
  <family-name>    
  
<family-name> =   
  <string>         |  
  <custom-ident>+    
  
```

示例
--


```css
@font-face {
  font-family: examplefont;
  src: url("examplefont.ttf");
}
```

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-family-desc |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
src
===

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

* Learn more
* See full compatibility
* Report feedback
`@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.）

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| 初始值 | `n/a (required)` |
| 计算值 | as specified |

Syntax
------


```css
/\* <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 `<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
```

src =   
  <font-src-list>    
  
```

Examples
--------


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

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # src-desc |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
font-style
==========

概述
--

**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.

|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| 初始值 | `normal` |
| 计算值 | as specified |

Syntax
------


```css
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
```

font-style =   
  auto                                      |  
  normal                                    |  
  italic                                    |  
  oblique [ <angle [-90deg,90deg]>{1,2} ]?    
  
```

Examples
--------

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


```css
@font-face {
  font-family: garamond;
  src: url("garamond.ttf");
}
```


![unstyled Garamond](/zh-CN/docs/Web/CSS/@font-face/font-style/garamondunstyled.jpg)

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](/zh-CN/docs/Web/CSS/@font-face/font-style/garamondartificialstyle.jpg)

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.


```css
@font-face {
  font-family: garamond;
  src: url("garamond-italic.ttf");
  font-style: italic;
}
```


![italic garamond](/zh-CN/docs/Web/CSS/@font-face/font-style/garamonditalic.jpg)

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-prop-desc |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
font-display
============

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

字体显示时间轴
-------

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

字体阻塞周期

如果未加载字体，任何试图使用它的元素都必须渲染不可见的后备字体。如果在此期间字体已成功加载，则正常使用它。

字体交换周期

如果未加载字体，任何尝试使用它的元素都必须呈现后备字体。如果在此期间字体已成功加载，则正常使用它。

字体失败周期

如果未加载字体，用户代理将其视为导致正常字体回退的失败加载。


|  |  |
| --- | --- |
| Related at-rule | `@font-face` |
| 初始值 | `auto` |
| 计算值 | as specified |

语法
--


```css
/\* 关键字值 \*/
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
```

### 属性值

`auto`

字体显示策略由用户代理定义。

`block`

为字体提供一个短暂的阻塞周期和无限的交换周期。

`swap`

为字体提供一个非常小的阻塞周期和无限的交换周期。

`fallback`

为字体提供一个非常小的阻塞周期和短暂的交换周期。

`optional`

为字体提供一个非常小的阻塞周期，并且没有交换周期。

### 形式化语法
```

font-display =   
  auto      |  
  block     |  
  swap      |  
  fallback  |  
  optional    
  
```

例子
--


```css
@ 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;
}
```

规范
--

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-display-desc |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `font-family`
* `font-stretch` (en-US)
* `font-style`
* `font-weight` (en-US)
* `font-variant` (en-US)
* `font-feature-settings`
* `font-variation-settings` (en-US)
* `src`
* `unicode-range` (en-US)
rotateY()
=========

**`rotateY()`** 函数定义了一个转换，它可以让一个元素围绕纵坐标 (垂直轴) 旋转，而不会对其进行变形。它的结果是一个`<transform-function>` 数据类型。

尝试一下
----

旋转轴围绕原点旋转，而这个原点通过`transform-origin` 属性来定义。

**备注：** `rotateY(a)` 相当于 `rotate3d(0, 1, 0, a)`.

**备注：** 与二维平面上的旋转不同，三维旋转的组合顺序通常是不可交换的。换句话说，三维旋转的应用顺序，将会影响最终结果。

语法
--

**`rotateY()`** 引起的旋转量由`<angle>`指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。
```

rotateY(a)
```

### 参数值

`a`

`a` 是一个`<angle>` ，表示旋转的角度。正数角度表示顺时针旋转，负数则表示逆时针旋转。



| 笛卡儿坐标 ℝ2 | 齐次坐标 ℝℙ2 | 笛卡儿坐标 ℝ3 | 齐次坐标 ℝℙ3 |
| --- | --- | --- | --- |
| 
 This transformation applies to the 3D space and can't be represented on
 the plane.
  | 

cos(a)
0
sin(a)

0
1
0

-sin(a)
0
cos(a)

 | 

cos(a)
0
sin(a)
0

0
1
0
0

-sin(a)
0
cos(a)
0

0
0
0
1

 |

示例
--

### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotateY(60deg);
  background-color: pink;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 2 # funcdef-rotatey |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `transform`
* `<transform-function>`
matrix()
========

CSS 函数 `matrix()` 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

`matrix(a, b, c, d, tx, ty)` 是 `matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)` 的简写。

**备注：** 直到 Firefox 16, Gecko 才接受对于 **tx** 和 **ty** 的 `<length>` 值。

语法
--
```

matrix(a, b, c, d, tx, ty)
```

参数值
---

*a* *b* *c* *d*

描述线性变换的 `<number>` 。

*tx* *ty*

描述如何应用这个变换的 `<number>` 。



| ℝ2 下的笛卡尔坐标 | ℝℙ2 下齐次坐标 | ℝ3下的笛卡尔坐标 | ℝℙ3下的齐次坐标 |
| --- | --- | --- | --- |
| 

a
c

b
d

 | 



a c txb d ty0 0 1
  | 

a c tx


b d ty0 0 1


 | 

a
c
0
tx

b
d
0
ty

0
0
1
0

0
0
0
1

 |
| `[a b c d tx ty]` |

这些值表示以下函数：

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

示例
--

### HTML
```

<div>Normal</div>
<div class="changed">Changed</div>
```

### CSS
```

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}
```

### 结果

请看英文版案例 /zh-CN/docs/Web/CSS/transform-function/matrix#Result

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-matrix |
rotate()
========

CSS 的 **`rotate()`** 函数定义了一种将元素围绕一个定点（由`transform-origin`属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。旋转 180° 也被称为点反射。

尝试一下
----

元素旋转的固定点 - 如上所述 - 也称为**变换原点**。这默认为元素的中心，但你可以使用`transform-origin`属性设置自己的自定义变换原点。

语法
--

`<angle>` 指定了 `rotate()` 的旋转程度。参数为正时，顺时针旋转；参数为负时，逆时针旋转。180° 旋转称为*点反演*。
```

rotate(a)
```

### 值

*a*

是一种`<angle>`，表示旋转的角度。正角度表示了顺时针的旋转，负角度表示逆时针的旋转。



| 笛卡尔坐标系 on ℝ2 | 齐次坐标系 on ℝℙ2 | 笛卡尔坐标系 on ℝ3 | 齐次坐标系 on ℝℙ3 |
| --- | --- | --- | --- |
| 

cos(a)
-sin(a)

sin(a)
cos(a)

 | 

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 | 

cos(a)
-sin(a)
0

sin(a)
cos(a)
0

0
0
1

 | 

cos(a)
-sin(a)
0
0

sin(a)
cos(a)
0
0

0
0
1
0

0
0
0
1

 |
| `[cos(a) sin(a) -sin(a) cos(a) 0 0]` |

示例
--

### HTML


```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```

### CSS


```css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg); /\* Equal to rotateZ(45deg) \*/
  background-color: pink;
}
```

### 结果

规范
--

| Specification |
| --- |
| CSS Transforms Module Level 1 # funcdef-transform-rotate |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `transform`
* `<transform-function>`
* `rotate3d()`