it-swarm.com.ru

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

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

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

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

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

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

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

google chrome on the left, firefox/internet Explorer on the right

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

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

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

google chrome on the left, firefox/internet Explorer on the right

141
imakeitpretty

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

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

enter image description here

Состояние выпуска, декабрь 2013 г.

1.) Существует НЕТ правильного решения при загрузке шрифтов с помощью @import, <link href= или Google webfont.js. Проблема в том, что Chrome просто запрашивает . Woff файлы из API Google, которые отображаются ужасно. Удивительно, но все другие типы файлов шрифтов отображаются красиво. Тем не менее, есть некоторые приемы CSS, которые немного "сгладят" отображаемый шрифт, и вы найдете обходные пути в этом ответе глубже.

2.) Существует IS реальное решение для этого при самостоятельном размещении шрифтов, впервые опубликованное Хайме Фернандес в другом ответе на этой странице Stackoverflow, который устраняет эту проблему, загружая веб-шрифты в специальном порядке. Мне было бы плохо просто скопировать его превосходный ответ, поэтому, пожалуйста, посмотрите там. Существует также (недоказанное) решение, которое рекомендует использовать только шрифты TTF/OTF, поскольку они теперь поддерживаются практически всеми браузерами.

3.) Над этим работает команда разработчиков Google Chrome. Поскольку в механизме рендеринга произошли некоторые огромные изменения, очевидно, что-то происходит.

Я написал большое сообщение в блоге по этой проблеме, не стесняйтесь посмотреть: Как исправить уродливый рендеринг шрифтов в Google Chrome

Воспроизводимые примеры

Посмотрите, как выглядит пример из первоначального вопроса сегодня в Chrome 29:

ПОЗИТИВНЫЙ ПРИМЕР:

Слева: Firefox 23, справа: Chrome 29

enter image description here

ПОЗИТИВНЫЙ ПРИМЕР:

Сверху: Firefox 23, снизу: Chrome 29

enter image description here

ОТРИЦАТЕЛЬНЫЙ ПРИМЕР: Chrome 30

enter image description here

ОТРИЦАТЕЛЬНЫЙ ПРИМЕР: Chrome 29

enter image description here

Решение

Исправление приведенного выше снимка экрана с -webkit-text-stroke:

enter image description here

Первая строка по умолчанию, вторая имеет:

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

161
Sliq

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

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

enter image description here

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

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

46
Jaime Fernandez

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

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

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

22
Kushagra

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

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

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

14
Rishabh Gupta

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

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

font-size:48px

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

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

font-size:49px

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

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

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

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

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

-webkit-backface-visibility: visible;

К этому:

-webkit-backface-visibility: hidden;

(шрифт Kreon)

Учтите, что когда вы не помещаете это свойство, -webkit-backface-visibility: visible; наследуется

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

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

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

Without

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

With

С -webkit-backface-visibility: hidden;

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

9
Yavierre