pcface下載 - pcface源代碼下載

pcface

字體下載

0.3.0

下載

PC面

PC面是程序員友好型資源的集合，允許在圖形畫布上繪製CP437字符。該項目提供了使用各種免費字體來呈現的CP437字符集的所有256個字形的位圖陣列，這些字體集可重現原始的IBM PC OEM字體。

此外，該項目還包括一些Python函數，以生成這些位圖和一些JavaScript函數，以在圖形帆布上呈現這些位圖。

也許您正在製作一款復古風格的遊戲，您想完全控制每個像素應該是什麼。或者，也許您想使用星號渲染CP437字形來製作文本橫幅。該項目中提供的位圖陣列可能對此類活動有用。可用的位圖數組可以轉換為屏幕上的像素或標準輸出符號以渲染CP437字形。

訪問susam.github.io/pcface/查看演示。

內容

資源
演示
- 快速演示
- 詳細的演示
位圖格式
字體詳細信息
- 現代dos字體
- Oldschool PC字體
工具包使用
- CLI
- Python API
- JavaScript API
執照
- 原始字體
- 現代dos位圖
- Oldschool PC字體位圖
- 原始碼
支持
頻道
更多的

資源

該項目的OUT/目錄中提供了許多文件。請訪問susam.github.io/pcface/out/瀏覽這些文件。該目錄包含基於原始IBM PC OEM字體的各種免費字體的幾個子目錄。每個字體目錄都包含字體和其他一些文件的位圖數組。在描述這些資源時，下面提供了指向現代DOS-8X16資源文件的鏈接。這是每個文件的簡要說明：

OUT/Modern-Dos-8x16/fontlist.js：來自CP437字符集的所有256個字形的位圖表示，以示出是位圖陣列的JavaScript數組。每個位圖數組代表CP437字符的位圖。
OUT/ModernDos-8x16/fontmap.js：來自CP437字符的所有CP437字形的位圖表示，該字符套件公佈為JavaScript對象，該對象將每個CP437字符映射到其位圖數組。
OUT/ModernDos-8x16/glyph.txt：使用星號代表的所有CP437字形。
OUT/ModernDos-8x16/graph.txt：使用AT符號（ @ ）和點（ . ）表示的所有CP437字形。字形的每一行都以十六進制中表示的行的二進制代碼前綴。相同的二進制代碼如上所述的JavaScript文件中顯示為註釋。
OUT/ModernDos-8X16/Preview-8x16.png：從原始字體文件中讀取字體的預覽。
OUT/ModernDos-8X16/Preview-16x32.png：從原始字體文件中讀取字體的更大預覽。

該項目中包含的每種此類字體都可以使用類似的文件。請訪問susam.github.io/pcface/out/瀏覽它們。

這些文件也可以通過CDN上的https://cdn.jsdelivr.net/npm/pcface/out/獲得。

演示

快速演示

有關此項目中可用的各種位圖的快速演示，請訪問susam.github.io/pcface/的演示頁面。底部有一個下拉菜單，可用於選擇不同字體的位圖。

該演示既可以從fontlist.js進行字體列表，也可以從fontmap.js字體映射中為選定的字體進行字體映射。字體列表演示使用綠色前景顏色在第一個畫布中顯示。字體地圖演示使用琥珀色在第二個畫布中顯示。

在兩個演示中，渲染的字形看起來完全相同，因為在兩種情況下都使用了相同的位圖數組。 fontlist.js和fontmap.js之間的唯一區別是如何在JavaScript const中公開這些位圖數組。前者公開了位圖數組的數組，而後者則將每個CP437字符映射到其位圖數組中。

詳細的演示

susam.github.io/pcface/retro.html還有另一個更詳細的演示。

在演示頁面中，您會注意到每個位圖演示都有兩個變體：一個帶有後綴font-list ，另一個帶有後綴font-map 。 font-list演示加載了所選字體的fontlist.js ，並以綠色的字形呈現字形。 font-map演示加載所選字體的fontmap.js ，並在琥珀中呈現字形。

雖然先前的演示在固定尺寸的畫布上僅顯示40個字符，其單個字體尺寸等於原始字體大小兩次的縮放尺寸，但該演示顯示了每行80個字符，分為兩個不同的字體大小：原始字體尺寸以及縮放的字體大小，是原始字體大小的兩倍。此外，在此演示中，每當調整瀏覽器大小時，帆布會自動調整自身大小以適合瀏覽器窗口大小。

位圖格式

該項目中可用的位圖的格式非常簡單。每個字形用像素的WXH網格表示，其中w是每個字形的寬度，而H是每個字形的高度。例如，ModernDos-8x16中的每個位圖代表16行像素，每行8列。這16行表示為每個字形的位圖中的16行。例如，使用此字體呈現的大寫字母“ b”的字形表示為：

  [
    0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
    0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00
  ] , // [B] (66)

每個整數代表必須為字形的每一行繪製的點。開頭的整數0x00和0x00表示字形的頂部兩個行是空白的。然後， 0xfc （二進制1111100 ）表示第三行的前6像素被字體的前景顏色繪製，最後兩個像素留為空白。以這種方式，必須繪製16行像素。

這是一個示例python代碼，該代碼讀取這些位圖並使用DOT（ . ）每0位（每1位）繪製標準輸出（ @ ）的標準輸出。

 bitmap = [
    0x00 , 0x00 , 0xfc , 0x66 , 0x66 , 0x66 , 0x7c , 0x66 ,
    0x66 , 0x66 , 0x66 , 0xfc , 0x00 , 0x00 , 0x00 , 0x00 ,
]
s = ''
for row in bitmap :
    s += f' { row :#04x } ' + f' { row :08b } n ' . translate ( str . maketrans ( '01' , '.@' ))
print ( s )

這是輸出：

 0x00 ........
0x00 ........
0xfc @@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x7c .@@@@@..
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0x66 .@@..@@.
0xfc @@@@@@..
0x00 ........
0x00 ........
0x00 ........
0x00 ........

如果您在編寫代碼以將位圖轉換為像素的代碼時需要更多幫助，請參閱src/pcface.js中的drawChar() ， drawString()和drawStrings()函數。您還可以使用CDN URL將此腳本加載到網頁中，並直接在您的頁面中使用這些功能。這在JavaScript API節中更詳細地說明了這一點。

應該參考這些功能，並用不同的編程語言編寫類似的代碼，以便您選擇的圖形工具包。

字體詳細信息

現代dos字體

該項目包括由Jayvee Enaguas開發的現代DOS 8x16字體（20190101.02版）。該字體可根據CC0 1.0通用公共領域奉獻的條款獲得。該項目的SRC/FONT/ModernDos/Directory還存檔該字體的副本。

該字體基於IBM VGA 8X16和IBM PC的Verite 8x16 OEM字體。該字體中的某些字形看起來完全像IBM VGA 8x16的字形，而其他一些字形看起來完全像Verite 8x16的字形。但是，該字體中也有幾個字形，兩種OEM字體都不匹配。相反，它們恰好是在OEM字體中發現的字形的改編。

我認為，該字體包含兩種OEM字體的最佳部分。我喜歡這種字體具有verite的零。我也喜歡已繼承在該字體中的Verite中的更平方的輪廓。雖然它從Verite 8x16繼承了許多良好的設計，但它也繼承了IBM VGA 8X16的一些不錯的功能。例如，它具有Digit 2的凸起的莖和IBM VGA 8x16的Digit 7的彎曲莖。

Oldschool PC字體

該項目包括Viler開發的幾種Oldschool PC字體（2.2版）。這些字體可根據Creative Commons歸因 - 共享4.0國際許可證獲得。這些字體的副本也存儲在該項目的SRC/Font/OldSchool/Directory中。

這些字體在盡可能忠實地複制原始IBM PC OEM字體方面做得非常出色。但是，這些字體與原始OEM字體的不同方式尤其是糾正原始字體中的次要錯誤。有關這些更正的更多詳細信息，請參見Oldschool PC文檔的常見問題。

工具包使用

雖然該項目的主要目的是為CP437字形分發位圖數組，但該項目也使某些工作用於生成和測試這些位圖作為Python和JavaScript函數。 Python功能還以命令行接口（CLI）工具的形式打包。以下小節簡要介紹了CLI工具以及Python和JavaScript函數。

CLI

該項目提供的Python命令行接口（CLI）工具可用於生成帶有您選擇字體的CP437字形的位圖數組。以下步驟解釋了我們如何使用Oldschool IBM EGA 9x14字體來做到這一點，該字體不包括該項目。

首先下載並提取Oldschool IBM EGA 9x14的字體文件：

curl -o oldschool.zip https://int10h.org/oldschool-pc-fonts/download/oldschool_pc_font_pack_v2.2_FULL.zip
unzip -j oldschool.zip " ttf - Px (pixel outline)/Px437_IBM_EGA_9x14.ttf "

創建虛擬Python環境並安裝PC面：

python3 -m venv venv
venv/bin/pip3 install pcface

輸入以下命令以打印工具的使用詳細信息：
```
venv/bin/pcface -h
```
創建位圖數組和其他輸出文件：
```
venv/bin/pcface -s 16 Px437_IBM_EGA_9x14.ttf oldschool-ega-9x14/
```
請注意，輸出目錄名稱必須以以WxH格式表示的每個輸出字形的尺寸結束，其中W是每個字形的寬度， H是每個字形的高度。 -s選項指定字體大小。它應設置為導致所需尺寸字形的字體大小。如果省略了-s選項，則使用H的字體大小，其中H是從輸出目錄名稱讀取的Glyph高度，該名稱可能並不總是會產生正確的Glyph尺寸。
現在，為同一字體創建位圖陣列，但具有字形寬度和高度加倍：
```
venv/bin/pcface -s 32 Px437_IBM_EGA_9x14.ttf oldschool-ega-18x28/
```

現在，輸出目錄將包含包含位圖數組的JavaScript文件以及其他一些說明字形的文件。有關這些文件的簡要說明，請參見部分資源。

Python API

以下步驟顯示瞭如何開始使用Python API：

首先下載並提取Oldschool IBM EGA 9x14的字體文件：

curl -o oldschool.zip https://int10h.org/oldschool-pc-fonts/download/oldschool_pc_font_pack_v2.2_FULL.zip
unzip -j oldschool.zip " ttf - Px (pixel outline)/Px437_IBM_EGA_9x14.ttf "

創建虛擬Python環境並安裝PC面：

python3 -m venv venv
venv/bin/pip3 install pcface

現在，編寫此Python腳本並將其保存在文件中，例如ex1.py

 import pcface

bitmap = pcface . make_bitmap ( 'A' , 'Px437_IBM_EGA_9x14.ttf' , 16 , 9 , 14 )
graph = pcface . make_graph ( bitmap , 9 , '.@' , False )
print ( graph )

輸入以下命令執行腳本：

venv/bin/python3 ex1.py

以下輸出應顯示：

 .........
.........
...@.....
..@@@....
.@@.@@...
@@...@@..
@@...@@..
@@@@@@@..
@@...@@..
@@...@@..
@@...@@..
.........
.........
.........

有關調用該項目的Python API的Python腳本的更多示例，請參見SRC/示例/。

另外，有關Python API中所有功能的完整文檔，請參見Python API文檔。

JavaScript API

這是一個最小的HTML示例，該示例顯示瞭如何將PC面和字體映射從CDN加載到網頁中並使用：

 <!DOCTYPE html >
< html lang =" en " >
  < head >
    < title > PC Face Demo </ title >
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0, user-scalable=no " >
    < style >
      body {background: #111}
      canvas {background: #000; image-rendering: pixelated; margin: auto; display: block}
    </ style >
    < script src =" https://cdn.jsdelivr.net/npm/pcface/src/pcface.js " > </ script >
    < script src =" https://cdn.jsdelivr.net/npm/pcface/out/moderndos-8x16/fontmap.js " > </ script >
    < script >
      'use strict'
      window . addEventListener ( 'load' , function ( ) {
        const canvas = document . getElementById ( 'canvas' )
        const ctx = canvas . getContext ( '2d' )
        ctx . fillStyle = '#3f3'
        pcface . drawString ( PC_FACE_MODERNDOS_8X16_FONT_MAP , ctx , 8 , "hello, world" , 0 , 0 , 2 )
      } )
    </ script >
  </ head >
  < body >
    < canvas id =" canvas " > </ canvas >
  </ body >
</ html >

這是加載字體列表而不是字體映射的另一個示例：

 <!DOCTYPE html >
< html lang =" en " >
  < head >
    < title > PC Face Demo </ title >
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0, user-scalable=no " >
    < style >
      body {background: #111}
      canvas {background: #000; image-rendering: pixelated; margin: auto; display: block}
    </ style >
    < script src =" https://cdn.jsdelivr.net/npm/pcface/src/pcface.js " > </ script >
    < script src =" https://cdn.jsdelivr.net/npm/pcface/out/moderndos-8x16/fontlist.js " > </ script >
    < script >
      'use strict'
      window . addEventListener ( 'load' , function ( ) {
        const canvas = document . getElementById ( 'canvas' )
        const ctx = canvas . getContext ( '2d' )
        ctx . fillStyle = '#3f3'
        pcface . drawString ( PC_FACE_MODERNDOS_8X16_FONT_LIST , ctx , 8 ,
                          [ 65 , 32 , 61 , 32 , 227 , 114 , 253 ] , 0 , 0 , 2 )
      } )
    </ script >
  </ head >
  < body >
    < canvas id =" canvas " > </ canvas >
  </ body >
</ html >

有關JavaScript API中所有功能的完整文檔，請參見JavaScript API文檔。

執照

原始字體

該項目中存檔的原始字體可根據字體開發人員（即

SRC/FONT/MODENEDOS/可根據CC0 1.0通用公共領域奉獻的條款獲得；
SRC/FONT/OLDSCHOOL/可根據創意共享歸因 - 共享4.0國際許可證的條款獲得。

現代dos位圖

您可以根據MIT許可或CC0 1.0通用公共領域奉獻的條款使用以下目錄的內容：

OUT/OUT/MODENEDOS-8X16/

Oldschool PC字體位圖

您可以根據GNU通用公共許可證V3或創意共享歸因 - 共享4.0國際許可證的條款使用以下目錄的內容：

OUT/OldSchool-Bios-8X8/
OUT/OldSchool-CGA-8X8/
OUT/OldSchool-Ega-8x14/
OUT/OldSchool-MDA-9X14/
OUT/OldSchool-Model30-8x16/
OUT/OldSchool-PGC-8X16/
OUT/OldSchool-Verite-8X16/
OUT/OldSchool-VGA-8X16/
OUT/OldSchool-VGA-9X14/
OUT/OldSchool-VGA-9X16/
src/demo.html
src/retro.html

原始碼

該項目中的所有其他文件（不包括上述三個小節中列出的文件）可根據MIT許可證的條款獲得。有關完整的許可文本，請參見License.MD。

支持

要報告錯誤，建議改進或提出問題，請引起問題。

頻道

該項目的作者在以下位置閒逛：

網站：Susam.net
Twitter：@susam
mastodon： @susam @mastodon.social
github：@susam
矩陣：#susam：matrix.org
IRC：#SUSAM：Libera.Chat

歡迎您訂閱，關注或加入上述一個或多個渠道，以接收作者的更新或詢問有關此項目的問題。

pcface

PC面

內容

資源

演示

快速演示

詳細的演示

位圖格式

字體詳細信息

現代dos字體

Oldschool PC字體

工具包使用

CLI

Python API

JavaScript API

執照

原始字體

現代dos位圖

Oldschool PC字體位圖

原始碼

支持

頻道

更多的

ACE太空射手遊

磷

ace動漫

漫畫臉應用程式

戰國ACE安裝

戰國ACE手機版

chat.petals.dev

GPT Prompt Templates

GPTyped

fedraserif

fontplayer

XiaoyaPixel

Google Dorks

shepherd

mongo express