css - Assets 管道无法正确加载字体

Question

在开发中，一切似乎都运行良好。但是，生产中的某些字体未正确加载。

.navbar-brand {
  font-family: 'Lobster', cursive;
  font-size: 26px;
}

我认为 Lobster 字体未正确加载。这是我的布局文件的顶部:

主页.html.haml:

= stylesheet_link_tag "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
= stylesheet_link_tag "http://fonts.googleapis.com/css?family=Lobster"
= stylesheet_link_tag "http://fonts.googleapis.com/css?family=Oswald"
/ HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries
/[if lt IE 9]
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>

当它在生产环境中呈现时:

<link data-turbolinks-track="true" href="/assets/homepage-2e981940003b710365e4aaa4ebad6972.css" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/application-c327f4188c82f7df44984ab92143cc09.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" media="screen" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Lobster" media="screen" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Oswald" media="screen" rel="stylesheet" />

在 Assets css 文件之后加载字体是否有问题？我在这里做错了什么。

Answer 1

我看到你正在加载你的 <script>通过https在 http 中加载了有问题的字体.确保您的所有请求都使用相同的协议(protocol)，切勿混合搭配。尝试:

= stylesheet_link_tag "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
= stylesheet_link_tag "//fonts.googleapis.com/css?family=Lobster"
= stylesheet_link_tag "//fonts.googleapis.com/css?family=Oswald"

它与协议(protocol)无关，所以如果您使用 https , 它将通过 https 加载，如果您使用简单的 http 进行测试，则相同服务器甚至静态 file:// .