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

Question

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

我正在使用电子开发应用程序.我曾尝试一切从text-rendering: optimizeSpeed和font-smooth: never渲染使用HTML5画布的内容,但我似乎无法得到输出我想,这恐怕正是这样,这是从一个应用程序中使用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;
}

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

另一个好问题：文本的轮廓效果

编辑

我使用的字体是 Press Start 2P。它是一种谷歌字体，你可以在这里找到它。