Я пытаюсь использовать шрифты Google на простом веб-сайте. Тег, который я использую,
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' >
css
body {
padding: 0;
text-align: center;
line-height: 180%;
background: #1a2426;
color: #f7f7f7;
font-family: 'Lobster', serif;
}
Проблема заключается в том, что шрифт выглядит неровным, когда я вытягиваю его в Chrome. Мне было интересно, может ли кто-нибудь объяснить, почему?
Пример
Это не проблема браузера, это проблема окон.
Похоже, что команда разработки Chrome знает этой проблемы. Они рассматриваются ими как ошибка, над которой они работают.
Лучшее решение, которое я нашел, заключается не в том, чтобы делать какие-либо из рекомендуемых хаков CSS (с небольшой теневой теневой копией и т.д.), а в том, чтобы переставить ваш стек шрифтов так, чтобы версия .svg загружалась первой, поскольку Chrome не полностью еще не поддерживает шрифты TrueType.
Например:
@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘webfont.svg#svgFontName’) format(‘svg’),
url(‘webfont.woff’) format(‘woff’),
url(‘webfont.ttf’) format(‘truetype’);
}
Обратитесь к этой статье для получения дополнительной информации.
Вы можете упорядочить порядок загрузки шрифта. вам просто нужно понять, что, вызывая http://fonts.googleapis.com/css?family=Lobster 'rel=' stylesheet 'type =' text/css ' > , вы вводите внешнюю таблицу стилей, в которой говорится:
/* latin */
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v11/G6-OYdAAwU5fSlE7MlBvhVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
поэтому, просто включив этот вызов непосредственно в таблицы стилей, вы можете контролировать загрузку заказа.