您的位置：首页 > Web前端 > CSS

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

2013-01-09 17:54 706 查看

@ 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

@ font-face的资源

Font Squirrel

Font Squirrel是一个很棒的网站，你应该非常熟悉。Font Squirrel是一家集优质商业使用的免费字体供您下载。最重要的是，他们有@ font-face的工具包部分和@ font-face的工具包生成器。Font Squirrel工具包，为您提供不同的字体类型，你需要支持的每一个浏览器。

@ font-face的工具包

Font Squirrel的套件部分是现成的工具包，其中包括多种字体格式，CSS和HTML代码的集合。所有你必须做的是选择一个字体，下载工具包，并复制代码。这是简单，。最重要的是，他们有一个很大的选择充满了巨大的字体。

@ font-face的工具包生成器

另一方面，你有工具包生成器，您上传您自己的字体，它为您提供了所需的所有代码。因为它创造了一个新的工具包为您的字体。所有你必须做的就是下载新的套件，并复制代码到您的网站。它也就是这么简单。然而，当使用自己的字体，请确保您有权利使用它- 不是所有的字体版权允许

谷歌字体

谷歌字体是谷歌的API，你必须选择在您的网站中使用的字体的集合。所有的字体都是免费的，开放源码的。他们的选择是相当大的，包括许多伟大的字体。此外，您还可以自由选择你喜欢的。一旦你选择了你的字体，你给出的代码片段，将其粘贴到您的网站。谷歌允许您选择不同的代码，如将CSS导入到您的<head>标签。

当谈到谷歌的字体，那肯定是一个易于使用的服务。有一件事是你要知道的：它会告诉你你所选择的字体对您的网站的加载时间的负载。

TypeKit

TypeKit是另一种服务，有字体的集合 - 尽管他们是一种有偿服务。他们一直致力于使@ font-face的更容易实现。他们的价格似乎是公平的，很多人使用它，因为他们有一个宏伟的集合伟大的字体供您使用。有没有授权你不用担心，如果你使用他们的服务 - 他们为你照顾。他们还与许多字体制造商合作，为您提供最新，最好的字体。

本文链接：什么是@font-face，以及在css当中如何使用

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航