javascript - 使用 HTML/CSS 显示锯齿状字体

Question

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

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

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

Answer 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。它是一种 Google 字体，您可以找到它 here.