25

任何人都知道如何在我的 Rails 应用程序中包含谷歌字体样式表？我试过添加

<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' 
rel='stylesheet' type='text/css'>

进入我的application.html.erb，但这无济于事

4

8 回答 8

17

For external style sheet add this to your layout (application.html.erb)

 stylesheet_link_tag 'application', 'put any external link'

If you use
1) <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> in rails layout

2)

Style an element with the requested web font, either in a stylesheet:

CSS selector {
  font-family: 'Font Name', serif;
}

or with an inline style on the element itself:

Your text

you got font family Tangerine

Example :--

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
   <style>
     body {
      font-family: 'Tangerine', serif;
      font-size: 48px;
     }
</style>
 </head>
<body>
  <div>Making the Web Beautiful!</div>
</body>
</html>
于 2013-08-29T11:11:02.870 回答
16

我一直在努力解决这个问题，因为我有这样的一行：

<%= stylesheet_link_tag 'application', 
media: 'all', 'data-turbolinks-track' => true %>

第一眼就很难说出将您的链接放在哪里。

您想要做的是将样式表链接放在AFTER 之后 'application'，用逗号分隔。像这样：

<%= stylesheet_link_tag 'application',
'https://fonts.googleapis.com/css?family=Open+Sans:400&subset=latin',
 media: 'all', 'data-turbolinks-track' => true %>

然后像往常一样在样式表中使用它和font-family属性。

当然，我们可以在 SASS 中 @import 它，或者像往常一样使用链接标记，但这只是另一种方式，应该在这里提及。

于 2015-09-03T09:42:20.820 回答
15

只需将 google 提供的代码添加到 application.scss 文件的顶部即可。

@import url('https://fonts.googleapis.com/css?family=Quicksand|Rubik');

请注意，rails 将为您提供开箱即用的 application.css 文件和 require 语句。删除这些并重命名 application.scss

记得添加@import 文件名；对于文件夹中的任何其他客户 scssfiles

于 2017-06-06T11:44:00.583 回答
3

如果您通过 @import 添加字体，如其他注释所示，在 application.css 中的 @import Bootstrap 下，资产管道会将其编译到应用程序样式表中。如果你把它作为一个链接放在你的 html 的头部，它会被添加为一个单独的样式表，这会减慢页面的加载速度。您可以像 Google 从您在 Google 字体网站上选择的字体中提供的一样添加 @import 代码。

于 2017-03-22T16:35:47.673 回答
2

application.html.erb 

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<%= stylesheet_link_tag    "application", :media => "all" %>
 <%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>

 <!-- Google font -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

</head>
<body>
 ............

application.css

body {
 font-family: 'Ubuntu', sans-serif;
}

I use it this way, maybe this will clarify.

UPDATED

Try to remove your scaffold.css.scss! Or just open and comment out all body part of CSS of this file.

于 2013-08-29T11:10:55.010 回答
2

我相信最集成的方法是编辑 app/assets/views/application.html.erb 并更改：

<%= stylesheet_link_tag 'application.css' %>

至

<%= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Catamaran','application.css' %>
于 2016-08-24T09:16:11.593 回答
1

把它贴在 application.html.erb 的 head 部分

<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' 
rel='stylesheet' type='text/css'>

把它放在你的css文件中：

body{
  font-family: "Raleway", Arial, sans-serif;
}
于 2013-08-29T11:12:38.580 回答
0

你确定你把<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' rel='stylesheet' type='text/css'>它放在你想要的布局中吗？

在你各自的<layout>.css样式表中，你放了font-family:Raleway;吗？

确定。谢谢。

于 2013-08-29T11:10:10.353 回答