Установленный шрифт от Google отличается от шрифта, полученного через их API?

Question

Я схожу с ума с проблемой, и мне интересно, может ли кто-нибудь помочь. В настоящее время я использую http://font-combinator.com, чтобы увидеть, как выглядит другой стиль шрифтов вместе. Этот веб-сайт просто загружает шрифты из Google Fonts и отображает их на экране.

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

font: 100%/1.6 "Font name here"; 
color: #bbb; 
font-weight: 400; (for example) 

Проблема заключается в том, когда я смотрю на него в том же браузере, как я сделал Font Combinator, он выглядит грубее и более зубчатым. Настройки не были изменены. Шрифт на обоих сайтах - 16 пикселей. Для справки Я использую Windows XP с выключенным cleartype (мне это не нравится).

Теперь, если я связываюсь с Google Fonts напрямую через свой сайт, он отображается так же, как и в Font Combinator. Я не понимаю, как установить тот же шрифт, который использует Google, дает другой результат? В идеале я хотел бы разместить шрифт на своем веб-сайте сам, но не вижу пути вокруг этого? Я что-то делаю неправильно, или есть что-то, что я пропустил? Благодаря!

Для справки, я использую следующий сброс:

html,body,etc.... { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
list-style-type: none; 
font-size: 100%; 
} 

Edit: код @Fontface, который я использовал, что это, кажется, выглядят одинаково!

@font-face { 
font-family: 'Molengo'; 
src: url('./fonts/Molengo-Regular.ttf') 
format('truetype'); 
} 

(просто выбрал этот шрифт в качестве примера)

Answer 1

Это потенциально дубликат this question, но это был мой ответ на этот вопрос:

шрифты рендер по-разному на основе:

• Разрешение экрана/монитора
• Браузер
• Операционная система
• Размера использования и намекая

Не видя код только вещи, которые я могу рекомендовать являются:

• убедившись, что вы используете приличный CSS сброс (что-то вроде этого: http://meyerweb.com/eric/tools/css/reset/).

• Попробуйте добавить font-weight: normal; к шрифтам, чтобы узнать, если это имеет значение; иногда браузеры и фреймворки пытаются добавить поддельные смелые вещи.

• Убедитесь, что вы используете фактические версии шрифтов, а не просто применяете стили CSS.

• Если все остальное не работает, попробуйте наброситься на размер шрифта вверх/вниз на небольшую сумму и посмотрите, лучше ли шрифты на этих размерах.

Некоторые люди также рекомендуют не использовать @import или прямую ссылку из Google. Возможно, попробуйте загрузить файл и использовать @ font-face в вашем css. Надеюсь, это поможет!

EDIT: Если у вас есть шрифт самостоятельно - дважды проверьте шрифт @ font-face. Убедитесь, что вы вызываете все версии шрифта. Кроме того, Some browsers prefer certain formats being called earlier.

Answer 2

У меня была такая же проблема, и это беспорядок и трудно решить. Основная проблема заключается в том, что загруженный вами шрифт на самом деле не является «тем же», который предоставляет веб-сайт google. Семейство шрифтов одно и то же, но Google может предоставить его в разных форматах. Шрифт, который вы установили в вашей системе, вероятно, является файлом .ttf, это шрифт TrueType, и Windows может его использовать. Но, если вы посмотрите на CSS, что Google служит вам, когда вы включаете шрифт, это что-то вроде этого:

Для этого:

http://fonts.googleapis.com/css?family=Open+Sans 

вы получите это:

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); 
} 

Как вы можете см., если нет локального соответствия, он запрашивает шрифт BUT в формате woff, это тот же шрифт, но в другом формате шрифта. На самом деле, я сделал этот пример с помощью chrome, но css, который Google предоставляет, выбирает лучший формат шрифта в зависимости от браузера и SO, которые сделали запрос.

Именно поэтому вы видите, что такой же семейный семейный рендеринг отличается от другого, локальный - .ttf, другой может быть woff, svg (я думаю, для IE), и есть другие возможности. И тот же шрифт в разных форматах выглядит по-другому, иногда слишком много.

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