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

Question

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

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

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

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

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

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

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

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

на этом скриншоте показана страница информации о продукте Adobe.com, используя webfonts, предоставляемые Typekit. Adobe & Typekit являются профессионалами, когда дело доходит до шрифтов.

скриншот показывает Google Chrome справа, Firefox / Internet Explorer слева:

5 141

css css3 google-chrome fonts google-webfonts

5 ответов:

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

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

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

46

Chrome не отображает шрифты, как Firefox или любой другой браузер делает. Это вообще проблема в Chrome работает только на Windows. Если вы хотите сделать шрифты ровными, используйте -webkit-font-smoothing свойство на yer h4 теги, как это.
h4 {
    -webkit-font-smoothing: antialiased;
}
вы также можете использовать subpixel-antialiased, это даст вам другой тип сглаживания (делая текст немного размытым/затененным). Тем не менее, вам понадобится ночная версия, чтобы увидеть эффекты. Вы можете узнать больше о сглаживании шрифтов здесь.

21

Ок, вы можете использовать это просто
-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;
убедитесь, что ваш цвет текста и верхняя текстовая ширина штриха должны быть одинаковыми, и все.

14

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

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

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

но, если вы до 48px до font-size:49px; (и 50px, 60px, 80px, etc...), нечто интересно бывает

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

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

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

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

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

To это:

(шрифт Kreon)

считайте, что когда вы не ставите это свойство,-webkit-backface-visibility: visible; - наследовать

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

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

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

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

С -webkit-backface-visibility: hidden;

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

9

Sliq · Accepted Answer · 2017-05-23 15:02:51

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

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

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

1.) Есть нет правильное решение при загрузке шрифты через @import,<link href= или Google webfont.js. Проблема в том, что Chrome просто запрашивает .вофф файлы из API Google, которые делают ужасно. Удивительно, но все другие типы файлов шрифтов прекрасно отображаются. Тем не менее, есть некоторые трюки 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 (найдено в блоге Джаспера Эспехо):
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 активно работает. ... Мы надеемся, что что-то в веха или два, с которыми разработчики могут начать играть. Как быстро он переходит в стабильный, как всегда, все о том, как быстро мы можем выкорчевать и сжечь любые регрессии.