在 Ruby on Rails 3.2 应用程序中集成 googlefonts答案

【问题标题】：Integrating googlefonts in Ruby on Rails 3.2 application在 Ruby on Rails 3.2 应用程序中集成 googlefonts
【发布时间】：2012-12-09 17:34:25
【问题描述】：

我必须在一个 Rails 应用程序中使用来自 Google 的字体。普通的 HTML 代码这样定义 googlefonts 的用法：

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>

我尝试在我的 alpplication.html.erb 中添加相同的行，但没有成功。然后我将@font-face 定义（从link-href 指向的位置）提取到一个单独的css.scss 文件中，并将该文件包含在我的清单css 文件中：

#googlefonts.css.scss
@font-face {
font-family: 'PT Sans';
font-style: italic;
font-weight: 400;
src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v4/xxxx.woff) format('woff');

}

#application.css

   *= require googlefonts
   *= require_tree .

它没有再发生。

请帮我解决这个难题。在 Rails 3 应用程序中使用 Google 托管的字体的最佳做法是什么？

编辑：这是我的 css，指的是@font-face 定义：

#styles.css.scss
body{
font-family: "PT Sans", Arial, Helvetica, sans-serif;
font-size:13px;
line-height:25px;
text-shadow:none !important;
color:#444;
}

【问题讨论】：

请在您使用 'PT Sans' 的地方添加 CSS 选择器
感谢您的关注，我编辑了我的问题。

标签： ruby-on-rails ruby-on-rails-3 asset-pipeline google-font-api

【解决方案1】：

使用您的示例代码，以下内容对我来说很好：

# stick this inside the head section of application.html.erb 
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>

# stick this in your css file:
body{
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
}

这就是你所需要的，它工作得很好。我建议放弃 googlefonts.css.scss 文件，除非您有要提供的字体的本地副本。无论如何，谷歌为您提供的链接实际上会为您处理该代码，see for yourself

【讨论】：

感谢您的宝贵时间。很奇怪，我刚刚按照您的指示创建了一个新的 Rails 应用程序，并且运行良好。在我的 Refinery CMS 应用程序中，导致问题，它仍然无法正常工作。有什么问题？
嗨，您是否删除了 css 文件以及对它的引用？您需要实际删除该文件，因为需要树将导致它被包含在内。 AFAIK 精炼厂应该可以很好地与谷歌字体配合使用..
我想我发现了问题：炼油厂已经分离了部分头部，位于炼油厂/目录中。这个部分的格式是 .erb (default) 。我的 application.html 是 .haml 格式。当我将 _head.thml.erb 转换为 _head.html.haml 时，效果很好。感谢您的帮助，我迷失在迷雾中……您认为我应该创建一个答案吗？

【解决方案2】：

我想我找到了问题：

炼油厂有部分头部，位于炼油厂/目录。这个部分的格式是 .erb (default) 。我的 application.html 是 .haml 格式。当我将 _head.thml.erb 转换为 _head.html.haml 时，效果很好。设置 google 字体很简单，就像 Stephenmurdoch 在他的回答中描述的那样。

【讨论】：