使用HTML/CSS显示锯齿字体

Question

使用HTML/CSS显示锯齿字体

5

我需要使用HTML/CSS渲染一些文本，不要进行任何屏幕平滑或抗锯齿处理等操作。此字体渲染的文本还需要有轮廓线。使用情况是我希望文本所用的body背景色可以作为外部应用程序的透明度键，并且我希望文本是坚实而清晰的，没有任何平滑效果。目前看起来是这样的：

我正在使用electron开发一款应用程序。我已经尝试了很多方法，包括使用text-rendering: optimizeSpeed和font-smooth: never，以及使用HTML5画布来渲染文本，但似乎无法得到我想要的输出结果，这与使用C#制作的应用程序完全相同。

两张图片都被放大了1000%。是否可以使用HTML/CSS实现？如果不行，我能得到最接近的效果是什么？

- driima

https://dev59.com/yGkv5IYBdhLWcg3wghIi#10538630 - Jacob G

@JacobGray 没有变化。 - driima

你使用的是哪个浏览器/操作系统？您可能需要尝试类似于-webkit-font-smoothing：none或-moz-osx-font-smoothing：unset之类的东西。有关更多信息，请参见此处。 - Ted Hopp

@TedHopp 我相信Electron使用Chromium。另外，这些更改都没有对文本产生任何显着的影响。我认为可能是字体的问题，但是我已经尝试了无数其他字体，所有这些字体的输出结果与我的问题中的第一张图片相同。 - driima

你可以尝试的一件事是在画布上绘制文本，而不是使用html/css，然后使用canvas.toDataURL将其转换为图像。 - Mike 'Pomax' Kamermans

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeremy Zahner · Accepted Answer

这是我能做到的最接近的翻译：

这大致就是我能达到的程度。

JSFiddle

h1 {
font-family:'Press Start 2P', Arial;
font-weight: 400;
color: white;
font-size: 30px;
font-smoothing: antialiased;
text-shadow: -4px -4px 0 #000, 4px -4px 0 #000, -4px 4px 0 #000, 4px 4px 0 #000, -8px -8px 0 black, 8px -8px 0 black, -8px 8px 0 black, 8px 8px 0 black;
}

使用text-shadow可以获得不同的效果，你可以根据需要进行叠加。但是需要进行一些微调。

关于此问题的另一个好问题：文本轮廓效果编辑我使用的字体是Press Start 2P。它是谷歌字体，你可以在这里找到它。