CSS 在 Rails 应用中包含 Google 字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18508996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Include Google Font in Rails App
提问by tommyd456
Anyone know how I can include a google fonts style sheet in my rails app? I have tried adding
任何人都知道如何在我的 rails 应用程序中包含谷歌字体样式表？我试过添加
<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200'
rel='stylesheet' type='text/css'>
Into my application.html.erbbut that doesn't do anything
进入我的application.html.erb但没有任何作用
回答by Rajarshi Das
For external style sheet add this to your layout (application.html.erb)
对于外部样式表，将此添加到您的布局 (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
如果在 rails 布局中 使用
1)
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
2)
2)
Style an element with the requested web font, either in a stylesheet:
在样式表中使用请求的 Web 字体为元素设置样式：
CSS selector {
font-family: 'Font Name', serif;
}
or with an inline style on the element itself:
或者在元素本身上使用内联样式：
你的文字you got font family Tangerine
你有字体系列 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>
回答by Keeprock
I was struggling with this one, because I had a line like this:
我在这个问题上挣扎，因为我有这样一行：
<%= stylesheet_link_tag 'application',
media: 'all', 'data-turbolinks-track' => true %>
It's hard to tell where to put your link at a first sight.
乍一看，很难说出将链接放在哪里。
That you wanted to do is to place your stylesheet link AFTER'application', divide it by commas. Like this:
您想要做的是将样式表链接放在AFTER 之后'application'，用逗号分隔。像这样：
<%= stylesheet_link_tag 'application',
'https://fonts.googleapis.com/css?family=Open+Sans:400&subset=latin',
media: 'all', 'data-turbolinks-track' => true %>
Then use it in your stylesheet as usual with font-familyproperty.
然后像往常一样使用font-family属性在样式表中使用它。
Of course, we can @import it in a SASS, or do it as usual with a linktag, but that's just an another way and it's should be mentioned here.
当然，我们可以在 SASS 中 @import 它，或者像往常一样使用链接标签来做，但这只是另一种方式，应该在这里提到。
回答by Jeremy Bray
Simply add the code provided by google to the top of your application.scss file.
只需将 google 提供的代码添加到 application.scss 文件的顶部。
@import url('https://fonts.googleapis.com/css?family=Quicksand|Rubik');
@import url('https://fonts.googleapis.com/css?family=Quicksand|Rubik');
please note rails will provide you with application.css file out of the box with require statements. remove these and rename application.scss
请注意，rails 将为您提供带有 require 语句的开箱即用的 application.css 文件。删除这些并重命名 application.scss
remember to add @import filename; for any other custome scssfiles in the folder
记得添加@import 文件名；对于文件夹中的任何其他客户 scssfiles
回答by Jeremy Bray
application.html.erb
应用程序.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
应用程序.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.
尝试删除您的 scaffold.css.scss！或者只是打开并注释掉这个文件的 CSS 的所有主体部分。
回答by user1251840
I believe the most integrated way is to edit app/assets/views/application.html.erb and change:
我认为最集成的方法是编辑 app/assets/views/application.html.erb 并更改：
<%= stylesheet_link_tag 'application.css' %>
to
到
<%= stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Catamaran','application.css' %>
回答by lorio
If you add the font via @import as shown in other comments, under @import Bootstrap in application.css, the asset pipeline compiles it into the application stylesheet. If you put it in the head of your html as a link, it gets added as a separate stylesheet which slows down the page loads. You can add the @import code just as Google provides from the fonts you choose on the Google font site.
如果您通过@import 添加字体，如其他注释所示，则在 application.css 中的 @import Bootstrap 下，资产管道将其编译到应用程序样式表中。如果您将它作为链接放在 html 的头部，它会作为单独的样式表添加，这会减慢页面加载速度。您可以添加 @import 代码，就像 Google 从您在 Google 字体站点上选择的字体中提供的一样。
回答by Magnum
stick this inside the head section of application.html.erb
把它贴在 application.html.erb 的 head 部分
<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200'
rel='stylesheet' type='text/css'>
stick this in your css file:
把它放在你的 css 文件中：
body{
font-family: "Raleway", Arial, sans-serif;
}
回答by rony36
Are you sure you are putting <link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' rel='stylesheet' type='text/css'>this to your desire layout?
你确定你把<link href='https://fonts.googleapis.com/css?family=Raleway:500,900,200' rel='stylesheet' type='text/css'>它放在你想要的布局中吗？
And in your respective <layout>.cssstylesheet, did you putted font-family:Raleway;?
在您各自的<layout>.css样式表中，您输入了font-family:Raleway;吗？
Make it sure. Thanks.
确保它。谢谢。
