什么是@font

什么是@font-face，以及在css当中如何使用

@ font-face的是一个CSS规则，允许你输入自己的字体出现在网站上，即使在特定的字体在访问者的计算机上没有安装。这条规则最重要的是，它为设计师打开了一个全新的世界。您可以使用任何你喜欢的字体。

为什么它是真棒

就像我说的，@ font-face的打开一个全新的世界。现在，我们能够以一种全新的方式使用排版。这就是为什么你看到这么多独特的网站上的字体排版的网页设计元素和更高的集成度。

此外，作为一个解决方案，展示了自定义字体，使用在图像上的文字可以帮助搜索引擎优化

如何使用@ font-face的

下面的语法是你如何使用@ font-face的。首先，定义新的字体所提供的名称和说明的字体。

@font-face {
    font-family: DeliciousRoman;
    src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');
}

然后你引用它。

p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

就是这样。

在前面的例子中使用外部来源。但是，如果将字体文件是在您的服务器上，那么你可以参考以下的方式：

@font-face {
    font-family: DeliciousRoman;
    src: url('…/Delicious-Roman.otf');
}

此外，还有其他三个字体属性，您应该知道的。首先是font-stretch，您可以设定的字体会被拉伸，“normal’”是默认的。此外，有字体的风格，让你的字体是斜或斜体。最后，还有字体的重量，最后字体为粗体，等你可以自己设置

@font-face {
    font-family: DeliciousRoman;
    src: url('…/Delicious-Roman.otf');
    font-stretch: condensed;
    font-style: oblique;
    font-weight: bold;
}

建议

字体渲染是一件棘手的事情 - 尤其是老移动浏览器。你应该总是测试，你可以尽可能多的设备支持。发现问题的速度越快越好。

最后，请记住，使用许多不同的字体可能会减慢你的网站需要时间来加载所有这些字体！

浏览器的兼容性

并非所有的浏览器都支持@ font-face的！

目前，@ font-face的支持

• Firefox
• Opera
• Chrome
• Safari
• Internet Explorer 9

这是你会说他不支持IE9以下的浏览器吗，不用担心，在旧的浏览器使用@ font-face时，不同的浏览器支持特定的字体文件。

• IE浏览器：EOT
• Mozilla浏览器：OTF，TTF
• Safari浏览器：OTF，TTF​​，SVG
• 歌剧：OTF，TTF​​，SVG
• Chrome浏览器：TTF，SVG