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

【问题标题】：font not loading properly with asset pipeline资产管道无法正确加载字体
【发布时间】：2014-05-17 18:05:06
【问题描述】：

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

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

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

【问题讨论】：

您使用什么浏览器来检查这些字体的加载情况？碰巧是firefox吗？
不...不是 firefox...这让我发疯了，因为它在开发中看起来非常好...这意味着我的资产管道有问题
不确定是否与此有关，但也许将http 添加回第一个 stylesheet_link_tag 中？也许它的格式不正确并导致其他两个无法加载到产品中？

标签： css ruby-on-rails fonts

【解决方案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:// 进行测试，则相同。

【讨论】：