使用 CSS 平滑字体
如何获得平滑的字体?我不希望边缘看起来很模糊。
Hacky 解决方案不是问题:)
How can I get smooth fonts? I don't want the edges to look all fuzzy.
Hacky solutions are not a problem :)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以使用一些字体替换解决方案,例如 Cufón 作为标题,但对于大块来说效率太低的文本。
如果您想更改浏览器的字体渲染,您可能不会有太多运气,因为它们都有自己的文本渲染例程(但请查看
-webkit-font-smoothing
了解最新版本的Safari 和 Chrome)。You could use some font replacement solution like Cufón for headers, but it's too inefficient to use for large blocks of text.
If you're looking to change the browser's font rendering, you probably won't have much luck because they all have their own text rendering routines (but look at
-webkit-font-smoothing
for recent versions of Safari and Chrome).正如前面提到的,有一个用于
font-smooth
的 CSS 属性 - 但我不确定它的支持范围有多大。这很可能是您必须在操作系统或字体本身中调整的属性,这当然意味着它只能是本地的。我知道 Windows 有一个名为 ClearType 的功能,它允许您调整抗锯齿功能与您的显示器配合良好。正如 Ben Alpert 提到的,字体替换解决方案如 Cufon 或 TypeKit 是标题文本的其他潜在解决方案。
As was mentioned, there is a CSS property for
font-smooth
- but I am not sure how widely this is supported. This is most likely a property that you will have to adjust in your OS, or the font itself, which means of course, that would only be local. I know that Windows has a feature called ClearType which allows you to adjust the anti-aliasing to work well with your monitor.As Ben Alpert mentioned, a font-replacement solution such as Cufon or TypeKit are other potential solutions for title text.
实际上有一个名为 text-rendering 的 CSS 属性,它实际上适用于 Firefox 系列浏览器。正如 Ben 所说,Safari 和 Chrome 系列还有 -webkit-font-smoothing。我不知道文本渲染是否适用于 Internet Explorer,但这段代码工作得很好:
此外,如果您正在自定义浏览器:
There's actually a CSS property called text-rendering which actually works on the Firefox family of browsers. There's also -webkit-font-smoothing for Safari and Chrome family, as Ben said. I don't know if text-rendering works on Internet Explorer, but this piece of code works pretty fine:
Also, if you're customizing your browser: