Есть ли "сглаживание шрифтов" в Google Chrome?
Я использую веб-шрифты 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 слева:
5 ответов
Состояние проблемы, июнь 2014 года: исправлено с помощью Chrome 37
Наконец, команда Chrome выпустит исправление для этой проблемы с Chrome 37, которое будет выпущено для публики в июле 2014 года. См. Пример сравнения текущей стабильной версии Chrome 35 и последней версии Chrome 37 (предварительный предварительный просмотр) здесь:
Состояние выпуска, декабрь 2013 г.
1.) НЕТ правильного решения при загрузке шрифтов через @import, <link href= или Google webfont.js, Проблема в том, что Chrome просто запрашивает файлы .woff из API Google, которые ужасно рендерится. Удивительно, но все другие типы файлов шрифтов отображаются красиво. Тем не менее, есть некоторые хитрости CSS, которые немного "сгладят" отображаемый шрифт, в этом ответе вы найдете обходные пути.
2.) Существует реальное решение для этого при самостоятельном размещении шрифтов, впервые опубликованное Хайме Фернандесом в другом ответе на этой странице Stackru, которая устраняет эту проблему, загружая веб-шрифты в специальном порядке. Мне было бы плохо просто скопировать его превосходный ответ, поэтому, пожалуйста, посмотрите там. Существует также (недоказанное) решение, которое рекомендует использовать только шрифты 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 (by 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 и верхний
Это заголовок текста размером 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;
Ну, я не знаю, почему эта практика работает, но она работает для меня. Извините за мой странный английский.