在網頁上使用 Windows 95 字體

Question

以下 Windows 95 屏幕截圖使用了什么字體，我如何在 CSS3 中引用它（不平滑字母邊緣）？

Answer 1

我終於設法將 Windows 95 Sans Serif 字體轉換為 True Type 字體。 您可以在此處下載： MS Sans Serif 、 MS Sans Serif Bold 。

Answer 2

字體為“MS Sans Serif”或“Microsoft MS Sans Serif”

Answer 3

這是一種非常有效的方法。 這些是實際的瀏覽器屏幕截圖：

第一張截圖來自Linux上的Firefox，而第二張截圖來自macOS 上的 Firefox 。 在 Linux 上，字體渲染實際上是像素完美的，而 macOS 增加了輕微的抗鋸齒。 您可能希望右鍵單擊上面的圖像並在單獨的選項卡中打開它以查看其原始大小以查看差異。

在 macOS 上獲得像素完美渲染的一種解決方法是在<canvas>元素上以 80px 繪制字體，然后將畫布元素縮小到其大小的 10%。 這將在 macOS 上實現像素完美的渲染：

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

從 .fon 文件創建 Web 字體的步驟

這是我將原始 Microsoft 字體（稱為sserife.fon ）轉換為上面屏幕截圖中使用的網絡字體（woff2 格式）所做的工作。

先決條件

這需要以下工具：

• woff2
• PSF工具
• 字體鍛造
• 圖像魔術師

如果您使用的是 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 處的最小尺寸，因為這是 Windows 95 中的默認尺寸。

我首先將它們轉換為 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 上也提供了此工具的離線版本。

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 為什么要等到網絡字體加載完畢。這將在互聯網連接緩慢時失敗。不要在生產中使用！）

圖像中的第一行是使用畫布方法呈現的。

但是，根據您想要通過此實現的目標，這可能不是一種可行的方法。