Question

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

Answer 1

字体渲染是由操作系统和浏览器完成的，所以，到目前为止，我相信你几乎无法使用CSS。在讨论中可能会提出一些CSS规则（我已经看过提到“font-smooth”或类似的东西），但据我所知，CSS3中什么都没有，而CSS2中肯定没有。

Answer 2

这个问题很陈旧，所以只想提供更新。

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

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

Answer 3

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

它非常易于使用，它可以很好地渲染像素字体。你可能也对Shaun Inman的Pxfon感兴趣： http://shauninman.com/archive/2009/04/17/pxr_cufon_pxfon

Answer 4

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

如果你处理错误的字体大小，你最终会得到别名/有雾的字符。

检查出来......

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

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

Answer 5

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

filter: contrast(1);

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

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

Answer 6

是的，这是可能的。

我也在找这个。我最终在另一个 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。

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

6 个答案: