pcface 다운로드 - pcface 소스 코드 다운로드

pcface

글꼴 다운로드

0.3.0

다운로드

PC 얼굴

PC Face는 그래픽 캔버스에 CP437 문자를 그리는 프로그래머 친화적 인 리소스 모음입니다. 이 프로젝트는 원래 IBM PC OEM 글꼴을 재현하는 다양한 무료 글꼴을 사용하여 렌더링 된 CP437 문자 세트의 256 글리프에 대한 비트 맵 어레이를 제공합니다.

또한이 프로젝트에는 이러한 비트 맵을 생성하기위한 몇 가지 Python 기능과 그래픽 캔버스에서 이러한 비트 맵을 렌더링하는 몇 가지 JavaScript 기능이 포함되어 있습니다.

아마도 각 픽셀이 무엇인지 완전히 제어하고 싶은 복고풍 스타일의 게임을 만들고있을 것입니다. 또는 아마도 텍스트 배너를 만들기 위해 별표를 사용하여 CP437 글리프를 렌더링하려고합니다. 이 프로젝트에 제공된 비트 맵 어레이는 그러한 활동에 유용 할 수 있습니다. 사용 가능한 비트 맵 어레이는 화면의 픽셀로 번역되거나 표준 출력의 기호로 CP437 글리프를 렌더링 할 수 있습니다.

데모를 보려면 susam.github.io/pcface/를 방문하십시오.

내용물

자원
시민
- 빠른 데모
- 자세한 데모
비트 맵 형식
글꼴 세부 사항
- 현대식 도스 글꼴
- 올드 스쿨 PC 글꼴
툴킷 사용량
- 클리
- 파이썬 API
- JavaScript API
특허
- 원래 글꼴
- 현대적인 dos 비트 맵
- 구식 PC 글꼴 비트 맵
- 소스 코드
지원하다
채널
더

자원

이 프로젝트의 Out/ Directory에는 여러 파일이 제공됩니다. Susam.github.io/pcface/out/를 방문 하여이 파일을 찾아보십시오. 이 디렉토리에는 원래 IBM PC OEM 글꼴을 기반으로 다양한 자유 글꼴에 대한 여러 하위 디렉토리가 포함되어 있습니다. 각 글꼴 디렉토리에는 글꼴 용 비트 맵 어레이 및 몇 가지 다른 파일이 포함되어 있습니다. Modern-DOS-8X16 리소스 파일에 대한 링크는 이러한 리소스를 설명하면서 예제로 제공됩니다. 다음은 각 파일에 대한 간단한 설명입니다.

Out/Modern-Dos-8x16/fontlist.js : 비트 맵 어레이의 JavaScript 배열로 노출 된 CP437 문자로부터 256 개의 글리프의 비트 맵 표현. 각 비트 맵 배열은 CP437 문자의 비트 맵을 나타냅니다.
Out/ModernDos-8x16/fontmap.js : CP437 문자 세트에서 모든 CP437 문자를 비트 맵 어레이에 매핑하는 JavaScript 객체로 노출 된 모든 CP437 글리프의 비트 맵 표현.
Out/ModernDos-8x16/glyph.txt : 모든 CP437 글리프는 별표를 사용하여 나타납니다.
Out/ModernDos-8x16/Graph.txt : AT Symbol ( @ ) 및 Dots ( . )를 사용하여 표시되는 모든 CP437 글리프. 글리프의 각 행은 16 진수로 표시되는 행의 이진 코드로 접두사됩니다. 동일한 이진 코드는 위에서 언급 한 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의 각 비트 맵은 각 행에 8 개의 열이있는 16 행의 픽셀을 나타냅니다. 이 16 행은 각 글리프의 비트 맵에서 16 개의 정수로 표시됩니다. 예를 들어,이 글꼴을 사용하여 렌더링 된 대문자 'B'의 글리프는 다음과 같이 표시됩니다.

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

각 정수는 글리프의 모든 행에 대해 플로팅 해야하는 점을 나타냅니다. 처음에 정수 0x00 및 0x00 은 글리프의 상단 두 행이 비어 있음을 의미합니다. 그런 다음 0xfc (Binary 1111100 )는 세 번째 행의 첫 6 픽셀이 글꼴의 전경 색상으로 표시되고 마지막 두 픽셀은 비워 져 있음을 의미합니다. 이런 식으로 16 행의 픽셀을 그려야합니다.

다음은 이러한 비트 맵을 읽고 0 비트마다 도트 ( . )를 사용하여 표준 출력에 대한 글리프를 플롯하고 1 비트마다 AT 기호 ( @ )를 표시하는 예제 Python 코드입니다.

 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 섹션에 자세히 설명되어 있습니다.

이러한 기능을 참조하고 선택한 그래픽 툴킷을 위해 다른 프로그래밍 언어로 유사한 코드를 작성할 수 있어야합니다.

글꼴 세부 사항

현대식 도스 글꼴

이 프로젝트에는 Jayvee Enaguas가 개발 한 Modern DOS 8x16 글꼴 (버전 20190101.02)이 포함됩니다. 이 글꼴은 CC0 1.0 Universal Public Domain Downication의 조건에 따라 사용할 수 있습니다. 글꼴 사본은이 프로젝트의 SRC/Font/ModernDos/디렉토리에도 보관됩니다.

이 글꼴은 IBM PC의 IBM VGA 8X16 및 Verite 8x16 OEM 글꼴을 기반으로합니다. 이 글꼴의 일부 글리프는 IBM VGA 8X16의 글리프처럼 보이지만 일부는 Verite 8x16의 글리프처럼 보입니다. 그러나이 글꼴에는 두 개의 OEM 글꼴 중 어느 것도 일치하지 않는 여러 글리프가 있습니다. 대신 그들은 OEM 글꼴 중 하나 또는 둘 다에서 발견되는 글리프의 적응이된다.

제 생각에는이 글꼴에는 두 OEM 글꼴의 가장 좋은 부분이 포함되어 있습니다. 나는이 글꼴이 Verite의 슬래시 0을 갖는 것을 좋아한다. 나는 또한이 글꼴에 물려받은 Verite의 편지에 대한 더 웅장한 개요를 좋아합니다. Verite 8x16에서 많은 좋은 디자인을 물려 받지만 IBM VGA 8x16의 멋진 기능도 상속됩니다. 예를 들어, IBM VGA 8X16의 숫자 2의 숫자와 곡선 7의 곡선 스템이 있습니다.

올드 스쿨 PC 글꼴

이 프로젝트에는 Viler가 개발 한 몇 가지 Oldschool PC Fonts (버전 2.2)가 포함되어 있습니다. 이 글꼴은 Creative Commons Attribution-Sharealike 4.0 International License의 용어에 따라 제공됩니다. 이 글꼴의 사본은이 프로젝트의 SRC/Font/Oldschool/디렉토리에도 보관됩니다.

이 글꼴은 원래 IBM PC OEM 글꼴을 가능한 한 충실하게 재현하는 훌륭한 일을합니다. 그러나 이러한 글꼴은 원래의 글꼴의 사소한 오류를 교정하기 위해 사소한 방식으로 원래 OEM 글꼴과 다릅니다. 이러한 수정에 대한 자세한 내용은 Oldschool PC 문서의 FAQ를 참조하십시오.

툴킷 사용량

이 프로젝트의 주요 목적은 CP437 Glyphs에 비트 맵 어레이를 배포하는 것이지만,이 프로젝트는 이러한 비트 맵을 Python 및 JavaScript 기능으로 생성하고 테스트하는 작업 중 일부를 만듭니다. Python 함수는 또한 명령 줄 인터페이스 (CLI) 도구 형식으로 포장됩니다. 다음 하위 섹션은 Python 및 JavaScript 기능뿐만 아니라 CLI 도구에 대한 간단한 소개를 제공합니다.

클리

이 프로젝트가 제공하는 Python Command Line Interface (CLI) 도구를 사용하여 선택한 글꼴로 CP437 Glyphs 용 비트 맵 어레이를 생성 할 수 있습니다. 다음 단계는이 프로젝트에 포함되지 않은 글꼴 인 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 "

가상 파이썬 환경을 만들고 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/
```
출력 디렉토리 이름 H WxH 형식으로 표현 된 각 출력 글리프의 W 로 끝나야합니다. -s 옵션은 글꼴 크기를 지정합니다. 원하는 치수의 글리프로 이어지는 글꼴 크기로 설정해야합니다. -s 옵션이 생략되면 H 의 글꼴 크기가 사용됩니다. 여기서 H 는 출력 디렉토리 이름에서 읽기 한 글리프 높이인데, 이는 항상 올바른 글리프 차원을 생성하지 못할 수 있습니다.
이제 동일한 글꼴에 대해 비트 맵 어레이를 만들지 만 글리프 너비와 높이가 두 배로 늘어납니다.
```
venv/bin/pcface -s 32 Px437_IBM_EGA_9x14.ttf oldschool-ega-18x28/
```

출력 디렉토리에는 이제 비트 맵 어레이가 포함 된 JavaScript 파일과 Glyph를 설명하는 몇 가지 다른 파일이 포함됩니다. 이 파일에 대한 간단한 설명은 섹션 리소스를 참조하십시오.

파이썬 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 "

가상 파이썬 환경을 만들고 PC 얼굴을 설치하십시오.
```
python3 -m venv venv
venv/bin/pip3 install pcface
```

이제이 파이썬 스크립트를 작성하여 파일에 저장 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

다음은 PC 얼굴과 글꼴 맵을 CDN에서 웹 페이지로로드하여 사용하는 방법을 보여주는 최소 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/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 문서를 참조하십시오.

특허

원래 글꼴

이 프로젝트에 보관 된 원래 글꼴은 글꼴 개발자 (IE)가 선택한 Orignal 라이센스의 용어로 제공됩니다.

SRC/Font/ModernDOS//CC0 1.0 Universal Public Domain 헌신의 용어에 따라 사용할 수 있습니다.
SRC/Font/Oldschool/는 Creative Commons Attribution-Sharealike 4.0 International License의 조건에 따라 제공됩니다.

현대적인 dos 비트 맵

MIT 라이센스 또는 CC0 1.0 Universal Public Domain 전용의 용어에 따라 다음 디렉토리의 내용을 사용할 수 있습니다.

out/out/moderndos-8x16/

구식 PC 글꼴 비트 맵

GNU General Public License V3 또는 Creative Commons Attribution-Sharealike 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
트위터 : @susam
Mastodon : @susam @mastodon.social
github : @susam
매트릭스 : #susam : matrix.org
IRC : #susam : libera.chat

위의 채널 중 하나 이상을 구독, 팔로우 또는 가입하여 저자로부터 업데이트를 받거나이 프로젝트에 대한 질문을 할 수 있습니다.

더

이 프로젝트에서 사용할 수있는 최신 DOS 8x16 비트 맵의 작은 부분 집합이 게임 캔버스에서 텍스트를 렌더링하는 데 사용 된 Andromeda Invaders를 참조하십시오.

확장하다

추가 정보

버전 0.3.0
유형 글꼴 다운로드
업데이트 시간 2025-07-31
크기 429.39KB
출처 Github

pcface

PC 얼굴

내용물

자원

시민

빠른 데모

자세한 데모

비트 맵 형식

글꼴 세부 사항

현대식 도스 글꼴

올드 스쿨 PC 글꼴

툴킷 사용량

클리

파이썬 API

JavaScript API

특허

원래 글꼴

현대적인 dos 비트 맵

구식 PC 글꼴 비트 맵

소스 코드

지원하다

채널

더

ACE 우주 슈팅 게임

피

애니메이션

코믹페이스 앱

전국시대 ACE 설치

전국시대 ACE 모바일 버전

chat.petals.dev

GPT Prompt Templates

GPTyped

fedraserif

fontplayer

XiaoyaPixel

Google Dorks

shepherd

mongo express