Chrome не сглаживает текст

Ответ 1

ПРИМЕЧАНИЕ. Сглаживание Chrome 37 и более поздних версий сглаживается, поэтому это исправление больше не требуется в последней версии для Chrome.

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

Вы можете получить больше информации здесь, в статье, где я сам нашел ответ: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Таким образом, в основном вы должны преобразовать свой шрифт в формат svg (используя такой конвертер шрифтов, как font squirrel) и установить медиа-запросы в вашем CSS, чтобы формат файла svg сначала указывается в объявлении шрифта для хром, но не для других браузеров.

/* This is the default font face used for all browsers. */
@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;
}

/* This font face inherits and overrides the previous font face, but only for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}

И вуаля. Шрифт работает в Chrome с сглаживанием.

Ответ 2

Я написал большой ответ на этот вопрос здесь: Есть ли какие-либо "сглаживания шрифтов" в Google Chrome?. Сообщение содержит все, что вам нужно знать и как это исправить. И это официальная ошибка в Google Chrome, разработчики браузера уже знают об этом и работают над исправлением.

Короче говоря, вы можете добавить это в свое текстовое правило, чтобы шрифты выглядели намного лучше:

текст-тактный-фикс:

-webkit-text-stroke: 1px

или

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

текст-тень-трик:

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

или

 text-shadow: #333 0px 0px 1px; // for black text

font-smoothing-trick (в сочетании с выше):

-webkit-font-smoothing: antialiased;

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

Ответ 3

Это проблема с окнами 7/8, а не с Chrome. Chrome всегда делал плохо. Но они исправили это с помощью сборки 37. Однако он по-прежнему принимает предпочтения по отображению шрифтов Windows. Поэтому, если вы похожи на меня и отключите все причудливые настройки внешнего вида в окнах, вам нужно будет сделать одну настройку, чтобы получить хром для правильной визуализации.

Чтобы устранить эту проблему, вам необходимо настроить шрифты Clear type в окнах и включить сглаживание шрифтов в параметрах производительности.

• • перейдите в меню "Пуск".

  • найдите "Отрегулировать текст ClearType".

  • включите ClearType и пройдите через мастер, чтобы выбрать свои настройки. (очень просто), это создает текстовый рендеринг для следующего шага. (если вы не настроили ClearType, следующий шаг все равно будет работать, но ClearType выглядит еще лучше.)

• • перейти в меню "Пуск"

  • выполните поиск "Отрегулируйте внешний вид и производительность окон"

  • открывается экран "Параметры производительности".

  • перейти к первой вкладке "Визуальные эффекты"

  • если вы выберете "Позволить окнам выбрать" или "лучший внешний вид", тогда это будет хорошо. Однако, если вы выбираете лучшую производительность, она отключает систему сглаживания. Большинство браузеров (включая Internet Explorer) игнорируют этот параметр. У Chrome нет.

  • чтобы включить его, но оставьте все другие параметры производительности "custom".

  • возле нижней части списка установите флажок рядом с "Гладкие края экранных шрифтов"

  • hit apply

Теперь закройте и снова закройте хром. У вас будет намного лучше выглядящий текст.

Ответ 4

В этом блоге: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

Он будет исправлен в Chrome 37. И он прав. Я пробовал его в Chrome Canary, и он работает.

Ответ 5

Chrome не поддерживает anti aliased, если это не svg, вы должны использовать тень текста вместо.

.selector{
  text-shadow:
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}

Ответ 6

Просто установите для параметра Font weight значение Normal. Это, похоже, решает проблему в Chrome.

поэтому мой CSS, который работает для меня, это:

h1.hero-title {
font-family: 'Typefacename', cursive;
font-size:7em;
-webkit-font-smoothing: antialiased;
font-weight:normal;

}

Ответ 7

Я искал решение этой проблемы в течение нескольких часов, и, наконец, я нашел что-то, что работает для меня, поэтому я хочу поделиться им с вами.

Перейти к chrome://flags/# enable-direct-write Если DirectWrite отключен, включите его; Если DirectWrite включен, просто отключите его,

В моем случае я включил его, и он работал нормально.

Приветствия