Google Web-шрифты (css) не такие же, как в фотошопе

Question

Я загрузил шрифты из веб-шрифтов google, чтобы использовать мой проект psd, это okey so far.but, в моем html мои веб-шрифты google выглядят по-другому, как вы видите ниже изображения;

мой СДП

и мой HTML

размер шрифта

семейство шрифтов

высота линии

начертание шрифта все же, как фотошоп но шрифты выглядят по-другому. ..

и я добавил тела

-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 

но изменить ничего ..

кстати мой шрифт Hind Fonts

Answer 1

Все браузеры будут оказывать шрифты немного по-другому, независимо, рендеринг шрифта также зависит от вашей ОС.

Другая вещь, которая может повлиять на то, как выглядят ваши шрифты, - это то, как дизайнер задал текстовое сглаживание в Photoshop. Текст сглаживанием управляется здесь на вашей верхней строке меню (с выбранным текстом инструмента):

Ниже Hind набор шрифтов с 5 различными настройками Сглаживание:

Обратите внимание, что, в частности, сильная настройка сглаживания изменяет внешний вид фактических символов глифов. Не видя своего фактического кода, трудно сравнивать и диагностировать любые проблемы, помимо того, что может быть вызвано вне Photoshop.

Answer 2

1. Вы должны иметь в виду, что каждый браузер делает шрифт по-разному. У Photoshop гораздо больше функциональности шрифтов, чем в веб-браузере. У каждого браузера и ОС есть отличный механизм рендеринга, поэтому, даже если вы можете использовать его в одной комбинации браузера/ОС, он будет выглядеть по-другому в другом.

2. Вы можете исправить рендеринг шрифтов, используя text-rendering. Это свойство предоставляет информацию движку рендеринга о том, что до оптимизируется при рендеринге текста.

   Это не определено ни в одном стандарте CSS - это просто свойство SVG. Однако браузеры Gecko/WebKit/Blink позволяют применить это свойство к HTML-элементам.

   Некоторые файлы шрифтов содержат дополнительную информацию о том, как шрифт должны быть оказаны и optimizeLegibility делает использование этой информации

   так что вы можете использовать:

   .yourText { 
       text-rendering: optimizeLegibility; 
   } 
   

3. Вы можете попробовать и использовать варианты, как font-stretch: normal; или font-weight:normal;, может быть, они помогут вам по крайней мере немного.

Answer 3

Вы уверены, что вы просто не задали масштаб просмотра браузера несколько ниже 100%? Это швы так.