AMP с Ruby on Rails: невозможно использовать Google Font - PullRequest
Новая
       9

AMP с Ruby on Rails: невозможно использовать Google Font

4 голосов
/ 24 мая 2019

Я реализую AMP-страницы в своем приложении Rails.Однако я не могу заставить свой шрифт работать.Эта ошибка возникает в консоли поиска Google:

"Ошибка синтаксиса CSS в теге" amp-custom style ". Неверное объявление."Ligne 14:63 "Raleway", без засечек} .banner {color: white; tex ...

Это мое приложение .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>`

И началомоего application.scss, который я импортирую для своих AMP-представлений, что вызывает ошибку на консоли Google: 

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

Я пробовал все, включая @ font-face, но ничего не получалось.

Однако согласно официальной документации (https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts) синтаксис ссылки должен работать с Google Fonts, который, очевидно, является поставщиком шрифтов из белого списка, разрешенным AMP.

Ответы [ 2 ]

3 голосов
/ 01 июня 2019

Несколько вещей о методе @font-face.

  1. Строка @font-face должна быть строкой FIRST в вашей таблице стилей CSS.Поместите все шрифты, импортированные таким образом, вверху таблицы стилей.

  2. Это может быть сложно связать с URL-адресами Google, потому что Google дает разные URL-адреса для каждого браузера, когда вы получаете фактический путь шрифта.Raleway в Safari на моем новом MacBook получает новый формат woff2 :

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

Используйте другой компьютер, и Google обслуживает старый woff font: url('https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyC0ISQ.woff) format('woff');

Они будут работать, если ваш браузер окажется тем, который вы использовали, когда получили ссылку на шрифт, или эквивалентную.Я не смог заставить @font-face работать со ссылкой в ​​вашей HTML-главе: href="https://fonts.googleapis.com/css?family=Raleway:400,600&display=swap".Кажется, нужна ссылка на файл шрифта, .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 Fonts.Выберите его с красным знаком плюс, затем откройте меню внизу страницы.Нажмите на стрелку загрузки:

enter image description here

Загруженная папка будет содержать 18 различных стилей Raleway, от Raleway-Regular.ttf доRaleway-BlackItalic.ttf в Raleway-Thin.ttf.Вы можете использовать только обычный стиль, как я, или связать их все в собственных тегах @font-face в верхней части страницы CSS.

0 голосов
/ 01 июня 2019

Попробуйте импортировать ваш шрифт прямо в ваш CSS-файл: 

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

тогда вы можете создать класс для этого шрифта или использовать его непосредственно в стиле тела: 

.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;
}

Привет Токси

...