像素字体和网站 (CSS + HTML)答案

【问题标题】：Pixel Fonts and Websites (CSS + HTML)像素字体和网站 (CSS + HTML)
【发布时间】：2014-05-22 16:26:07
【问题描述】：

我正在寻找一种渲染超像素字体的方法。这意味着我希望像素真正可见。如果您愿意，可以不使用抗锯齿。

我使用了一个不错的 google 字体，但问题是 firefox 仍然对它进行抗锯齿处理。

任何线索都将不胜感激，任何例子也是如此。我尝试使用该字体：https://www.google.com/fonts/specimen/Press+Start+2P
它在任何浏览器中都能很好地呈现，但是当我将它集成到我自己的网站中时，它的呈现效果并不好。

【问题讨论】：

能否提供截图给我们？当然，请突出显示有问题或未按预期工作的部分。
矢量字体始终是抗锯齿的候选者——如果不是在浏览器/尺寸/分辨率的组合中，那么它仍然可能在另一种中。我知道 Press Start 字体（它不是受到原始 8x8 Sinclair Spectrum 字体的启发吗？）；它“只是”另一种矢量字体，不是真正的“位图”字体。
啊——一个true“位图”字体可以通过在画布上绘制矩形来制作。但是，您几乎只能靠自己，所有这些不同的分辨率和大小限制。
这对我来说听起来不合逻辑。为什么字体没有按原样呈现？例如，在 Firefox 中字体是抗锯齿的，而在 chrome 中则不是。我发现了这个：devpro.it/pixelfont
其实用 8px 的小字体渲染得很好。我想要的是当字体变大时，浏览器不应该对它进行反锯齿。

【解决方案1】：

实际上，将 CSS 属性 font-weight 设置为 normal 可以解决字体足够小的问题。似乎引导程序有点弄乱了我的字体。

例如：

<label>
    <input type="checkbox" name="checkbox" id="notify-on-message" />
    New Message
</label>

正在创建模糊字体。在将style="font-weight: normal;" 应用于标签后，字体不再模糊，在 Firefox 和 Chrome 中都是如此。

【讨论】：