使用 HTML / CSS 显示锯齿状字体答案

【问题标题】：Display jagged fonts using HTML / CSS使用 HTML / CSS 显示锯齿状字体
【发布时间】：2015-07-29 07:43:38
【问题描述】：

我需要使用 HTML / CSS 呈现一些文本，而不需要任何屏幕平滑或锯齿，或任何类似的东西。使用此字体渲染的文本也需要有轮廓。用例是我希望使用文本的主体的背景颜色用作外部应用程序的透明度键，并且我希望文本坚实而清晰，没有任何平滑。这就是它目前的样子：

我正在使用电子开发应用程序。我已经尝试了从text-rendering: optimizeSpeed 和font-smooth: never 到使用HTML5 画布呈现文本的所有方法，但我似乎无法获得我想要的输出，这与使用C# 制作的应用程序完全一样：

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

【问题讨论】：

stackoverflow.com/a/10538630/3285730
@JacobGray 没有变化。
您使用的是什么浏览器/操作系统？您可能需要尝试-webkit-font-smoothing: none 或-moz-osx-font-smoothing: unset 之类的方法。请参阅here 了解更多信息。
@TedHopp 我相信电子使用铬。此外，这些更改都不会对文本造成任何明显的更改。我认为这可能是字体的问题，但是我尝试了无数其他字体，所有这些字体的输出都与我问题中的第一张图片相同。
您可以尝试的一件事是在画布上绘制文本，而不是 html/css，然后使用 canvas.toDataURL 将其转换为图像

标签： javascript css html fonts

【解决方案1】：

这是我能得到的最接近的地方。

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;
}

使用文本阴影来获得不同的结果。基本上，您可以根据需要将它们堆叠起来。它肯定需要一些调整。

关于它的另一个好问题：Outline effect to text

编辑

我使用的字体是 Press Start 2P。它是谷歌字体，你可以找到它here.

【讨论】：

我根据你的做了一个JSFiddle，但我不确定渲染这么多的阴影是否会导致延迟或任何问题，但这是我能得到的最好结果。使用放大镜，文本阴影的左上角像素仍然出现一些绿色，但几乎不明显。
@Rouze 性能应该不是真正的问题，除非您触发了一些会导致浏览器在短时间内一遍又一遍地重新绘制阴影的事件。
我只是每 5 分钟左右更新一次视图，所以我想这并不重要。