Гладкие шрифты с помощью CSS

Как я могу получить гладкие шрифты? Я не хочу, чтобы края выглядели размытыми.

Хакерские решения — не проблема :)

альтернативный текст


javascript fonts css antialiasing
person Ben Shelock    schedule 20.06.2010    source источник
comment
Если я не ошибаюсь, я думаю, что в CSS3 есть свойство font-smooth:always;. Я еще не попробовал его на себе, поэтому я не могу судить о его эффективности.   -  person Russell Dias    schedule 20.06.2010
comment
Посмотрите здесь (та же тема): stackoverflow.com/questions/11487427/font-smoothing /11493510   -  person Sliq    schedule 17.05.2013

Ответы (3)


arrow_upward
3
arrow_downward

Вы можете использовать какое-нибудь решение для замены шрифта, например Cufón для заголовков, но оно слишком неэффективно для больших блоков. текста.

Если вы хотите изменить рендеринг шрифта в браузере, вам, вероятно, не повезет, потому что все они имеют свои собственные процедуры рендеринга текста (но посмотрите на -webkit-font-smoothing для последних версий Safari и Chrome).

person Sophie Alpert    schedule 20.06.2010
comment
Ну, это, вероятно, понадобится только для вещей с большим размером шрифта, поэтому большие блоки текста не будут проблемой. Почему Cufon настолько эффективен? - person Ben Shelock; 20.06.2010
comment
Это не особенно неэффективно, просто использование собственных процедур рендеринга текста браузера всегда будет быстрее, чем использование пользовательской библиотеки JavaScript, которая использует Canvas или SVG для отображения текста. - person Sophie Alpert; 20.06.2010

arrow_upward
2
arrow_downward

Как уже упоминалось, для font-smooth есть свойство CSS, но я не уверен, насколько широко это поддерживается. Скорее всего, это свойство, которое вам придется настроить в вашей ОС, или сам шрифт, что, конечно, означает, что он будет только локальным. Я знаю, что в Windows есть функция под названием ClearType, которая позволяет настроить сглаживание, чтобы хорошо работать с вашим монитором.

Как упомянул Бен Алперт, решение для замены шрифта, такое как Cufon или TypeKit — другие потенциальные решения для текста заголовков.

person Jeff Fohl    schedule 20.06.2010

arrow_upward
1
arrow_downward

На самом деле существует свойство CSS, называемое text-rendering, которое работает в браузерах семейства Firefox. Как сказал Бен, для семейства Safari и Chrome также есть -webkit-font-smoothing. Я не знаю, работает ли рендеринг текста в Internet Explorer, но этот фрагмент кода работает вполне нормально:

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;

Кроме того, если вы настраиваете свой браузер:

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}
person Juan    schedule 12.10.2015