在网页上使用 Windows 95 字体

Question

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

Answer 1

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

Answer 2

我终于设法将 Windows 95 Sans Serif 字体转换为 True Type 字体。你可以在这里下载：MS Sans Serif, MS Sans Serif Bold。

Answer 3

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

第一个屏幕截图来自 Linux 上的 Firefox，而第二个屏幕截图来自 ma​​cOS 上的 Firefox。在 Linux 上，字体渲染实际上是像素级的，而 macOS 增加了轻微的抗锯齿。您可能需要右键单击上面的图像并在单独的选项卡中打开它，以原始大小查看它以查看差异。

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

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

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

这是我将原始 Microsoft 字体（称为 sserife.fon）转换为上面屏幕截图中使用的 Web 字体（woff2 格式）所做的工作。

先决条件

这需要以下工具：

• woff2
• PSF Tools
• FontForge
• ImageMagick

如果你在 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

结果如下：

您会注意到我使用了该字体的拉丁 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 还提供此工具的离线版本。

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

现在应该是这样的：

点击“保存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 函数是一个 hacky，为什么要等到网络字体加载完毕。这会在互联网连接缓慢时失败。不要在生产环境中使用！）

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

但是，根据您想要达到的目的，这可能不是一个可行的方法。