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

我看到您正在加载<script>到https，同时在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服务器进行测试，或者甚至是静态{{} 1}}。

字体无法正确加载资产管道

1 个答案: