9

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

4

6 回答 6

5

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

于 2009-11-18T00:09:59.817 回答
5

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

基于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
于 2015-04-16T19:56:56.983 回答
4

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

filter: contrast(1);

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

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

于 2017-01-21T15:55:28.417 回答
1

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

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

于 2009-11-18T00:09:37.043 回答
1

是的，这是可能的。

我也在找这个。我最终在另一个 stackoverflow 线程（如何为 SVG 文本中获取“crispEdges”？）上找到了一个解决方案来禁用 SVG 的文本平滑（禁用抗锯齿），但这个解决方案也适用于常规 HTML 元素。

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

  1. 首先我们需要定义过滤器，这样我们就可以在 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>
  1. 将过滤器添加到仅包含文本的 HTML 元素。如果它有背景颜色，它就不起作用。
p {
    filter: url(#crispify);
}
  1. 额外的东西：你可能想要隐藏 SVG 元素，所以将它添加到 CSS
.offscreen {
    position: absolute;
    left: -100000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
  1. 另一件事：如果白色看起来很奇怪，请将颜色更改为黑色并使用另一个过滤器将其反转，因此您的代码如下所示：
p {
  filter: url(#crispify) invert(1);
}
  1. 请注意，我不知道这是否适用于所有浏览器，但它确实适用于 Chrome、Edge 和 Firefox。
于 2021-03-16T14:26:33.917 回答
0

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

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

看一下这个...

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

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

于 2011-02-01T21:34:25.257 回答