font-face не работает в сафари [пример jsfiddle] - PullRequest
Новая
       36

font-face не работает в сафари [пример jsfiddle]

0 голосов
/ 02 апреля 2020

Я загружаю шрифт с 3 весами из шрифтов Google и могу правильно отображать текст с 3 весами на Firefox и Chrome, но в Safari он не будет работать:

https://jsfiddle.net/vmarquet/u6ezqbrm/

Safari не поддерживает font-face псевдонимы?

1 Ответ

0 голосов
/ 08 апреля 2020

Это должно работать для вас: https://jsfiddle.net/7czpo2s3/

Когда я тестировал ваш образец, в «Chrome» и «Safari» отображался только обычный вес. Другие объявления @font-face, которые вы использовали, могли использовать вашу локальную копию шрифта, если она у вас установлена, но они не будут работать для тех, у кого он не установлен локально.

Потому что вы используете Google Fonts, @font-face декларации для использования размещенных шрифтов уже написаны для вас. Если вы прямо go наберете URL-адрес шрифтов Google , вы увидите, что вы получаете таблицу стилей CSS с уже написанными объявлениями @font-face. font-family для всех стилей - Монтсеррат. Вместо того, чтобы использовать разные веса с именем font-family, вы хотите изменить его на font-weight.

Вот что я изменил в вашем примере: 

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700&display=swap" rel="stylesheet">

<style>
  .light,
  .regular,
  .bold {
    font-family: "Montserrat";
  }

  .light   { font-weight: 300; }
  .regular { font-weight: 400; }
  .bold    { font-weight: 700; }
</style>

<div class="regular">Montserrat</div>
<div class="light">Montserrat</div>
<div class="bold">Montserrat</div>

Если вы это сделаете если шрифт Montserrat установлен локально, вы также можете отключить его. Тогда будет легче определить, когда все работает, поскольку Google Fonts также будет использовать локальные шрифты, если они доступны.

...