Question

以下Windows 95屏幕截图使用了什么字体？如何在CSS3中引用它（不平滑字母边缘）？ enter image description here

Answer 1

字体为“MS Sans Serif”或“Microsoft MS Sans Serif”

Answer 2

我终于设法将Windows 95 Sans Serif字体转换为True Type字体。您可以在这里下载：Download link

Answer 3

这是一种非常有效的方法。这些是实际的浏览器屏幕截图：

第一个屏幕截图来自 Linux 上的 Firefox，而第二个屏幕来自 macOS 上的 Firefox。在 Linux 上，字体渲染实际上是像素完美的，而 macOS 增加了轻微的抗锯齿。您可能需要右键单击上面的图片，然后在单独的选项卡中将其打开，以原始大小查看它的不同之处。

在 macOS 上获得像素完美渲染的解决方法是在 <canvas> 元素上以 80 像素绘制字体，然后将画布元素缩小到其大小的 10%。这将在 macOS 上实现像素完美的渲染：

（第二行是非画布方法。）

从 .fon 文件创建 Web 字体的步骤

这是我将原始 Microsoft 字体（称为 sserife.fon）转换为以上屏幕截图中使用的网络字体（woff2 格式）的操作。

先决条件

这需要以下工具：

如果你使用的是 macOS，你可以像这样安装它们：

brew install woff2 psftools imagemagick
brew install --cask fontforge

.fon 到 .png 的转换

首先，我们提取 .fon 文件。值得注意的是，.fon 文件是一个容器，可以包含多种不同大小的光栅字体。

$ fon2fnts sserife.fon
sserife.fon: 6 fonts extracted
$ ls -1A
MS Sans Serif_10.fnt
MS Sans Serif_12.fnt
MS Sans Serif_14.fnt
MS Sans Serif_18.fnt
MS Sans Serif_24.fnt
MS Sans Serif_8.fnt
sserife.fon

不错！所以 MS Sans Serif 存在大小为 8pt、10pt、12pt、14pt、18pt 和 24pt。这些数字在过去的美好时光中可能对您来说很熟悉。

我不会全部转换，只使用最小的 8pt，因为这是 Windows95 中的默认大小。

我首先将它们转换为 PSF，然后转换为 XBM（一种旧的位图图形格式），最后转换为 PNG：

$ fnt2psf MS\ Sans\ Serif_8.fnt MS\ Sans\ Serif_8.psf
Warning: Variable-width!
$ psf2xbm MS\ Sans\ Serif_8.psf MS\ Sans\ Serif_8.xbm
$ convert MS\ Sans\ Serif_8.xbm MS\ Sans\ Serif_8.png

结果如下：

您会注意到我使用了该字体的 Latin 1 变体（代码页 1252）。

除了 PNG 文件之外，您还需要一个仅包含图像中所有字符的文本字符串。

使用带有 FontForge 的 Python 脚本，我们可以打印原始文件中可用的所有 ASCII 字符。

将以下脚本存储在名为 script.py（或您喜欢的任何其他名称）的文件中：

import os
from fontforge import *

font = open(os.sys.argv[1])
count = 0
for g in font:
        if count % 32 == 0: print()
        try:
                print(chr(font[g].unicode), end='')
        except:
                print(" ", end='')
        count += 1

运行脚本：

/Applications/FontForge.app/Contents/MacOS/FontForge -script script.py MS\ Sans\ Serif_8.fnt

（这里假设是 macOS。为 Windows 或 Linux 相应地调整 FontForge 路径。）

结果：

PKGBASE: /Applications/FontForge.app
Copyright (c) 2000-2020. See AUTHORS for Contributors.
 License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
 with many parts BSD <http://fontforge.org/license.html>. Please read LICENSE.
 Version: 20201107
 Based on sources from 2020-11-07 20:56 UTC-ML-D-GDK3.
 Based on source from git with hash: 21ad4a18fb3d4becfe566d8215eba4483b0ddc4b

 !"#$%&'()*+,-./0123456789:;<=>?
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_
`abcdefghijklmnopqrstuvwxyz{|}~
€ ‚ƒ„…†‡ˆ‰Š‹Œ Ž  ‘’“”•–—˜™š›œ žŸ
 ¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿
ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞß
àáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ

将 Based on source from git with hash: 21ad4a18fb3d4becfe566d8215eba4483b0ddc4b 之后的块复制到剪贴板。 确保包含第一行空白！

TTF 字体创建

我们现在将生成的 PNG 文件上传到一个专门用于创建看起来像像素字体的 TrueType 字体的在线工具。

前往：https://yal.cc/r/20/pixelfont/

请注意，https://yellowafterlife.itch.io/pixelfont 还提供此工具的离线版本。

上传上面生成的 PNG 图片
将上一部分中的块粘贴到“图像中的字形”部分
根据下面的屏幕截图设置平铺宽度、偏移、分隔、基线和间距

它现在应该是这样的：

点击“保存TTF”

TTF 到 WOFF 的转换

生成的 TTF 文件不适用于所有浏览器。例如，Firefox 对 TTF 文件很挑剔。因此，我们将 TTF 文件转换为 WOFF2 文件。

$ woff2_compress MS\ Sans\ Serif\ 8pt.ttf

嵌入字体

使用以下 CSS：

@font-face {
   font-family: 'sserife_8';
   src: url('MS Sans Serif 8pt.woff2') format('woff2');
}

body {
   font-family: 'sserife_8';
   font-size: 8px;
}

注意事项

字距调整

要实现 100% 像素完美，还缺少一项：字距调整。

在执行所有这些操作时，我发现尽管是旧的光栅字体，但原始字体似乎具有字距调整信息。这意味着，例如，当输入 Microsoft 时，会在大写 M 和 i 之间插入 1px 的间隙。

上面使用的像素字体转换器实际上通过指定字距调整对来支持这一点。我使用了以下绝对不完整甚至不正确的内容，但为我修复了一些烦人的情况。

. abcdefghijklmnopqrstuvwxz 1
B abcdefghijklmnopqrstuvwxz 1
D abcdefghijklmnopqrstuvwxzJ 1
E abcdefghijklmnopqrstuvwxz 1
G abcdefghijklmnopqrstuvwxz 1
H abcdefghijklmnopqrstuvwxz 1
I abcdefghijklmnopqrstuvwxz 1
J abcdefghijklmnopqrstuvwxz 1
M abcdefghijklmnopqrstuvwxz 1
N abcdefghijklmnopqrstuvwxz 1
O abcdefghijklmnopqrstuvwxz 1
Q abcdefghijklmnopqrstuvwxz 1
R abcdefghijklmnopqrstuvwxz 1
S abcdefghijklmnopqrstuvwxz 1
T abcdefghijklmnopqrstuvwxz 1
U abcdefghijklmnopqrstuvwxz 1
X abcdefghijklmnopqrstuvwxz 1
Z abcdefghijklmnopqrstuvwxz 1
: 0123456789 1
1 0123456789. 1
2 1. 1
3 1. 1
4 1. 1
5 1. 1
6 1. 1
7 1. 1
8 1. 1
9 1. 1
0 1. 1
. . 1

如果有人知道如何从原始字体中确定正确的字距调整对，请告诉我。高度赞赏。

抗锯齿

如上所述，macOS 仍然对像素字体应用了一些轻微的抗锯齿。要避免这种情况，请使用以下脚本：

<style>
    #text {
        width: 400px;
        height: 20px;
    }

    #text canvas {
        width: 100%;
        height: 100%;
    } 
</style>

<canvas id="myCanvas" width="4000" height="200"></canvas>

<script>
    window.setTimeout(function () {

        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "80px 'sserife_8'";
        ctx.fillStyle = "#000000";
        ctx.fillText("Arbeitsplatz www.example.com Microsoft Internet Explorer öüä€ßgy", 0, 120);
    }, 500);

</script>

（setTimeout 函数是一个为什么要等到网络字体加载完成的问题。这会在互联网连接速度较慢的情况下失败。不要在生产中使用！）

图像中的第一行是使用画布方法渲染的。

但是，根据您想要通过此实现的目标，这可能不是一种可行的方法。

在网页上使用Windows 95字体

3 个答案: