Идентичность отображения шрифта в PSD и в браузере, CSS настройки. Как сделать?

Question

[Игорь]

Здравствуйте.
Имеется PSD макет, там находится текст. Шрифт: Arial Regular Regular, Размер: 14пт, резкое.
Как в Браузере, через настройки CSS, сделать абсолютно идентичный текст ?

Сейчас решил сверстать строго по PixelPerfect.

Наверное есть свод правил по идентичному переносу текста из PSD в Браузера, методом настройки в CSS ?

Answer 1

[Lynn «Кофеман»]

Никак. Забудьте об этом. Вы не должны этого хотеть.

Answer 2

[Александр Чекалин]

Вы можете попробовать поиграть со свойством text-rendering (понаписано про него много, скажем - https://css-tricks.com/almanac/properties/t/text-r... ), со свойством -webkit-font-smoothing (ну, понятно, в каком браузере), , только с ним надо верить в то, что у юзера "правильный" браузер.

Второй финт ушами - делать у текста почти отсутствующую тень через text-shadow (скажем, text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004) - видите размер тени?), в отдельных случаях это помогает.

Так что пишете что-то вроде

text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;

и молитесь :)

А вообще, веб - это не pixel-prefect, а в первую очередь контент. Все красивости, где нужно, можно заменить на графику с красиво написанными заголовками, через трюки вида такого: https://css-tricks.com/the-image-replacement-museum/ , но, прошу вас, помните, что люди с мобильными устройствами предпочли бы получить контент чуть менее красивый, но более отображаемый на их устройствах.

Answer 3

[dom1n1k]

Никак. Вообще никак.
Есть некоторые полукостыльные свойства, которые что-то там немножко меняют (см. соседний комментарий), но совершенно полного соответствия не будет никогда.
Между браузерами и осями рендеринг текста тоже различается.