'Lato'字体渲染奇怪的safari，不是在chrome或firefox [英] 'Lato' font rendering odd in safari, not in chrome, or firefox

问题描述

我使用来自google web字体的'Lato'字体，它在所有浏览器除了safari之外显示精细。

在 font-weight：100中使用它;

这里有不同浏览器的屏幕截图。任何想法可能导致它呈现极薄？或者如果是某种方式，我可以设置它在 font-weight：300; 中渲染仅用于safari？

Ive也做了一个问题的问题 -

但是，我认为你应该考虑使用更重的字体。你在Windows上测试过吗？它可能看起来很，很轻。当启用子像素抗锯齿时，OSX渲染文本非常重要，而当文本抵达深色或彩色背景时，OSX渲染特别严重。您在Safari屏幕截图中看到的内容与没有在OSX上显示的内容类似。

Im using the 'Lato' font from google web fonts, and its displaying fine on all browsers apart from safari.

Im using it in font-weight:100;

here are some screen shots of the different browsers. Any idea what might be causing it to render extremely thin ? Or if theres a way i can set it to render in font-weight:300; for safari only ?

Ive also made a js fiddle of the problem - http://jsfiddle.net/qLHuc/1/

FIREFOX

CHROME

SAFARI

解决方案

I'm not sure why, but Safari is disabling subpixel antialising at small font sizes on that page. You can fix it by applying -webkit-font-smoothing: subpixel-antialiased. See here: http://jsfiddle.net/qLHuc/3/

However, I think you should consider using a heavier font. Have you tested this on Windows? It will likely look very, very light. OSX renders text very heavily when subpixel antialiasing is enabled, and especially heavily when text is against a dark or colored background. What you see in your Safari screenshot is similar to what people who aren't on OSX will see.

这篇关于'Lato'字体渲染奇怪的safari，不是在chrome或firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！