我正在使用Rails,并按如下所示指定了我的字体:
#Application.html.erb includes in the head:
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
#One of the stylesheets includes:
body{ font-family: 'Indie Flower', sans-serif; }
我还使用了Bootstrap gem(也许覆盖了上面的内容?)。
但是,在开发服务器上,我的站点未使用我指定的字体。我认为是Helvetica。我究竟做错了什么?
我还检查了检查员,它提供了以下信息:
body
是说font-family: "Indie Flower",sans-serif;
。div
它表示相同。h3
内div
说font-family: inherit;
。h5
内的相同div
。p
内div
它说font-family: "Indie Flower",sans-serif;
因此,您可能希望字体确实是Indie Flower,但事实并非如此。我还使用另一种字体进行了检查,所有文本再次显示为Helvetica,而不是我指定的字体。
我究竟做错了什么?
更新 application.html.erb
:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<%= render 'shared/shim' %>
</head>
<body>
<%= yield %>
</body>
</html>
我也通过将字体移到样式表上方来进行尝试,但这没什么区别。
和application.css
:
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require bootstrap-datepicker3
*= require_tree .
*= require_self
*/
更新2:从中删除字体,application.html.erb
确认它没有显示正确的字体。在检查器中,它指定了正确的字体。但是,它实际上并没有使用该字体。同样,我可以在CSS中指定一个带有一些随机名称的字体系列,它显示的字体与现在相同。
因此,我的印象是,它已在CSS中正确指定,但该应用程序无法访问该字体,因此只能使用verdana。也许应用程序无法加载字体?但是,为什么会这样呢?为什么它无法访问该字体呢?我尝试了不同的Google字体,并相信每次在中正确指定了它们的来源application.html.erb
。该怎么办?
我找到了原因。字体的来源必须是https
而不是http
。所以:
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
这非常棘手,因为网络上提供的所有包含在您自己的应用程序中的链接都使用“ http”。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句