网页使用Windows95字体

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，第二个屏幕截图来自 macOS 上的 Firefox。在 Linux 上，字体渲染实际上是像素级的，而 macOS 则添加了轻微的抗锯齿功能。您可能想右键单击上面的图像并在单独的选项卡中打开它以查看其原始大小以查看差异。

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

（第二行是非canvas方法。）

从 .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 文件无法在所有浏览器中使用。例如，对于 TTF 文件，Firefox 很挑剔。因此，我们将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 的间隙

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

. 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 为什么要等到网络字体加载。这将在慢速互联网连接上失败。不要在生产中使用！）

图像中的第一行是使用 canvas 方法呈现的。

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

网页使用Windows95字体

Use Windows 95 font on webpage

html

css

fonts

windows-95