Что происходит со шрифтом на сайте и в photoshop?

Question

[del993788]

Здравствуйте. Обратите внимание на шрифт Open Sans semibold:
Первое изображение
Второе изображение
Пояснение
1. На сайте font.google.com - это значит, что я перешел на страницу со шрифтом https://fonts.google.com/specimen/Open+Sans
2. Это значит, что в Adobe Photoshop CC был выбран шрифт Open Sans Semibold, а тип сглаживания "Насыщенный"
3. Это значит, что я подключил к сайту шрифт

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&amp;subset=cyrillic" rel="stylesheet">

А в css прописал font-family: 'Open sans'; font-weight:600; font-size: 16px;
4. То же самое, что и во 2, но только сглаживание "Плавное"
Суть
Как видите все шрифты отличаются друг от друга. Шрифты в браузере ещё обзаводятся цветными полутенями, в свою очередь шрифт в Photoshop имеет лишь серые оттенки, хотя в обеих случаях цвет черный.

Но самое главное - это плотность самого шрифта. Насыщенный и на Google похожи друг на друга, и плавный со шрифтом на обычном сайте тоже похожи. Здесь главное слово ПОХОЖИ, так как если сделать эффект "Черное-белое", то между шрифтами не будет вообще ничего общего.

Теперь вопрос.
Почему на сайте Google шрифт отличается от шрифта на любом другом сайте?
Как сделать, чтобы на сайте было определённое сглаживание?

ДЛЯ ОСОБО ВНИМАТЕЛЬНЫХ
Вопрос основной в том, что один и тот же шрифт себя ведёт даже на разных сайтах по разному. Что не так с Google fonts?

Comments

[Rustam Bainazarov]

Добро пожаловать в разницу рендеринга шрифтов в браузерах, ОС и в Photoshop.

[Ярослав Иванов]

Суть в том чтобы вместо того писать простыню вопроса можно просто загуглить "браузер шрифт по разному отображается" и понять что браузер по-другому рендерит шрифты. И никак это не лечится. Перестаньте страдать перфекционизмом.

[Rustam Bainazarov]

Вот это добавьте в body или *

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

Немного исправит ситуацию.

[del993788]

SmthTo, здесь разница не в photoshop-браузер, а браузер-браузер

Ярослав Иванов, вопрос перечитай. Один и тот же шрифт рендерится по разному, а не в photoshop.

[Moskus]

"цветные тени" - это технология ClearType, которая включена в Windows. А у кого-то она выключена, или иначе настроена (да, она настраивается по нескольким параметрам).

Answer 1

[Rustam Bainazarov]

Это разница между движками рендеринга шрифтов в ОС и Photoshop'е. Плюс, браузеры вносят свою лепту.

Чтобы было как на fonts.google.com, добавьте это в CSS:

html, body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

Более ничего вы сделать не сможете.

Update. Ну можно, конечно, хернёй помаяться ещё со следующими свойствами:

-webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.1); /* Сильно влияет на рендеринг (условно, т. к. сам механизм рендеринга навряд ли меняет), аккуратнее с этим свойством */
text-shadow: #fff 0px 1px 1px; /* Да, LOL, оно тоже влияет на рендеринг */
 text-rendering: optimizeLegibility; /* Так и не понял результат работы  вот этого */

Comments

[del993788]

Повторюсь: здесь разница не в photoshop-браузер, а браузер-браузер.

Плевать, что в photoshop не так, как в браузере. Важно, что в одном и том же браузере на разных сайтах разное сглаживание

А ваш код ничего не дал, вообще...

[Rustam Bainazarov]

Ссылку в студию. Других свойств для контроля сглаживания в CSS нет.

[Rustam Bainazarov]

qqignatqq, более того, данные свойства в Chrome не могут ничего не менять, смотрите сами:
анимация включения свойства

[del993788]

SmthTo, у меня что в хроме, что в яндекс браузере - одна и та же картина. Щелкаю точно также, как и вы, но у меня вообще ничего не изменяется. Там это правило встречается 2 раза, я оба правила выключил, а толку ноль...

[Rustam Bainazarov]

qqignatqq, тогда предлагаю смириться, либо плясать вот с таким свойствами:

-webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.1); /* Влияет на рендеринг сильно, аккуратнее с этим свойством */
text-shadow: #fff 0px 1px 1px; /* Да, LOL, оно тоже влияет на рендеринг */
 text-rendering: optimizeLegibility; /* Так и не понял результат работы  вот этого */

[Rustam Bainazarov]

qqignatqq, типа вот:
кликайте

Answer 2

[Арсений Матыцин]

Опа. Закрываю глаза и пишу — SVG. Форматов шрифтов жеваная тьма и половина из них не поддерживается (утрирую). Лучший результат дают SVG шрифты (ИМХО), но поддерживаются откровенно криво. В плане при подключении шрифта последнее время обычно идет SVG, затем всякие Woff-ы и т.д. По какой причине может не подсосаться первый я не вдавался.
Ну и вообще ФШ инструмент, конечно, удобный, но в целом мало имеет общего с реальностью. Чего стоит шаманство по расчету размеров при переносе макета)
Немного оффтопом, в полиграфии, например шрифт обычно не печатается. Он переводится в кривые. В принципе для улучшения восприятия и уменьшения артефактов тот же подход оптимален и в вебе. Я сталкивался с иконочными шрифтами воичию и обнаружил жуткий артефакт. Был у одного товарища в офисе, у него подключено то ли 3 то ли 4 разного калибра и качества мониторов. В общем когда я увидел свой, с вроде предусмотренными на такие нюансы, в формате пиксельной лесенке, моему удивлению не было предела. Но как оказалось, тем же страдает и Fontawesome, что успокоило. Там же в статье я указал, что есть 2 набора, собственно шрифты, включая SVG шрифт, и символы. Символы это чистый SVG, и вот с ним проблем нет.
Короче, шрифты это полный ахтунг. Меня периодически типать начинает при серьезной работе с ними.

Comments

[Rustam Bainazarov]

Преимущества SVG-шрифтов пока что недоказуемы, к сожалению, т. к. они поддерживаются только в Safari.

P. S. Google Gonts грузит WOFF2 как в Chrome, так и в Safari.

[Максим]

это у вас не иконочный шрифт - вы же выводите не span.delta а use ...
вот я делал иконочный шрифт - смотрите результат работы

[Арсений Матыцин]

Максим Ленский, текста я, конечно, много накатал, но надо его немного внимательнее читать. А в самой статье не только начало и конец.

Ну и чо бы и нет. Цитирую:

Там же в статье я указал, что есть 2 набора, собственно шрифты, включая SVG шрифт, и символы.

А в статье должен интересовать заголовок «Gulp iconfont» и перед ним.

[Арсений Матыцин]

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

А, ну и да, неплохо бы в ресурсах проверять, что же было загружено в конечном счете и как. Оптимизация ресурсов это немного оффтоп, но тема тоже интересная и ощутимо влияющая на все вот это вот)

[Rustam Bainazarov]

Арсений Матыцин, по идее, у SVG-шрифта рендеринг должен быть мягче, у него нет тех свойств, что у OTF/TTF.

Но он весит очень много + уверен, что производительность будет хреновой, если много текста.

[Арсений Матыцин]

SmthTo, да, 37 кб против 5 в исполнении woff2.
На счет «мягче» не понял, но основное отличие SVG в том, что это все такие масштабируемое явление, которое вроде бы как не шибко имеет зависимость от размера (имеет).

[Rustam Bainazarov]

Арсений Матыцин, браузер их рендерит в обход встроенного в ОС алгоритма рендеринга шрифтов, что ли. Где-то было сравнение: у SVG-шрифта значительно мягче края выходят.