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

Question

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

Answer 1

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

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

Answer 2

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

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

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

чтобы получить эффект, который вы хотите.

---

РЕДАКТИРОВАТЬ

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

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

Сожалею!

Answer 3

Я тоже это искал. И в конце концов я нашел решение в другом потоке 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>

2. Добавьте фильтр к элементу HTML, который содержит только текст. Если у него есть фоновый цвет или что-то в этом роде, это не сработает.

      p {
    filter: url(#crispify);
}

3. дополнительные вещи: вы, вероятно, захотите скрыть элемент SVG, поэтому добавьте его в CSS.

      .offscreen {
    position: absolute;
    left: -100000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

4. Другое дело: если белый цвет выглядит странно, измените цвет на черный и инвертируйте его с помощью другого фильтра, чтобы ваш код выглядел так:

      p {
  filter: url(#crispify) invert(1);
}

5. Обратите внимание: это лучше всего подходит для шрифтов, которые должны быть четкими, например пиксельных шрифтов. Я также не знаю, будет ли это работать со всеми браузерами, но он работает в Chrome, Edge и Firefox.

Answer 4

Пытаться font-smooth: never;

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