Исправление разницы в шрифте - PullRequest
Новая
       77

Исправление разницы в шрифте

0 голосов
/ 20 мая 2019

Я использую этот шрифт: https://fonts.googleapis.com/css?family=Poppins (Google Fonts). Я внедряю его в свой HTML-документ следующим образом в теге <head>: <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" type="text/css" />
К своему тексту я применяю его с помощью этого небольшого кода CSS: 

* {
  font-family: 'Poppins', sans-serif;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
}

Все работает в Chrome. В Chrome версии 74.0.3729.157:
это выглядит так chrome_feeling
А вот стиль другого браузера, такого как microsoft edge Версия 17.17134: microsoft_edge_feeling
Как видите, есть большая разница. И чтобы создавать красивые веб-страницы, мне нужно это исправить. Надеюсь, кто-нибудь может мне помочь в этом. Благодарю. :)
ПРИМЕЧАНИЕ. Похоже, что он по-прежнему работает нормально для элементов <p> и в других браузерах. Но не для <h1> элементов. Шрифт обычно применяется к элементу <h1>, но по какой-то причине, я думаю, он выглядит иначе. Как это исправить? ~ Filip

EDIT:
Чтобы легко увидеть и проверить мою проблему, откройте этот jsfiddle в разных браузерах (например, chrome и edge): https://jsfiddle.net/filipdg/q1mhcvau/4/

1 Ответ

1 голос
/ 20 мая 2019

Для решения проблемы включите формат WOFF в вашу декларацию @font-face. Большая часть современных браузеров поддерживает WOFF

Для максимальной поддержки браузера включите все возможные форматы. 

@font-face {
    font-family: 'Poppins';
    src: url('Poppins.eot');
    src: url('Poppins.eot?#iefix') format('embedded-opentype'),
       url('Poppins.woff2') format('woff2'),
       url('Poppins.woff') format('woff'), 
       url('Poppins.ttf')  format('truetype'),
       url('Poppins.svg#svgFontName') format('svg');
}
...