将 Google Web 字体与 SASS/Compass 一起使用——如何？答案

【问题标题】：Using Google Web Fonts with SASS/Compass -- how?将 Google Web 字体与 SASS/Compass 一起使用——如何？
【发布时间】：2013-07-15 09:00:18
【问题描述】：

假设我有这个字体：Open Sans

如果我想将它与 SASS/Compass 项目一起使用，是否有更好的方法，然后链接到由 Google 托管的其他样式表以便能够使用该字体？

【问题讨论】：

您也可以下载它并在本地引用它。

标签： css sass compass-sass google-font-api

【解决方案1】：

使用@import 选项：

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

或 JavaScript 选项：

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

【讨论】：

@import 是特定于 SASS 的吗？
@DougSmith 不确定你在问什么。 Sass 会将其解释为 CSS import 而不是 Sass 部分导入。
在我的 .scss 工作表中为 Google 字体使用 @import 方法时，我不断收到错误消息：“@import url(http”: 预期的逗号，为“://fonts.google”后的 CSS 无效...”知道发生了什么吗？
已解决。需要删除 url();只需将其直接放在引号内......“googleapis......”使用指南针仅供参考

【解决方案2】：

不需要谷歌。 Open Sans 是......好吧，打开......你可以自己托管字体：

http://www.fontsquirrel.com/fonts/open-sans

如果你想要真正的花哨，你可以使用 Bourbon 的 font-face mixin：

http://bourbon.io/docs/#font-face

让谷歌（或 Typekit 等）完成繁重的工作是一个很好的案例，但我更喜欢控制自己的命运，并在可能的情况下倾向于支持自托管。 :)

【讨论】：

我自己在托管字体方面没有太多经验，只是在根目录中使用它们会导致用户在没有字体的情况下下载它吗？
OP 正在使用 Compass，它有一个用于自定义字体的 mixin：compass-style.org/reference/compass/css3/font_face
@DougSmith 将字体视为任何其他资产，如图像、脚本等。通常最好将它们存储在自己的目录中。