导入字体后是否需要 @font-face 指令？答案

【问题标题】：Is an @font-face directive required after importing a font?导入字体后是否需要 @font-face 指令？
【发布时间】：2014-10-31 09:37:55
【问题描述】：

我正在开发一个使用商业 wordpress 主题和 redux 框架的网站。在我看来，网络字体的实现不正确，我只想与前端专家确认这一点。

在包含的 css 文件中声明了以下内容：

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:600);

后来，字体在整个主题的 css 中使用：

font-family: Source Sans Pro;

经过一些测试，在我看来，只有最终用户在他们的系统上实际安装了 Source Sans Pro 字体时，上述方法才有效。就我而言，我确实在 OSX 上安装了这个，所以没有看到与最终用户相同的字体问题。由于未能提供回退，我在其他浏览器中观察到了这一点，例如虚拟化 Windows 8.1 上的 IE11 显示衬线字体。

导入后是否需要 Source Sans Pro 的 @font-face 声明？我在主题加载的 css 中的任何地方都找不到这个。 Source Sans pro 是否也应该被引用？下面会更正确吗？

font-family: "Source Sans Pro", sans-serif;

【问题讨论】：

代码正确。如果它不起作用，则问题出在其他地方。提供一个可测试的案例，但它无法正常工作。

标签： css font-face webfonts

【解决方案1】：

我意识到，如果您点击链接 http://fonts.googleapis.com/css?family=Source+Sans+Pro:600，它会加载包含 @font-face 代码的 css。

【讨论】：

【解决方案2】：

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:600);
font-family: 'Source Sans Pro', sans-serif;

在谷歌上找到它：fonts library

我刚刚对其进行了测试，它可以在没有引号和无衬线部分的情况下正常工作。所以你可以确定它有效:)

【讨论】：

谢谢。单引号和双引号都有效吗？您是否希望不带引号的版本不起作用？
@codecowboy 我刚刚对其进行了测试，它在没有引号和无衬线部分的情况下工作得很好。所以你可以确定它有效:)
这与问题中的代码在任何本质上都没有不同。仅仅说它有效并不能回答声称它无效的问题。
@JukkaK.Korpela 他在问，当引号不存在时它是否有效，它确实有效。所以它实际上是问题的答案:)