Можно ли отключить сглаживание шрифтов в CSS?

Я хочу, чтобы некоторые мелкие шрифты выглядели без сглаживания. Можно ли отключить сглаживание шрифтов с помощью HTML/CSS?


html fonts css stylesheet font-smoothing
person German Latorre    schedule 10.05.2012    source источник
comment
@ artur123 Вы решили свою проблему?   -  person Eugene Trofimenko    schedule 16.05.2012
comment
Извините, что до сих пор не предоставили никаких отзывов. К сожалению, это не сработало для меня в Google Chrome. Шрифты по-прежнему гладкие :-( Может быть, какая-то проблема, зависящая от ОС?   -  person German Latorre    schedule 16.05.2012
comment
Я обновил свой пост. Вы читали эту статью? 2011/03/ ?   -  person Eugene Trofimenko    schedule 16.05.2012

Ответы (4)


arrow_upward
21
arrow_downward

Да, это возможно, но не для всех браузеров.

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased

Для вашего случая:

font-smooth: never;
-webkit-font-smoothing : none;

UPD (для Chrome): Принудительное сглаживание шрифтов в Chrome в Windows

person Eugene Trofimenko    schedule 10.05.2012
comment
Спасибо, Евгений, но предоставленная вами ссылка говорит о принудительном сглаживании, и я вообще не хочу сглаживания для некоторого текста в моем веб-приложении, :-) - person German Latorre; 17.05.2012

arrow_upward
4
arrow_downward

Да, хотя я не могу сказать, какие браузеры вас заметят!

Ты можешь написать

<p style="font-smooth:never;">

чтобы получить желаемый эффект.

ИЗМЕНИТЬ

Я был уверен, что использовал это несколько месяцев назад, но я прочитал в сети Mozilla

Хотя он присутствовал в ранних (2002 г.) черновиках шрифтов CSS3, font-smooth был удален из этой спецификации и в настоящее время не входит в стандартный набор.

Извиняюсь!

person Borodin    schedule 10.05.2012

arrow_upward
2
arrow_downward

попробуй font-smooth: never;

http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm

person Chase    schedule 10.05.2012
comment
ссылка сейчас не работает. (Я имею в виду 12 лет спустя, но вы знаете!) - person BJury; 06.03.2021

arrow_upward
0
arrow_downward

Я тоже искал это. И в конце концов я нашел решение в другом потоке stackoverflow ( Как получить crispEdges для текста SVG ? ), чтобы отключить сглаживание текста ( отключить сглаживание ) для SVG, но это решение также работает для обычных элементов HTML.

Хитрость заключается в использовании SVG-фильтра, который затем можно добавить к любому элементу HTML, чтобы сделать что-либо четким.

  1. Сначала нам нужно определить фильтр, чтобы мы могли использовать его внутри нашего CSS.
<svg class="offscreen" width="0" height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="crispify">
            <feComponentTransfer>
                <feFuncA type="discrete" tableValues="0 1"/>
            </feComponentTransfer>
        </filter>
    </defs>
</svg>
  1. Добавьте фильтр к элементу HTML, который содержит только текст. Если у него есть фоновый цвет или что-то в этом роде, это не работает.
p {
    filter: url(#crispify);
}
  1. дополнительные вещи: вы, вероятно, захотите скрыть элемент SVG, поэтому добавьте его в CSS.
.offscreen {
    position: absolute;
    left: -100000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
  1. еще одна вещь: если это выглядит странно с белым цветом, измените цвет на черный и инвертируйте его, используя другой фильтр, чтобы ваш код выглядел так:
p {
  filter: url(#crispify) invert(1);
}
  1. Обратите внимание, что это будет лучше всего выглядеть для шрифтов, которые должны быть четкими, например пиксельных шрифтов. Я также не знаю, будет ли это работать со всеми браузерами, но оно работает в Chrome, Edge и Firefox.
person nathnolt    schedule 16.03.2021