Есть ли в Google Chrome «сглаживание шрифтов»?

141

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

Я h4ужасно выгляжу практически во всех браузерах, но хуже всего - Chrome. В Chrome почти все мои шрифты выглядят ужасно.

Может кто-то указать мне верное направление? Возможно, вы знаете ресурс, который ясно объясняет это? Благодарность!

ПРИМЕР СКРИНШОТ №1

На этом снимке экрана показана домашняя страница https://www.dartlang.org/ , языка программирования, созданного Google (поэтому мы можем предположить, что этот веб-сайт также создан Google) и использует веб-шрифты Google.

На снимке экрана слева показан Google Chrome, справа Firefox / Internet Explorer .:

google chrome слева, firefox / internet explorer справа

ПРИМЕР СКРИНШОТА №2

На этом снимке экрана показана страница с информацией о продукте на Adobe.com с использованием веб-шрифтов, предоставленных Typekit. Adobe и Typekit - профессионалы в области шрифтов.

На снимке экрана справа показан Google Chrome, слева - Firefox / Internet Explorer:

google chrome слева, firefox / internet explorer справа

imakeitpretty
источник
мне они хорошо смотрятся в Chrome и Firefox ... не могли бы вы добавить экран для печати?
JFK
Также на iPhone / iOS они выглядят очень хорошо.
insertusernamehere
Вы используете Windows? В таком случае причиной может быть механизм сглаживания ClearType операционной системы. Я пробовал эту страницу в Mac OS, Ubuntu, Fedora и Chrome OS в дополнение к Windows; последний - единственный, который не отрисовывается должным образом, потому что я подозреваю, что это движок ClearType.
Жюль
да это окна. Вы знаете, что я могу с этим поделать?
imakeitpretty
только что обнаружил эту полезную функцию: chrome: // flags / # lcd-text-aa - включите ее, и она сглаживает текст для вас
cinek

Ответы:

162

Статус проблемы, июнь 2014 г .: исправлено в Chrome 37

Наконец, команда разработчиков Chrome выпустит исправление этой проблемы в Chrome 37, которое будет выпущено для широкой публики в июле 2014 года. См. Пример сравнения текущей стабильной версии Chrome 35 и последней версии Chrome 37 (предварительная версия для ранней разработки) здесь:

введите описание изображения здесь

Статус выпуска, декабрь 2013 г.

1.) Существует NO правильное решение при загрузке шрифтов через @import, <link href=или Google, webfont.js. Проблема в том, что Chrome просто запрашивает файлы .woff из API Google, которые ужасно обрабатываются . Удивительно, но все остальные типы файлов шрифтов прекрасно обрабатываются. Однако есть некоторые приемы CSS, которые немного «сгладят» визуализированный шрифт, вы найдете обходные пути более подробно в этом ответе.

2.) Существует реальное решение для этого при самостоятельном размещении шрифтов, впервые опубликованное Хайме Фернандесом в другом ответе на этой странице Stackoverflow, который устраняет эту проблему путем загрузки веб-шрифтов в особом порядке. Мне было бы неприятно просто скопировать его отличный ответ, поэтому, пожалуйста, посмотрите его. Существует также (непроверенное) решение, которое рекомендует использовать только шрифты TTF / OTF, поскольку теперь они поддерживаются почти всеми браузерами.

3.) Команда разработчиков Google Chrome работает над этой проблемой. Поскольку в движке рендеринга было внесено несколько огромных изменений, очевидно, что что-то происходит.

Я написал большое сообщение в блоге по этой проблеме, не стесняйтесь взглянуть: Как исправить некрасивый рендеринг шрифтов в Google Chrome

Воспроизводимые примеры

Посмотрите, как сегодня выглядит пример из исходного вопроса в Chrome 29:

ПОЛОЖИТЕЛЬНЫЙ ПРИМЕР:

Слева: Firefox 23, справа: Chrome 29

введите описание изображения здесь

ПОЛОЖИТЕЛЬНЫЙ ПРИМЕР:

Вверху: Firefox 23, внизу: Chrome 29

введите описание изображения здесь

ОТРИЦАТЕЛЬНЫЙ ПРИМЕР: Хром 30

введите описание изображения здесь

ОТРИЦАТЕЛЬНЫЙ ПРИМЕР: Chrome 29

введите описание изображения здесь

Решение

Исправление приведенного выше снимка экрана с помощью -webkit-text-stroke:

введите описание изображения здесь

Первая строка по умолчанию, вторая имеет:

-webkit-text-stroke: 0.3px;

В третьем ряду:

-webkit-text-stroke: 0.6px;

Итак, способ исправить эти шрифты - просто дать им

-webkit-text-stroke: 0.Xpx;

или синтаксис RGBa (по nezroy, в комментариях! Спасибо!)

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

Также существует устаревшая возможность : дать тексту простую (фальшивую) тень:

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

Решение RGBa (найдено в блоге Джаспера Эспехо):

text-shadow: 0 0 1px rgba(51,51,51,0.2);

Я написал об этом сообщение в блоге:

Если вы хотите быть в курсе этой проблемы, прочтите соответствующее сообщение в блоге: Как исправить некрасивый рендеринг шрифтов в Google Chrome . Я выложу новости, если будут новости по этому поводу.

Мой первоначальный ответ:

Это большая ошибка в Google Chrome, и команда Google Chrome знает об этом, см. Официальный отчет об ошибке здесь . В настоящее время, в мае 2013 года, даже через 11 месяцев после сообщения об ошибке, она не решена. Странно, что единственный браузер, который портит Google Webfonts, - это собственный браузер Google Chrome (!). Но есть простой обходной путь, который решит проблему, решение см. Ниже.

ЗАЯВЛЕНИЕ КОМАНДЫ РАЗРАБОТЧИКОВ GOOGLE CHROME, МАЙ 2013 г.

Официальное заявление в комментариях к отчету об ошибке:

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

Sliq
источник
1
Проблема не во всех браузерах, работающих под Windows, это только в случае с Chrome. Firefox, Opera и IE имеют правильное сглаживание шрифтов. Хотя это можно исправить в хроме с помощью -webkit-font-smoothingсвойства. Смотрите мой ответ ниже.
Кушагра
1
Для черного текста я использовал text-shadow: #333 0px 0px 1px;. Большое спасибо за совет.
Yoone 08
6
Возможно, он потерялся при переводе, но -webkit-text-stroke работает только тогда, когда вы используете альфа-канал цвета шрифта. Поэтому для черного шрифта я использую что-то вроде «-webkit-text-stroke: 1px rgba (0,0,0,0.1)».
nezroy
Я заметил, что Chrome 30 на Mac теперь демонстрирует такое же отсутствие сглаживания.
jwadsack
1
В официальном тикете на хромированной доске для этой проблемы code.google.com/p/chromium/issues/detail?id=137692, похоже, это исправление для v37, если я правильно отменил последнее сообщение в ветке .
Gruber
46

У меня была такая же проблема, и я нашел решение в этом посте Сэма Годдарда ,

Решение, если дважды определить вызов шрифта . Сначала, как рекомендуется, использовать для всех браузеров, а после конкретного вызова только для Chrome со специальным медиа-запросом:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

введите описание изображения здесь

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

Вы можете найти испанскую версию этой статьи на моей странице

Хайме Фернандес
источник
6
На самом деле это правильный ответ, однако его можно упростить. Простое перечисление версии SVG ПЕРВОЙ в списке шрифтов тоже решает проблему!
jduncanator 03
2
Этот ответ дает - безусловно - лучшие результаты. Шрифт SVG выглядит в 100 раз лучше, чем уловка -webkit-text-stroke. Основным недостатком версии SVG является размер шрифта; обычно он намного больше :-( Google действительно нужно разобрать это как можно скорее
Робкий Дружелюбный
Я абсолютно согласен ! Я свяжусь с этим ответом из своего ответа.
Sliq 08
@jduncanator Не рекомендуется сначала указывать SVG - это означает, что шрифт SVG будет загружен каждым браузером, который его поддерживает, а вам он нужен только для Chrome в Windows.
RoelN 02
@jduncanator Двумя основными виновниками являются отсутствие поддержки хинтов и большой размер файла (сжатие gzip для шрифтов по умолчанию не включено на многих серверах).
RoelN 05
22

Chrome не отображает шрифты, как Firefox или любой другой браузер. Обычно это проблема Chrome, работающего только в Windows. Если вы хотите сделать шрифты гладкими, используйте -webkit-font-smoothingсвойство в ваших h4тегах, как это.

h4 {
    -webkit-font-smoothing: antialiased;
}

Вы также можете использовать subpixel-antialiased, это даст вам другой тип сглаживания (делая текст немного размытым / затемненным). Однако вам понадобится ночная версия, чтобы увидеть эффекты. Вы можете узнать больше о сглаживании шрифтов здесь .

Кушагра
источник
11
У меня последняя версия Chrome сегодня, 8 февраля 2013 г., и на этой странице нет разницы между ними maxvoltar.com/sandbox/fontsmoothing
thednp
4
Это не работает (проверено на Windows). Поскольку Mac все равно это делают, я сделал отметку, чтобы отговорить людей от его использования.
KryptoniteDove
4
Это не работает. Я только что попробовал это в Windows 8. С любой последней версией Chrome (по состоянию на 10.08.2013).
jay_t55
3
В Mac Chrome и Safari это ДЕЙСТВИТЕЛЬНО работает, поэтому стоит добавить. Apple.com даже использует его в своей таблице стилей base.css:body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }
Джастин,
1
эквивалент в Firefox -moz-osx-font-smoothing: grayscale;
Джефф Уолтерс
14

Хорошо, вы можете использовать это просто

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Убедитесь, что цвет вашего текста и ширина верхнего текста должны быть такими же, и все.

Ришаб Гупта
источник
сглаживание шрифтов больше ничего не делает, но обводка текста работает и может помочь с некоторыми шрифтами. Похоже, я получил лучшие результаты с обводкой 0,5 пикселей и rgba (0,0,0,0,5).
Moss
эквивалент в Firefox -moz-osx-font-smoothing: grayscale;
Джефф Уолтерс
это хорошо ... просто замените # 34343b на наследование ..;)
Sagive SEO 03
9

Я скажу перед всем, что это не всегда будет работать , я тестировал это со sans-serifшрифтом и внешними шрифтами, такими какopen sans

Иногда, когда вы используете большие шрифты, пытайтесь приблизиться к font-size:49pxи верхнему

размер шрифта: 48 пикселей

Это текст заголовка размером 48 пикселей ( font-size:48px;в элементе, содержащем текст).

Но если вы увеличите 48 пикселей до font-size:49px;(и 50 пикселей, 60 пикселей, 80 пикселей и т. Д.), Произойдет что-то интересное.

размер шрифта: 49 пикселей

Текст автоматически сглаживается и кажется действительно хорошим

С другой стороны ...

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

К родительскому элементу текста просто примените следующее свойство css: -webkit-backface-visibility: hidden;

Вы можете преобразовать примерно так:

-webkit-backface-visibility: видимый;

К этому:

-webkit-backface-visibility: скрыто;

(шрифт есть Kreon)

Учтите, что когда вы не помещаете это свойство, -webkit-backface-visibility: visible;наследуется

Но будьте осторожны , такая практика не всегда дает хорошие результаты, если вы внимательно посмотрите, Chrome просто заставляет текст выглядеть немного размытым.

Еще один интересный факт:

-webkit-backface-visibility: hidden;также будет работать при преобразовании текста в Chrome (со -webkit-transformсвойством, которое включает в себя вращения, перекосы и т. д.)

Без

Без -webkit-backface-visibility: hidden;

С участием

С участием -webkit-backface-visibility: hidden;

Что ж, я не знаю, почему эта практика работает, но для меня она работает. Извините за мой странный английский.

Явьер
источник