25、CSS3新特性：圆角、动画、自定义字体等的探索

CSS3新特性：圆角、动画、自定义字体等的探索

1. 媒体查询的浏览器支持情况

媒体查询是CSS3中一项重要的特性，它允许我们根据设备或浏览器的特定特征来指定样式规则。以下是不同浏览器对媒体查询的支持情况：
| 浏览器 | 支持版本 |
| ---- | ---- |
| Internet Explorer | 9.0+ |
| Google Chrome | 4.0+ |
| Firefox | 3.5+ |
| Safari | 4.0+ |
| Opera | 9.5+ |

2. 新的和正在开发的模块

除了字体模块外，CSS3还有许多新的模块。虽然这些模块很令人兴奋，但浏览器的支持情况相对有限，对于一些特性的填充或设计绕过缺乏某些功能的情况也更具挑战性。不过，它们展示了CSS强大的新发展方向。

2.1 使用 @font-face 指令实现自定义字体

新字体模块中最重要的组件是 @font-face 规则。该规则允许我们通过CSS规则直接将字体嵌入到文档中，从而对网页上的字体拥有更大的控制权。

在网页发展历程中，网页字体通常基于用户计算机上可用的字体。由于很少有用户是拥有成百上千种字体的设计师，因此网页设计师和开发者可用的字体数量一直有限。而 @font-face 规则改变了这一现状，只要字体许可证允许在网页上嵌入，我们就可以使用该规则让用户下载并在网页上使用该字体。

@font-face 规则的基本格式如下：

@font-face {
  fo