Блог

У меня проблемы со шрифтами на моем веб-сайте, чтобы иметь шрифты skarp как на Mac, так и на ПК. Шрифты выглядят четкими на Mac, но на ПК шрифты очень тусклые и тонкие.

Есть ли что-то конкретное в CSS, что я могу сделать, чтобы избежать проблемы с ПК?

Скриншот с mac

Скриншот с ПК

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

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

2. Рендеринг шрифтов выполняется ОС, а не браузером, поэтому в конечном отображаемом рендеринге всегда есть различия.

По моему опыту, 98% таких случаев возникают, если кто-то пытается использовать печатный шрифт относительно небольших размеров. Если шрифт слишком тонкий, проблемы возрастают.

Чтобы преодолеть эти проблемы, я рекомендую использовать шрифты, оптимизированные для экрана (они же webfonts), Которые можно бесплатно получить в Google fonts и т. Д. Или Купить. Если это все еще выглядит не очень хорошо, попробуйте увеличить размер, и если это не вариант, возможно, это неправильный шрифт.

Использовать рендеринг шрифтов (https://davidwalsh.name/font-smoothing ):

 body {
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
}