为什么我的网站没有使用我指定的字体?无法访问字体



我正在使用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。我做错了什么?

我还与检查员核实,检查员提供了以下信息:

  • 因为bodyfont-family: "Indie Flower",sans-serif;.
  • 例如,对于下一个div它说同样的话。
  • div内的h3font-family: inherit; .
  • div内的h5也是如此。
  • 对于div内的p,它说font-family: "Indie Flower",sans-serif;

所以你会期望字体确实是独立花,但事实并非如此。我还使用另一种字体检查了它,所有文本再次显示为我认为是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。也许应用程序无法加载字体?但是为什么会这样,或者为什么它无法访问字体?我尝试了不同的谷歌字体,并相信它们的来源每次都正确指定application.html.erb。怎么办?

试试这个:

body{
    font-family: 'Indie Flower', cursive;
}

我找到了原因。字体的来源需要https而不是http。所以:

<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

这是非常棘手的,因为网络上提供的所有链接都包含在您自己的应用程序中使用"http"。

最新更新