Почему мои веб-шрифты Google являются пиксельными? - PullRequest
Новая
       14

Почему мои веб-шрифты Google являются пиксельными?

12 голосов
/ 14 февраля 2012

Я пытаюсь использовать шрифты 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.Мне было интересно, кто-нибудь может объяснить, почему?

Пример

Хостинг imgur.com

Ответы [ 2 ]

20 голосов
/ 16 февраля 2013

Похоже, что команда разработчиков 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;
}

поэтому, просто включив этот вызов непосредственно в таблицы стилей, вы сможете контролировать загрузку заказа.

14 голосов
/ 14 февраля 2012

Это не проблема браузера, это проблема окон.

Проверьте это https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-font-are-you-using-that-are

...