Rails 上带有 Ruby 的 AMP：无法使用 Google 字体

Question

我正在我的 Rails 应用中实现 AMP 页面。但是我无法让我的字体工作。它在 Google 搜索控制台上引发此错误：

"CSS syntax error in the "amp-自定义样式“标签。声明不正确。” Ligne 14:63 quot;Raleway", sans-serif}.banner{color:white;tex...

这是我的application.amp.erb

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="<%= url_for(format: :html, only_path: false) %>" >
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,600&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
    <% if Rails.application.assets && Rails.application.assets['amp/application'] %>
      <style amp-custom>
        <%= Rails.application.assets['amp/application'].to_s.html_safe %>
      </style>
    <% else %>
    <style amp-custom><%= File.read "#{Rails.root}/public#{stylesheet_path('amp/application', host: nil)}" %>
    </style>
    <% end %>
  </head>
  <body>
    <amp-font
      layout="nodisplay"
      timeout="3000"
      font-family="Raleway">
    </amp-font>
    <div class="amp">
      <%= render "shared/navbar" %>
      <%= yield %>
    </div>
  </body>
</html>`

我为 AMP 视图导入的 application.scss 的开头触发了 Google 控制台上的错误：

body {
  font-family: "Raleway", sans-serif;
}

我尝试了所有方法，包括@font-face，但没有任何效果。

但是，根据官方文档 (https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts)，link 语法应该适用于 Google 字体，这显然是 AMP 允许的白名单字体提供商。

Answer 1

尝试将字体直接导入 css 文件：

@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

那么你可以为这个字体创建一个class或者直接在body style中使用它:

.raleway {
    font-family: "Raleway", sans-serif; /* for set this font on every element you want by using this class
}
/* or in body style: */
body {
    font-family: "Raleway", sans-serif;
}

Greetz Toxi

Answer 2

关于 @font-face 方法的几件事。

@font-face 行必须是 CSS 样式表中的 FIRST 行。将以这种方式导入的所有字体放在样式表的顶部。
从 link 到 Google URL 可能很棘手，因为 Google 为每个浏览器提供不同的 URL当您获得实际的字体路径时。我新 MacBook 上 Safari 中的 Raleway 获得了新的 woff2 格式：

url('https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2') format('woff2');

使用不同的计算机，Google 提供较旧的 woff 字体： url('https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyC0ISQ.woff) format('woff');

如果您的浏览器恰好是您获得字体 link 或等效字体时使用的浏览器，这些将起作用。我无法让 @font-face 与你 HTML 脑袋中的 link 一起工作： href="https://fonts.googleapis.com/css?family=Raleway:400,600&display=swap"。它似乎需要一个 link 到实际的字体文件，无论是 .ttf 还是 .woff 或 .woff2 。

最可靠的方法可能是从 Google 下载字体，并使用 @font-face 以及与 Rails 应用程序资产的其余部分一起驻留的字体的实际路径。类似于：

<style type = "text/css">
@font-face {
font-family: 'Raleway Regular';
src:url('/app_assets/Raleway/Raleway-Regular.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
}

body {
font-family: 'Raleway Regular';
}
</style>

（我只是将样式标签放在样式表中以证明在 @font-face 行之前不能有任何内容。）

要下载，请转至 Raleway font Google 字体。 Select 它带有红色加号，然后打开页面底部的菜单。点击下载箭头：

下载的文件夹将包含18种不同风格的Raleway，从Raleway-Regular.ttf到Raleway-BlackItalic.ttf再到Raleway-Thin.ttf。您可以像我一样只使用常规样式，或者 link 它们都在 CSS 页面顶部的自己的 @font-face 标签中。

Rails 上带有 Ruby 的 AMP：无法使用 Google 字体

AMP with Ruby on Rails : Impossible to use a a Google Font

html

css

ruby-on-rails

amp-html

google-fonts