将@font-face 与像素字体一起使用时，是否可以在 CSS 中禁用抗锯齿？答案

【问题标题】：Is it possible to disable anti-aliasing in CSS when using @font-face with pixel fonts?将@font-face 与像素字体一起使用时，是否可以在 CSS 中禁用抗锯齿？
【发布时间】：2009-11-18 00:03:31
【问题描述】：

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

【问题讨论】：

标签： css font-face antialiasing

【解决方案1】：

字体渲染是由操作系统和浏览器完成的，所以到目前为止，我相信你可以用 CSS 做的很少。可能有一些提议的 CSS 规则正在讨论中（我见过提到“字体平滑”或类似的东西），但据我所知，CSS3 中没有，CSS2 中绝对没有。

【讨论】：

谢谢，和我想的差不多。

【解决方案2】：

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

基于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

【讨论】：

这里是字体平滑的文档页面：developer.mozilla.org/en-US/docs/Web/CSS/font-smooth（包括兼容性图表）。在 2020 年 8 月 10 日 UTC，我在 htmledit.squarefree.com 使用软件 Mozilla/5.0 (Linux; Android 4.4.3; KFTHWI) AppleWebKit/537.36 (KHTML, like Gecko) Silk/81.2.16 like Chrome/81.0.4044.138 Safari/537.36 测试了 <p style="-webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-smoothing: unset; font-smooth: never; filter: contrast(1);">turn off anti aliasing in html text</p> - 遗憾的是，它不起作用（文本仍然有抗锯齿）。

【解决方案3】：

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

filter: contrast(1);

然而，使用过滤器禁用抗锯齿似乎有点笨拙。顺便说一句，它不会导致完全禁用抗锯齿，只是会导致它以不同方式应用，因此位图字体可以正确呈现。另一方面，它破坏了非位图字体的渲染。

* 在来自 http://doir.ir/fixedsys/demo.html 的 Fixedsys、Iceweasel 38.40.0、Debian 8 上测试。

【讨论】：

【解决方案4】：

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

它非常易于使用，并且可以很好地呈现您的像素字体。您可能还对 Shaun Inman 的 Pxfon 感兴趣： http://shauninman.com/archive/2009/04/17/pxr_cufon_pxfon

【讨论】：

这确实渲染得很好，但是文本突出显示很糟糕，很明显它不是普通字体。在此处查看示例：pixel-portraits.com/pxfon

【解决方案5】：

是的，这是可能的。

我也在找这个。我最终在另一个 stackoverflow 线程 (How to get "crispEdges" for SVG text?) 上找到了一个解决方案，可以为 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。

【讨论】：

【解决方案6】：

如果您在 8pt 倍数大小（8、16、24 等）上使用大多数像素字体，它们将无法正常工作

如果您使用错误的字体大小，您最终会得到别名/模糊字符。

看看这个...

http://www.fontsquirrel.com/fonts/list/style/Pixel

...它可能会有所帮助；）

【讨论】：

【解决方案7】：

没有。

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

我看到诸如98.css 之类的东西使用自定义字体，其字符由框构成，这并不能解决问题，但可以缓解问题。不过，这是一个非常繁琐的过程，虽然这对于 MS Sans Serif 来说效果很好，it fails for more packed fonts and/or fonts at smaller sizes。

您最好的选择是为您想要清晰的任何文本创建图像。关于这一点，I created a program that converts PNGs to SVGs without tracing，这是一种让像素完美的图像在更大的 1440p 显示器上正确显示的解决方案。

【讨论】：