Ответ 1

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

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

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

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

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

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

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

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

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

ПОЗИТИВНЫЙ ПРИМЕР:

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

ПОЗИТИВНЫЙ ПРИМЕР:

Топ: Firefox 23, внизу: Chrome 29

НЕГАТИВНЫЙ ПРИМЕР: Chrome 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 (найдено в блоге Jasper Espejo):

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

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

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

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

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

ЗАЯВЛЕНИЕ КОМАНДЫ РАЗВИТИЯ GOOGLE CHROME, MAY 2013

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

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

Ответ 2

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

Решение, если , определило вызов шрифта дважды. Сначала, как рекомендуется, для всех браузеров, и после определенного вызова только для 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');
  }
}

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

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

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

Для другой стороны...

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

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

Вы можете преобразовать что-то вроде этого:

Для этого:

(шрифт Kreon)

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

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

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

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

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

С -webkit-backface-visibility: hidden;

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