Пользовательский шрифт отличается в разных браузерах (Safari / Chrome / Firefox) - PullRequest
Новая
       13

Пользовательский шрифт отличается в разных браузерах (Safari / Chrome / Firefox)

0 голосов
/ 30 марта 2020

У моего нестандартного шрифта (Gilroy, купленного на myfonts) есть проблемы во всех браузерах. Шрифт толще и больше в Chrome, чем в других браузерах.

1 Ответ

0 голосов
/ 30 марта 2020

Размер шрифта такой же, но ваши буквы в Chrome жирнее, чем в Firefox. Это потому, что вы неправильно импортируете свои шрифты.

В настоящее время вы используете: 

@font-face {
  font-family: "Cobury Regular";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Cobury Bold";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

... {
  font-family: "Cobury Regular";
}
... {
  font-family: "Cobury Bold";
}

Но правильный путь будет: 

@font-face {
  font-family: "Cobury";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CCC_0_0.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Cobury";
  src: url(https://cobury.com/wp-content/uploads/2020/03/3B2CD0_0_0.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}

... {
  font-family: "Cobury";
  font-weight: normal;
}
... {
  font-family: "Cobury";
  font-weight: bold;
}

Всегда используйте шрифт с их фактический font-weight. Не рассматривайте один и тот же шрифт с разным весом и стилем, как разные шрифты.

В ваших файлах шрифтов .woff реализованы мета-теги, которые сообщают браузеру, какую толщину имеют буквы. Если указанная font-weight в операторе импорта @font-face не совпадает с этим, браузеры будут обрабатывать это по-другому, потому что для этого нет стандарта. (Chrome пытается справиться с ситуацией, добавляя дополнительную толщину к уже жирному шрифту по любой причине.)

Редактировать:
Я вижу, что вы используете h1, .text-logo #logo { font-weight: 900; ... в вашем CSS, но вы никогда не определяли шрифт с весовым числом 900. Пожалуйста, используйте только те веса, которые вы указали через @font-face. (С моим предложением это будет normal и bold)

...