Chrome не сглаживание текста

Google Chrome не сглаживает мой текст, хотя я добавил код, специфичный для Google Chrome.

на странной ноте Firefox, который, как говорили, несовместим с кодом, который я добавил тут antialias текст соответствующим образом.

вот конкретный стиль CSS:

.jumbotron h1 {
    color: white;
    font-size: 100px;
    text-align: center;
    line-height: 1;
    /*
     * Webkit only supported by Chrome and Safari.
     */
    -webkit-font-smoothing: antialiased;
}

Chrome:

https://dl.dropboxusercontent.com/u/26438996/guru/guru-chrome.png

Firefox:

https://dl.dropboxusercontent.com/u/26438996/guru/guru-firefox.png

Как вы может видеть выше (и наверное на сайте) шрифт намного лучше выглядит в Firefox.

31
css firefox google-chrome html

7 ответов

Примечание. Chrome 37 и более поздние версии исправлены сглаживания шрифтов, поэтому это исправление больше не требуется в последней версии FO Chrome.

Я думаю, что лучшим решением является преобразование шрифта в svg, поскольку chrome отображает шрифты с сглаживанием, если формат файла шрифта svg.

вы можете получить дополнительную информацию здесь, в статье, где я сам нашел ответ:http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

поэтому в основном вы должны конвертировать ваш шрифт в формате svg (используя конвертер шрифтов, например шрифт белочка обеспечивает) и установить медиа-запросы в css, так что формат файла svg указан сначала в объявлении шрифта для chrome, но не для других браузеров.

/* This is the default font face used for all browsers. */
@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;
}

/* This font face inherits and overrides the previous font face, but only for chrome */
@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 с сглаживанием.

38

я написал большой ответ на этот вопрос здесь: есть ли "сглаживание шрифтов" в Google Chrome?. Пост содержит все, что нужно знать и как это исправить. И это официальная ошибка в Google Chrome, разработчики браузера уже знают об этом и работают над исправлением.

короче говоря, вы можете добавить это в текстовое правило, чтобы шрифты выглядели много лучше:

text-stroke-fix:

-webkit-text-stroke: 1px

или

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

текст-тень-трик:

 text-shadow: #fff 0px 1px 1px;

или

 text-shadow: #333 0px 0px 1px; // for black text

font-smoothing-trick (в сочетании с вышеуказанным):

-webkit-font-smoothing: antialiased;

Примечание: это обходные пути, а не реальное решение основной проблемы.

33

это проблема с windows 7/8, а не с Chrome. Chrome всегда плохо отображал. Но они исправили это с помощью build 37. Однако он по-прежнему принимает настройки рендеринга шрифтов windows. Поэтому, если вы похожи на меня и отключите все настройки внешнего вида в windows, вам нужно будет сделать одну настройку, чтобы chrome снова отображался правильно.

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

    • перейти к меню "Пуск".

    • поиск "настроить текст ClearType".

    • включить ClearType и пройти через Мастер, чтобы выбрать Настройки. (очень просто) это настраивает средство визуализации текста для следующего шага. (если вы не настроили ClearType, следующий шаг все равно будет работать, но ClearType выглядит еще лучше.)

    • пуск меню

    • поиск "настройка внешнего вида и производительности windows"

    • откроется экран" параметры производительности".

    • перейдите на первую вкладку "визуальные эффекты"

    • Если вы выбираете "пусть windows выбирает "или" лучший внешний вид", то это нормально. Однако, если вы выберете лучшую производительность, он отключит сглаживание системы в целом. Большинство браузеров (включая Internet Explorer) игнорируют этот параметр. Хром не.

    • чтобы включить его, но оставить все остальные параметры производительности выберите "пользовательский".

    • в нижней части списка установите флажок рядом с "гладкие края экранных шрифтов"

    • нажмите Применить

теперь закройте и снова откройте chrome. У вас будет гораздо более красивый текст.

15

согласно этому блогу:http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

Он будет исправлен в Chrome 37. И он прав. Я попробовал его в Chrome Canary, и он работает.

3

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

.selector{
  text-shadow:
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;
}
1

просто установите вес шрифта в нормальный. Это, похоже, решает проблему в Chrome.

Итак, мой CSS, который работает для меня:

h1.hero-title {
font-family: 'Typefacename', cursive;
font-size:7em;
-webkit-font-smoothing: antialiased;
font-weight:normal;

}

1

Я искал решение этой проблемы точный за несколько часов, и наконец я нашел то, что работает для меня, поэтому я хочу поделиться им с вами.

перейдите в chrome: / / flags / #enable-direct-write Если DirectWrite отключен, включите его; Если DirectWrite включен, просто отключите его;

в моем случае я включил его и он работал просто отлично.

Ура

0