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

Question

假设我有这个字体：Open Sans

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

Answer 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>

Answer 2

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

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

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

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

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