使用 CSS 平滑字体

发布于 2024-09-06 07:00:40 字数 133 浏览 5 评论 0原文

如何获得平滑的字体?我不希望边缘看起来很模糊。

Hacky 解决方案不是问题:)

alt text

How can I get smooth fonts? I don't want the edges to look all fuzzy.

Hacky solutions are not a problem :)

alt text

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

感受沵的脚步 2024-09-13 07:00:40

您可以使用一些字体替换解决方案,例如 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).

影子是时光的心 2024-09-13 07:00:40

正如前面提到的,有一个用于 font-smooth 的 CSS 属性 - 但我不确定它的支持范围有多大。这很可能是您必须在操作系统或字体本身中调整的属性,这当然意味着它只能是本地的。我知道 Windows 有一个名为 ClearType 的功能,它允许您调整抗锯齿功能与您的显示器配合良好。

正如 Ben Alpert 提到的,字体替换解决方案如 CufonTypeKit 是标题文本的其他潜在解决方案。

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.

霊感 2024-09-13 07:00:40

实际上有一个名为 text-rendering 的 CSS 属性,它实际上适用于 Firefox 系列浏览器。正如 Ben 所说,Safari 和 Chrome 系列还有 -webkit-font-smoothing。我不知道文本渲染是否适用于 Internet Explorer,但这段代码工作得很好:

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;

此外,如果您正在自定义浏览器:

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

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:

text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;

Also, if you're customizing your browser:

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文