当前位置：文江博客话题详情

当使用 @font-face 和像素字体时，是否可以禁用 CSS 中的抗锯齿功能？

发布于 2024-08-11 17:49:07 字数 96 浏览 3 评论 0原文

我想在网络上使用像素字体。我使用 @font-face 包含它，但是所有浏览器都对字体应用抗锯齿功能。我似乎找不到 CSS 规则来禁用此功能，有人能想到另一种禁用抗锯齿的方法吗？

原文

分享到QQ

分享到微博

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

发布评论

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

白馒头 2024-08-18 17:49:07

字体渲染是由操作系统和浏览器完成的，因此，到目前为止，我相信 CSS 能做的事情还很少。讨论中可能有一些提议的 CSS 规则（我见过提到“font-smooth”或类似的东西），但据我所知，CSS3 中没有任何内容，CSS2 中也绝对没有。

回复收藏 0 原文

妄想挽回 2024-08-18 17:49:07

这个问题很老了，所以只是想更新一下。

基于 caniuse.com，它有一个 CSS 属性，但已从 CSS3 规范中删除草稿。所以它不是标准解决方案。
一些 Webkit、Firefox 和Opera 浏览器支持它，但不一致。它主要适用于桌面和 Mac OS 用户

-webkit-font-smoothing: none || antialiased || subpixel-antialiased
-moz-osx-font-smoothing: auto || inherit || unset || grayscale
font-smoothing: auto || inherit || unset || grayscale

This question is old, so just wanted to give an update.

Based on caniuse.com, there's a CSS property for it but has been removed from the CSS3 specification drafts. So it is not a standard solution.
Some Webkit, Firefox & Opera browsers support it but it is inconsistent. It mostly works for desktop and Mac OS users

-webkit-font-smoothing: none || antialiased || subpixel-antialiased
-moz-osx-font-smoothing: auto || inherit || unset || grayscale
font-smoothing: auto || inherit || unset || grayscale

回复收藏 0 原文

梦忆晨望 2024-08-18 17:49:07

我今天遇到了类似的问题，虽然 font-smooth 在当代 Firefox* 中不起作用*，但添加一些过滤器却可以：

filter: contrast(1);

然而，禁用过滤器的抗锯齿功能似乎有点老套。顺便说一句，它不会导致完全禁用抗锯齿，只是导致它以某种方式不同地应用，以便位图字体正确渲染。另一方面，它会破坏非位图字体的渲染。

* 在 Iceweasel 上的 http://doir.ir/fixedsys/demo.html 上的 Fixedsys 上进行了测试38.40.0，在 Debian 8 上。

I had similar problem today and it seems that although font-smooth does not work in contemporary Firefox* adding some filter does:

filter: contrast(1);

Yet it seems to be a bit hacky to disable anti-aliasing with filter. By the way it does not cause to completely disable anti-aliasing just causes it to be applied somehow differently so bitmap fonts render correctly. On the other hand it breaks rendering of non-bitmap fonts.

* Tested on Fixedsys from http://doir.ir/fixedsys/demo.html, on Iceweasel 38.40.0, on Debian 8.

回复收藏 0 原文

终陌 2024-08-18 17:49:07

我认为 css 没有抗锯齿选项。尝试使用 cufon 代替：
https://github.com/sorccu/cufon/wiki/about

这很简单使用它会很好地渲染你的像素字体。您可能还对 Shaun Inman 的 Pxfon 感兴趣：
http://shauninman.com/archive/2009/04/17/pxr_cufon_pxfon

回复收藏 0 原文

绻影浮沉 2024-08-18 17:49:07

是的，这是可能的。

我也在找这个。我最终在另一个 stackoverflow 线程上找到了解决方案（ How to get "crispEdges" for SVG 文本？）禁用 SVG 的文本平滑（禁用抗锯齿），但此解决方案也适用于常规 HTML 元素。

诀窍是使用 SVG 过滤器，然后您可以将其添加到任何 HTML 元素以使任何内容变得清晰。

首先我们需要定义过滤器，这样我们就可以在 CSS 中使用它。

<svg class="offscreen" width="0" height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="crispify">
            <feComponentTransfer>
                <feFuncA type="discrete" tableValues="0 1"/>
            </feComponentTransfer>
        </filter>
    </defs>
</svg>

将过滤器添加到仅包含文本的 HTML 元素。如果它有背景颜色，则不起作用。

p {
    filter: url(#crispify);
}

额外的东西：您可能想要隐藏 SVG 元素，因此将其添加到 CSS 中

.offscreen {
    position: absolute;
    left: -100000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

另一件事：如果白色看起来很奇怪，请将颜色更改为黑色并使用另一个过滤器反转它，因此您的代码如下所示：

p {
  filter: url(#crispify) invert(1);
}

请注意，我不知道这是否适用于所有浏览器，但它确实适用于 Chrome、Edge 和 Firefox。

Yes, this is possible.

I was looking for this as well. And I eventually found a solution on another stackoverflow thread ( How to get "crispEdges" for SVG text? ) to disable text smoothing ( disable anti-alias ) for SVG but this solution also works for regular HTML elements.

The trick is using using an SVG filter, which you can then add to any HTML element to make anything crispy.

First we need to define the filter, so we can use it inside of our CSS.

<svg class="offscreen" width="0" height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="crispify">
            <feComponentTransfer>
                <feFuncA type="discrete" tableValues="0 1"/>
            </feComponentTransfer>
        </filter>
    </defs>
</svg>

Add the filter to a HTML element that only contains text. If it has a background-color, it doesn't work.

p {
    filter: url(#crispify);
}

extra stuff: you will probably want to hide the SVG element, so add this to the CSS

.offscreen {
    position: absolute;
    left: -100000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

another thing: if it looks weird with a white color, change the color to black and invert it using another filter, so your code looks like this:

p {
  filter: url(#crispify) invert(1);
}

Note, I do not know if this will work with all browsers, but it does work on Chrome, Edge and Firefox.

回复收藏 0 原文

不奢求什么 2024-08-18 17:49:07

没有。

截至 2022 年，除了 SVG 之外，所有这些答案都被打破了，在这种情况下，当使用较小的尺寸时，你会得到不一致的缩放（例如，24 及以下......是的，它对于非常大的标题很有用）。 font-smooth 确实是一个选项，但它不应该是您的第一个选项，因为它实际上是 -webkit-font-smoothing/-moz-osx-font-smoothing，并且正如后者所暗示的，除了 Mac OS X 之外，两者都不起作用。

我见过诸如 98 之类的东西.css 使用具有用框构造的字符的自定义字体，这不能解决问题，但可以减轻问题。不过，这是一个非常乏味的过程，虽然这对于 MS Sans Serif 来说效果很好，但对于更多打包字体和/或较小尺寸的字体来说却失败了。

最好的选择是为任何您想要清晰的文本创建图像。关于这一点，我创建了一个程序，可以将 PNG 转换为 SVG 而无需跟踪，这是一个解决方案，让像素完美的图像可以在更大的 1440p 显示器上正确显示。