Сделайте маленький шрифт смелее

Question

Мне интересно, есть ли у кого-нибудь умный трюк с js или css, чтобы сделать маленький шрифт немного смелее.

Для клиента мы используем шрифт Courier с размером шрифта 12px/15px и преобразованием текста в верхнем регистре. Я добавил жирный шрифт к тексту, но текст по-прежнему не такой жирный, как в файле дизайна Photoshop.

Кто-нибудь знает какие-нибудь хитрости, чтобы маленький шрифт казался смелее?

Мой текущий CSS:

.block.project p {
    font-family: "Courier New",Courier,monospace;
    font-size: 12px;
    line-height: 15px;
    font-weight: bolder;
}

Я попытался выполнить некоторые трюки с текстовой тенью, но это не дает удовлетворительного эффекта.

Заранее спасибо!

Answer 1

Вы можете попробовать тень шрифта, используя ту же цветную тень, что и цвет шрифта.

Это может сделать одно из следующего:

Добавьте размытую тень шрифта к каждому краю

text-shadow: 0px 0px 1px #000000;

Или добавьте один пиксель к вертикальной толщине каждой буквы

text-shadow: 0px 1px 0px #000000;

Или добавьте один пиксель к горизонтальной толщине каждой буквы

text-shadow: 1px 0px 0px #000000;

Я думаю, что 2-й из них будет моим личным предпочтением.

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

Найти генератор здесь

Answer 2

Попробуйте установить font-weight: 900; - это максимальное значение для font-weight, Если это не поможет, попробуйте увеличить font-size;,

Кроме того, Photoshop и браузеры используют разные модели рендеринга, поэтому различия всегда будут существовать.