Можно ли отключить сглаживание в CSS при использовании @ font-face с пиксельными шрифтами?

Рендеринг шрифтов выполняется операционной системой и браузером, поэтому я считаю, что с CSS мало что можно сделать. В обсуждении могут быть некоторые предлагаемые правила CSS (я видел упоминание "font-smooth" или что-то в этом роде), но ничего в CSS3, насколько мне известно, и определенно ничего в CSS2.

Этот вопрос старый, поэтому просто хотел дать обновление.

На основе caniuse.com для него есть свойство CSS, но оно было удалено из спецификации CSS3. Черновики. Так что это нестандартное решение. Некоторые браузеры Webkit, Firefox и Opera поддерживают его, но это несовместимо. В основном это работает для пользователей настольных компьютеров и Mac OS.

-webkit-font-smoothing: none || antialiased || subpixel-antialiased
-moz-osx-font-smoothing: auto || inherit || unset || grayscale
font-smoothing: auto || inherit || unset || grayscale

Сегодня у меня была аналогичная проблема, и кажется, что хотя font-smooth не работает в современном Firefox *, добавление некоторого фильтра делает:

filter: contrast(1);

Тем не менее, отключение сглаживания с помощью фильтра кажется немного хакерским. Между прочим, это не вызывает полного отключения сглаживания, просто заставляет его применять как-то иначе, чтобы растровые шрифты отображались правильно. С другой стороны, это нарушает рендеринг не растровых шрифтов.

* Протестировано на Fixedsys из http://doir.ir/fixedsys/demo.html, на Iceweasel 38.40.0 в Debian 8.

Я не думаю, что в css есть опция сглаживания. Вместо этого попробуйте cufon: https://github.com/sorccu/cufon/wiki/about

Его довольно легко использовать, и он очень хорошо отображает ваши пиксельные шрифты. Возможно, вас заинтересует Pxfon Шона Инмана: http://shauninman.com/archive/2009/04/17/pxr_cufon_pxfon

Большинство пиксельных шрифтов просто не будут работать должным образом, если вы используете их с кратным размером 8 пунктов (8, 16, 24 и т. Д.).

Если вы работаете с неправильным размером шрифта, вы получите псевдонимы / нечеткие символы.

Проверь это...

http://www.fontsquirrel.com/fonts/list/style/Pixel

... это может помочь;)

Да, это возможно.

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