Внедрения индивидуальных шрифтов
Когда я разработал свой веб-сайт в Adobe Flash Pro CS6, шрифт выглядит так:
Шрифт выглядит гладким и немного толще, и когда я создаю HTML и CSS для рендеринга шрифта в браузере, он выглядит как в IE, Firefox и Chrome.
Он выглядит тоньше и пикселирован в некоторых областях. Я видел гораздо более плавный рендеринг шрифтов на OS X. Как заставить шрифт выглядеть более гладко в этих браузерах? Я предполагаю, что это проблема с ClearType, которая выглядит отвратительной с такими тонкими шрифтами, как этот.
Вот код, который я использую для тестирования, поэтому ответы могут быть протестированы перед отправкой:
Question or concern?
8 ответов
Вы никогда не захотите, чтобы сайты выглядели одинаково в разных браузерах или операционных системах, они используют разные технологии и т.д. и т.д.
Это то, что вы не должны заботиться о . Люди, которые используют IE, не собираются переключаться на Firefox или Chrome или наоборот. Они привыкли к тому, как выглядят шрифты и не заметят.
Несоответствия браузеров - вещь, с которой разработчикам приходится работать (к сожалению). Это здорово, если все они выглядят одинаково, но что не произойдет.
Что вы можете попробовать, вам, вероятно, понадобятся разные исправления для разных браузеров.:
Text-shadow: 1px 1px 1px rgba(0,0,0,0.004); text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;
Изменить 1: DirectWrite теперь находится на хром для окон, которые будут улучшать рендеринг.
Изменить 2 (2017): Шрифты системного интерфейса
Еще одна вещь, которую вы можете попробовать - использовать системные шрифты для улучшения UX.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
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);
Это, конечно, не решает проблему, которая не позволяет получить доступ к светлым шрифтам шрифта, как указано.
Там нет единого исправления, насколько мне известно. Это множество исправлений, реализованных в соответствии с каждым браузером, кроме IE. Сделайте снимок:
Для Chrome и любого другого браузера с помощью webkit:
Webkit-font-smoothing:antialiased !important;
Поместите это в свой HTML-код или для любых элементов, которые вам подходят. Вы также можете добавить это вместе с выше:
Text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);
Экспериментируйте с различными значениями альфа, но вы должны сохранять размеры тени, как они есть.
Я не знаю ничего, что вы можете сделать, но это должно решить самую большую проблему с Chrome по крайней мере (плюс другие браузеры веб-китов).
Я думаю, что это больше проблема Windows, чем проблема с браузером. Те же самые браузеры делают эти же шрифты более плавно на других операционных системах, таких как Linux или Mac.
В Chrome, а также в любом браузере webkit вы можете использовать следующий код для сглаживания шрифтов:
Webkit-font-smoothing: antialiased;
Webkit-font-smoothing: antialiased !important;
Обычно я нахожу, что это не делает много. Я думаю, нам просто нужно подождать, пока Microsoft что-то предпримет.
4 Answers
Вы никогда не захотите, чтобы сайты выглядели одинаково в разных браузерах или операционных системах, они используют разные технологии и т. Д.
Это то, о чем вы не должны беспокоиться . Люди, которые используют IE, не собираются переключаться на Firefox или Chrome или наоборот. Они привыкли к тому, как выглядят шрифты и не заметят.
Несоответствия браузеров - это то, с чем разработчики интерфейсов должны жить (к сожалению). Это здорово, если все выглядят одинаково, но это не произойдет
Что вы можете попробовать, вам, вероятно, понадобятся разные исправления для разных браузеров.:
Text-shadow: 1px 1px 1px rgba(0,0,0,0.004); text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;
Изменить 1: DirectWrite теперь находится на хроме для окон, что улучшит рендеринг.
Изменить 2 (2017): шрифты пользовательского интерфейса системы
Еще одна вещь, которую вы можете попробовать - использовать системные шрифты для улучшения UX.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
Когда я разработал свой веб-сайт в Adobe Flash Pro CS6, шрифт выглядит так:
Шрифт выглядит гладким и немного толще, и когда я создаю HTML и CSS для визуализации шрифта в браузере, он выглядит как в IE, Firefox и Chrome.
Он кажется более тонким и неровным в некоторых областях. Я видел гораздо более плавный рендеринг шрифтов на OS X. Как заставить шрифт выглядеть более гладко в этих браузерах? Я предполагаю, что это проблема с ClearType, которая выглядит отвратительной с тонкими шрифтами, подобными этой.
Вот код, который я использую для тестирования, поэтому ответы могут быть протестированы перед отправкой:
Question or concern?
2018-11-27T00:00Z
Насколько мне известно, для этого нет единственного решения. Это множество исправлений, реализованных в соответствии с каждым браузером, кроме IE. Сделайте это:
Для Chrome и любого другого браузера с помощью webkit:
Webkit-font-smoothing:antialiased !important;
Поместите это в свой HTML-код или для любых элементов, которые вам подходят. Вы также можете добавить это вместе с вышесказанным:
Text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);
Экспериментируйте с разными значениями альфа, но вы должны сохранять размеры тени такими, какие они есть.
Я не знаю ничего, что вы можете сделать, но это должно решить самую большую проблему с Chrome по крайней мере (плюс другие браузеры веб-китов).
Вы никогда не захотите, чтобы сайты выглядели одинаково в разных браузерах или операционных системах, они используют разные технологии и т. Д.
Это то, о чем вы не должны беспокоиться . Люди, которые используют IE, не собираются переключаться на Firefox или Chrome или наоборот. Они привыкли к тому, как выглядят шрифты и не заметят.
Несоответствия браузеров - это то, с чем разработчики интерфейсов должны жить (к сожалению). Это здорово, если все выглядят одинаково, но это не произойдет
Что вы можете попробовать, вам, вероятно, понадобятся разные исправления для разных браузеров.:
Text-shadow: 1px 1px 1px rgba(0,0,0,0.004); text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;
Изменить 1: DirectWrite теперь находится на хроме для окон, что улучшит рендеринг.
Изменить 2 (2017): шрифты пользовательского интерфейса системы
Еще одна вещь, которую вы можете попробовать - использовать системные шрифты для улучшения UX.
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
2018-12-04T00:00Z
Возможно, вы сможете исправить это, используя текстовое рендеринг свойств css.
Text-rendering: auto text-rendering: optimizeSpeed text-rendering: optimizeLegibility text-rendering: geometricPrecision text-rendering: inherit
Вероятно, вы захотите использовать текстовое рендеринг: optimizeLegibilty.
2018-12-11T00:00Z
Я использую это на всех сайтах, и он охватывает большинство проблем с рендерингом шрифтов.
Text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important;
2018-12-18T00:00Z
Насколько мне известно, для этого нет единственного решения. Это множество исправлений, реализованных в соответствии с каждым браузером, кроме IE. Сделайте это:
Для Chrome и любого другого браузера с помощью webkit:
Webkit-font-smoothing:antialiased !important;
Поместите это в свой HTML-код или для любых элементов, которые вам подходят. Вы также можете добавить это вместе с вышесказанным:
Text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);
Экспериментируйте с разными значениями альфа, но вы должны сохранять размеры тени такими, какие они есть.
Я не знаю ничего, что вы можете сделать, но это должно решить самую большую проблему с Chrome по крайней мере (плюс другие браузеры веб-китов).
Когда я разработал свой веб-сайт в Adobe Flash Pro CS6, шрифт выглядит так:
Шрифт выглядит гладким и немного толще, и когда я создаю HTML и CSS для визуализации шрифта в браузере, он выглядит как в IE, Firefox и Chrome.
Он кажется более тонким и неровным в некоторых областях. Я видел гораздо более плавный рендеринг шрифтов на OS X. Как заставить шрифт выглядеть более гладко в этих браузерах? Я предполагаю, что это проблема с ClearType, которая выглядит отвратительной с тонкими шрифтами, подобными этой.
Вот код, который я использую для тестирования, поэтому ответы могут быть протестированы перед отправкой:
Question or concern?
2018-03-31 18:34
2018-04-10 14:21
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);
Это, конечно, не решает проблему, которая не позволяет получить доступ к светлым шрифтам шрифта, как указано.
2017-09-18 19:50
Насколько мне известно, для этого нет единственного решения. Это множество исправлений, реализованных в соответствии с каждым браузером, кроме IE. Сделайте это:
Для Chrome и любого другого браузера с помощью webkit:
Webkit-font-smoothing:antialiased !important;
Поместите это в свой HTML-код или для любых элементов, которые вам подходят. Вы также можете добавить это вместе с вышесказанным:
Text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);
Экспериментируйте с разными значениями альфа, но вы должны сохранять размеры тени такими, какие они есть.
Я не знаю ничего, что вы можете сделать, но это должно решить самую большую проблему с Chrome по крайней мере (плюс другие браузеры веб-китов).
2018-03-31 19:21
Я обнаружил, что в Google Chrome вы можете добавить -webkit-text-stoke для улучшения внешнего вида шрифтов.
например:
Webkit-text-stroke: .025em rgba(51,51,51,0.50);
2018-04-08 00:32
Я использую это на всех сайтах, и он охватывает большинство проблем с рендерингом шрифтов.
