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

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

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

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

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

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

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

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

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

Статус проблемы, июнь 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 активно работают. ... Мы надеемся получить что-то в пределах одной-двух вех, с которыми разработчики смогут начать играть. Скорость перехода к стабильной версии, как всегда, зависит от того, насколько быстро мы сможем искоренить и сжечь любые регрессии.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

К родительскому элементу текста просто примените следующее свойство 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;

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