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

Question

Я пытаюсь использовать шрифты Google на простом веб-сайте. Тег, который я использую

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' > 

КСС

body { 

    padding: 0; 
    text-align: center; 

    line-height: 180%; 

    background: #1a2426; 
    color: #f7f7f7; 

    font-family: 'Lobster', serif; 

} 

Проблема заключается в том, что шрифт выглядит некачественно, когда я тяну его в Chrome. Мне было интересно, может ли кто-нибудь объяснить, почему?

Пример

Answer 1

Это не проблема браузера это проблема окон. это https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-font-are-you-using-that-are

Answer 2

Оказывается

Убедитесь, что команда Chrome развития is aware этого вопроса. Они рассматриваются ими как ошибка, над которой они работают.

Лучшее решение, которое я нашел, - это не делать какие-либо рекомендуемые хаки 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’); 
} 

Заканчивать this article для получения дополнительной информации.

Вы можете упорядочить порядок загрузки шрифта. вам просто нужно понять, что, вызывая 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; 
} 

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