0

Для того, чтоб был понятнее вопрос, начну с изображения:

введите сюда описание изображения

Черный текст (или иконка) размещенная на светлом фоне без изменения её цвета выглядит нормально, так как должна. Однако, если необходимо разместить текст на темного фоне и изменить его цвет на любой другой (не обязательно белый), то визуально он становится толще. Это особенно хорошо видно если соединить 2 изображения.

Хотелось узнать, с чем связан данный аспект? Можно ли его это дело поправить?

Добавил код:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

div:not(.mixed) {
  padding: 30px;
  text-align: center;
  font-size: 1.2em;
}

span,
i {
  font-size: 2em !important;
}

.black {
  background: #eee;
  color: #000;
}

.white {
  background: #333;
  color: #fff;
}

.mixed {
  position: relative;
  margin-top: 10px;
}

.mixed .black {
  background: transparent;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="black">small and <span>BIG</span> <i class="fa fa-commenting-o"></i></div>
<div class="white">small and <span>BIG</span> <i class="fa fa-commenting-o"></i></div>

<div class="mixed">
  <div class="black">small and <span>BIG</span> <i class="fa fa-commenting-o"></i></div>
  <div class="white">small and <span>BIG</span> <i class="fa fa-commenting-o"></i></div>
</div>

Иконки собираю обычно тут. С Font-awesome не все так плохо, но, они уже старели морально.

2 ответа 2

2

Собрал тестовый пример https://jsfiddle.net/hdyLz25c/

Чтобы это не была jpeg с так-себе качеством. Действительно утолщение наблюдается, НО!!!...

специально увеличил картинку (вот один символ) видно, что символы одинаковые (с точностью до полупрозрачных пикселей) и эффект толщины возникает именно психологически

сравнение текстов на разных фонах

Можно еще посмотреть свойство font-smooth и поиграться со сглаживанием, но браузеры пока не очень любят это делать

https://caniuse.com/#search=font-smooth

P.S.

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

сравнение изображений на разных фонах

P.P.S.

Специально по 1 совету (тень) сделал пример: https://jsfiddle.net/hdyLz25c/1/

И шрифт стал визуально тоньше!!!

3 способа отображения изображения, самый нижний - утоньчает текст

Так что способ работает!!!

2
  • Спасибо за уделенное время. Причины визуального утолщения шрифтов я понимаю. Цвет заливает полупрозрачные пиксели и добавляет сглаживание, что увеличивает визуально фигуру. Сделайте инверсию и обесцвечивание сделанных скриншотов и увидите, что белая фигура, став черной, не становится снова тонкой. 27 ноя 2017 в 15:21
  • Решение с text-shadow все же не лучшее, так как им можно воспользоваться в каких-то частных случаях. При большом количестве текста или объектов разного размера с тенью запаришься играться. А вот в сторону `font-smooth я все же погляжу. К слову, нашел исследование Шоуна Бланка по данной проблеме и он там именно этот способ и использовал по итогу. Если никто больше ничего не придумает, приму ваш ответ. 27 ноя 2017 в 15:27
0

Вы исходите из неверной концепции. Текст толще кажется только когда более светлый шрифт на более темном фоне, если наоборот, то текст кажется тоньше.

Кроме того есть таблица сочетания цветов для таких случаев (обычно оформлена в виде круга), когда цвета должны быть противоположны, иначе получается система "вырви глаз".

http://studyas.com/shag-3-oformlenie-interera/tsvet-v-interere/74-sochetanie-tsvetov-i-tsvetovoj-krug-garmonichnye-tsveta

Касательно того, чтобы шрифт не казался толстым можно попробовать применить трюк слабого свечения около шрифта (например, тень со смещением 0,0).

Например:

text-shadow 0px 0px 1px rgba(0, 0, 0, 0.25)

Возможны 2 варианта:

1) Свечение наружу (шрифт утолщится)

2) свечение внутрь (шрифт утоньшится)

Цвет свечения должен быть для варианта 1) близок к цвету текста, для варианта 2) близок к цвету фона.

Правда для текста внутреннюю тень создать нельзя - надо читить: https://habrahabr.ru/post/154211/ (прочитайте "Inset в text-shadow")

Таким образом "жирный" шрифт можно заузить "растворив" его края близким к фону цветом

5
  • Вопрос был не о сочетании цветов, а первый абзац я описывал в вопросе. Текст не кажется тоньше, он именно такой, каким должен быть (то же касается и иконок) и становится толще при заливке светлым цветом. Что касается text-shadow, то это отнюдь не решение проблемы. 27 ноя 2017 в 12:46
  • Да, теперь понял. А каким способом размещается текст и иконка? Можно выложить отдельно иконку для тестирования.
    – Zhihar
    27 ноя 2017 в 12:58
  • Добавил код в вопрос. При наложении видно, что белый шрифт на 1px выступает, по сравнению с черным фоном. 27 ноя 2017 в 13:17
  • Посмотри - я привел изображения ниже, видно, что изображения полностью идентичные, с точностью до пикселя. Поэтому надо полупрозрачные пиксели делать еще более прозрачными, а это или работа со сглаживанием (написал ниже), но браузеры поддерживают слабо или добавление тени внутрь текста или изображения (описал выше) , тем самым полупрозрачные точки будут казаться еще более прозрачными и психологический эффект будет слабее.
    – Zhihar
    27 ноя 2017 в 13:25
  • посмотри мой ответ - я сделал css который смог утоньчить текст (jsfiddle.net/hdyLz25c/1)
    – Zhihar
    27 ноя 2017 в 13:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.