CSS3@font-face用法教程

`@font-face` 是 CSS3 中的一个规则，它允许开发者定义自定义字体，并在网页中使用。以下是详细的使用教程：

1. 定义字体

在 `@font-face` 规则中，你需要定义字体的名称，以及字体文件的 URL。例如：

```css

@font-face {

font-family: 'myFirstFont';

src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); / IE9 /

}

```

在这个例子中，`myFirstFont` 是自定义字体的名称，`Sansation_Light.ttf` 和 `Sansation_Light.eot` 是字体文件的 URL。需要注意的是，不同的浏览器支持不同的字体格式，比如 IE9 只支持 `.eot` 类型的字体，而 Firefox、Chrome、Safari 和 Opera 则支持 `.ttf` 和 `.otf` 两种类型字体。

2. 引入字体

一旦定义了自定义字体，你就可以在网页中使用它了。通过设置元素的 `font-family` 属性，你可以让元素使用你刚刚定义的自定义字体。例如：

```css

.box {

font-family: 'myFirstFont';

}

```

在这个例子中，`.box` 元素将会使用 `myFirstFont` 字体。

3. 处理浏览器兼容性

由于不同的浏览器支持不同的字体格式，你可能需要提供多种格式的字体文件，并在 `src` 属性中指定它们。例如：

```css

@font-face {

font-family: 'myFirstFont';

src: url('Sansation_Light.eot'); / IE9 /

src: url('Sansation_Light.eot?iefix') format('embedded-opentype'), / IE6-IE8 /

url('Sansation_Light.woff2') format('woff2'),

url('Sansation_Light.woff') format('woff'),

url('Sansation_Light.ttf') format('truetype'),

url('Sansation_Light.svgAlibaba-PuHuiTi-Regular') format('svg'); / iOS4.1- /

}

```

在这个例子中，代码首先尝试加载 `.eot` 格式的字体文件（用于 IE9），然后尝试加载其他格式的字体文件，以便支持更多的浏览器。

4. 使用本地字体

除了从服务器加载字体文件之外，你还可以使用本地字体。通过设置 `src` 属性为 `local()` 并传入字体名称，你可以让浏览器使用操作系统已经安装的字体。例如：

```css

@font-face {

font-family: 'myFont';

src: local('Microsoft YaHei');

}

```

在这个例子中，`.box` 元素将会使用操作系统已经安装的 `Microsoft YaHei` 字体。

以上就是 `@font-face` 的基本用法。通过合理地使用 `@font-face`，你可以为网页添加更多的个性化和视觉效果。