字体无法正确加载到资源管道中

Question

在开发中，一切似乎都正常。 但是，生产中的某些字体无法正确加载。

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

我相信Lobster字体无法正确加载。 这是我的布局文件的顶部：

homepage.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" />

资产css文件之后加载字体是一个问题吗？ 我在这里做错了什么。

Answer 1

我看到您正在通过https加载<script> ，而将有害字体加载到http 。 确保所有请求都使用相同的协议，切勿混用。 尝试：

= 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"

这与协议无关，因此，如果您使用的是https ，则将通过https进行加载，与使用简单的http服务器甚至是静态file://进行测试时相同。