Подтвердить что ты не робот

Как сделать тонкие шрифты более плавно в CSS 3 на Windows?

Когда я разработал свой веб-сайт в Adobe Flash Pro CS6, шрифт выглядит так:

Font rendered in Adobe Flash Pro CS6

Шрифт выглядит гладким и немного толще, и когда я создаю HTML и CSS для рендеринга шрифта в браузере, он выглядит как в IE, Firefox и Chrome.

Font rendered in IE, Firefox, and Chrome browsers

Он выглядит тоньше и пикселирован в некоторых областях. Я видел гораздо более плавный рендеринг шрифтов на OS X. Как заставить шрифт выглядеть более гладко в этих браузерах? Я предполагаю, что это проблема с ClearType, которая выглядит отвратительной с такими тонкими шрифтами, как этот.

Вот код, который я использую для тестирования, поэтому ответы могут быть протестированы перед отправкой:

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span>
    </body>
</html>
4b9b3361

ОТВЕТЫ

Ответ 1

Вам никогда не удастся заставить сайты выглядеть одинаково в разных браузерах или операционных системах, они используют разные технологии и т.д. И т.д.

Это то, что вы не должны заботиться. Люди, которые используют IE, не собираются переходить на Firefox, Chrome или наоборот. Они привыкли к тому, как выглядят шрифты и не собираются их замечать.

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

Вещи, которые вы можете попробовать, вам, вероятно, понадобятся разные исправления для разных браузеров.

text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;

Edit 1: DirectWrite теперь на хроме для окна, которые позволят улучшить визуализацию.

Изменить 2 (2017): системные шрифты пользовательского интерфейса

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

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Чтение - smashingmagazine
Чтение - booking.com
Чтение - средний

Ответ 2

text-rendering: optimizeLegibility применяет кернинг к шрифту, который может улучшить читаемость, но только если разрешение экрана и размер шрифта достаточно высоки. Это не делает шрифт более смелым, если он был слишком тонким раньше.

Проблема здесь может быть семейством шрифтов с одним или несколькими лицами, которые легче, чем обычно (font-weight: 400) - например, Googles Lato.

Если вы загружаете весь свет на обычные лица Lato, как этот

@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);

Я сделал замечание, что большинство браузеров Windows и Chrome OSX используют font-weight: 100, если вы укажете что-нибудь более легкое, чем 400 - (или нормальное, регулярное). Изменение размера шрифта: до 200 или 300 не отличается от других, хотя инструменты инспектора настаивают на том, что машина отображается, например. начертание шрифта: 200. Что это не так.

Удаление весов (100 в моем случае) решает проблему и позволяет мне хотя бы использовать font-weight: 200, соответственно. Рендеринг не совсем идентичен между браузерами, но по крайней мере аналогичен.

@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);

Это, конечно, не решает проблему, которая не позволяет получить доступ к светлым шрифтам шрифта, как указано.

Ответ 3

Там нет единого исправления, насколько мне известно. Это множество исправлений, реализованных в соответствии с каждым браузером, кроме IE. Сделайте снимок:

Для Chrome и любого другого браузера с помощью webkit:

-webkit-font-smoothing:antialiased !important;

Поместите это в свой HTML-код или для любых элементов, которые вам подходят. Вы также можете добавить это вместе с выше:

text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);

Экспериментируйте с различными значениями альфа, но вы должны сохранять размеры тени, как они есть.

Я не знаю ничего, что вы можете сделать, но это должно решить самую большую проблему с Chrome по крайней мере (плюс другие браузеры веб-китов).

Ответ 4

Я обнаружил, что в Google Chrome вы можете добавить -webkit-text-stoke, чтобы улучшить внешний вид шрифтов.

например:

-webkit-text-stroke: .025em rgba(51,51,51,0.50);

Ответ 5

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

В Chrome, а также в любом браузере webkit вы можете использовать следующий код для сглаживания шрифтов:

-webkit-font-smoothing: antialiased;

или

-webkit-font-smoothing: antialiased !important;

Обычно я нахожу, что это не делает много. Я думаю, нам просто нужно подождать, пока Microsoft что-то предпримет.

Ответ 6

Я использую это на всех сайтах, и он охватывает большинство проблем с рендерингом шрифтов.

text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;

Ответ 7

Недавно я столкнулся с подобной проблемой, так же, как и семейство шрифтов и размер по-разному выглядели в Chrome, Safari и Firefox. Хром и firefox выглядят особенно толще. Это может быть не лучший способ, но работал у меня

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

Кроме того, стоит потратить некоторое время на проверку различных механизмов рендеринга. CSS Что такое -moz- и -webkit-?

Ответ 8

Возможно, вы сможете исправить это, используя текстовый рендеринг свойства css.

Пример:

text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit

Возможно, вы захотите использовать текстовый рендеринг: optimizeLegibilty.

Дополнительная информация здесь: MDN Text-Rendering

Ответ 9

Я собираюсь префикс этого с его взломать, и мне это не нравится, но это работает

transform: rotate(-0.0002deg)

Это делает шрифты заметно гладкими, хотя и немного тоньше