@qqignatqq

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

Здравствуйте. Обратите внимание на шрифт Open Sans semibold:
Первое изображение
z1.jpgВторое изображение
z2.jpgПояснение
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, но только сглаживание "Плавное"
z3.jpgСуть
Как видите все шрифты отличаются друг от друга. Шрифты в браузере ещё обзаводятся цветными полутенями, в свою очередь шрифт в Photoshop имеет лишь серые оттенки, хотя в обеих случаях цвет черный.

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

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

ДЛЯ ОСОБО ВНИМАТЕЛЬНЫХ
Вопрос основной в том, что один и тот же шрифт себя ведёт даже на разных сайтах по разному. Что не так с Google fonts?
  • Вопрос задан
  • 233 просмотра
Решения вопроса 1
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
Это разница между движками рендеринга шрифтов в ОС и 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; /* Так и не понял результат работы  вот этого */
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ArsenyMatytsyn
@ArsenyMatytsyn
Teamlead команды разработчиков iAmStudio
Опа. Закрываю глаза и пишу — SVG. Форматов шрифтов жеваная тьма и половина из них не поддерживается (утрирую). Лучший результат дают SVG шрифты (ИМХО), но поддерживаются откровенно криво. В плане при подключении шрифта последнее время обычно идет SVG, затем всякие Woff-ы и т.д. По какой причине может не подсосаться первый я не вдавался.
Ну и вообще ФШ инструмент, конечно, удобный, но в целом мало имеет общего с реальностью. Чего стоит шаманство по расчету размеров при переносе макета)
Немного оффтопом, в полиграфии, например шрифт обычно не печатается. Он переводится в кривые. В принципе для улучшения восприятия и уменьшения артефактов тот же подход оптимален и в вебе. Я сталкивался с иконочными шрифтами воичию и обнаружил жуткий артефакт. Был у одного товарища в офисе, у него подключено то ли 3 то ли 4 разного калибра и качества мониторов. В общем когда я увидел свой, с вроде предусмотренными на такие нюансы, в формате пиксельной лесенке, моему удивлению не было предела. Но как оказалось, тем же страдает и Fontawesome, что успокоило. Там же в статье я указал, что есть 2 набора, собственно шрифты, включая SVG шрифт, и символы. Символы это чистый SVG, и вот с ним проблем нет.
Короче, шрифты это полный ахтунг. Меня периодически типать начинает при серьезной работе с ними.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 марта 2019, в 22:30
5000 руб./за проект
19 марта 2019, в 21:07
9000 руб./за проект