Есть ли "сглаживание шрифтов" в 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 ответов
статус вопроса, июнь 2014: исправлено с Chrome 37
наконец, команда Chrome выпустит исправление для этой проблемы с Chrome 37, который будет выпущен для общественности в июле 2014 года. См. пример сравнения текущего стабильного Chrome 35 и последнего Chrome 37 (предварительный просмотр ранней разработки) здесь:
статус выпуска, декабрь 2013
1.) Есть нет правильное решение при загрузке шрифты via @import, <link href= или Google webfont.js. Проблема в том, что Chrome просто запрашивает .woff файлы из API Google, которые отображаются ужасно. Удивительно, но все остальные типы файлов шрифтов отображаются красиво. Однако есть некоторые CSS-трюки, которые немного" сгладят " отображаемый шрифт, вы найдете обходной путь(ы) глубже в этом ответе.
2.) Существует реальное решение для этого при самостоятельном размещении шрифтов, впервые опубликованных Хайме Фернандес!--13--> в другом ответе на этой странице 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. ... Мы надеемся, что что-то в milestone или два, с которыми разработчики могут начать играть. Как быстро он становится стабильным, это, как всегда, все о том, как быстро мы можем искоренить и сжечь любые регрессии.
У меня была такая же проблема, и я нашел решение в этот пост Сэма Годдарда,
решение, если к определил вызов шрифта дважды. Сначала, как рекомендуется, использовать для всех браузеров, а после определенного вызова только для 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');
}
}
С помощью этого метода шрифт будет хорошо отображаться во всех браузерах. Единственный отрицательный момент, который я нашел, - это файл шрифта также загружается дважды.
вы можете найти испанская версия этой статьи на моей странице
хром не отображает шрифты, такие как Firefox или любой другой браузер. Это вообще проблема в Chrome работает только на Windows. Если вы хотите сделать шрифты ровными, используйте -webkit-font-smoothing свойство на yer h4 теги, как это.
h4 {
-webkit-font-smoothing: antialiased;
}
вы также можете использовать subpixel-antialiased, это даст вам другой тип сглаживания (делая текст немного размытым/затененным). Тем не менее, вам понадобится ночная версия, чтобы увидеть эффекты. Подробнее о сглаживании шрифтов здесь.
Ok вы можете использовать это просто
-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, etc...), нечто интересное случается
текст автоматически становится гладким и кажется действительно хорошим
для другой стороны...
если вы ищете мелкий шрифт, вы можете попробовать это, но не очень эффективно.
к родительскому тексту просто примените следующее свойство 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;
Ну, я не знаю, почему эта практика работает, но для меня она работает. Извините за мой странный английский.