1. 제품
  2.   Font
  3.   Node.js
  4.   OpenType.js
 
  

무료 JavaScript 글꼴 파싱 및 쓰기를 위한 라이브러리

TrueType 또는 OpenType 글꼴을 파싱, 읽기 및 쓰기를 가능하게 하는 오픈 소스 JavaScript 라이브러리입니다. JS 앱 내에서 글꼴 처리, 글리프 메트릭 및 텍스트 레이아웃을 지원합니다.

소프트웨어 웹 개발 및 디지털 타이포그래피 분야에서 폰트 파일을 다루고 매끄러운 텍스트 렌더링 경험을 만드는 일은 어려운 과제일 수 있습니다. 특히 OpenType 폰트의 고급 타이포그래픽 기능에 접근해야 할 때는 더욱 그렇습니다. 이러한 문제를 해결해 주는 것이 OpenType.js입니다 – 브라우저에서 OpenType 폰트를 쉽게 다룰 수 있게 해주는 혁신적인 오픈소스 라이브러리입니다. OpenType.js의 주요 장점 중 하나는 OpenType 폰트를 다루는 과정을 단순화한다는 점입니다. 다른 라이브러리들이 폰트 기술에 대한 광범위한 지식을 요구하는 반면, OpenType.js는 시작하기 쉬운 직관적인 API를 제공합니다.

OpenType.js는 OpenType 글꼴의 고급 타이포그래피 기능에 접근하기 위한 간단하고 직관적인 API를 제공하는 JavaScript 라이브러리입니다. OpenType.js를 사용하면 소프트웨어 개발자가 합자(ligatures), 대체 글리프(alternate glyphs), 가변 글꼴(variable fonts) 등과 같은 기능을 쉽게 활용할 수 있어 복잡하고 정교한 타이포그래피 디자인을 만들 수 있습니다. 기존 글꼴을 파싱하고 조작하는 것 외에도, opentype.js는 처음부터 새로운 글꼴 파일을 생성하는 것도 지원합니다. 이 기능은 프로그래밍 방식으로 맞춤형 글꼴을 생성하려는 개발자에게 유용합니다. JavaScript 라이브러리인 opentype.js는 클라이언트 측과 서버 측 환경 모두에서 사용할 수 있어 다양한 프로젝트에 유연한 선택이 됩니다. 전반적으로, 브라우저에서 OpenType 글꼴을 다루는 간단하고 직관적인 방법을 제공하는 강력하고 다재다능한 라이브러리입니다.

Previous Next

Opentype.js 시작하기

OpenType.js를 설치하는 권장 방법은 NPM을 사용하는 것입니다. 원활한 설치를 위해 다음 명령어를 사용하십시오.

npm을 사용하여 Opentype.js 설치

 npm install opentype.js

수동으로 설치할 수도 있습니다; 최신 릴리스 파일을 GitHub 저장소에서 직접 다운로드하십시오.

Node.js 애플리케이션 내에서 폰트 파싱

OpenType.js의 핵심 기능 중 하나는 JavaScript 코드 몇 줄만으로 OpenType 및 TrueType 글꼴 파일을 파싱할 수 있는 능력입니다. 이를 통해 소프트웨어 개발자는 글꼴의 구조를 읽고 이해할 수 있으며, 여기에는 글리프, 커닝 정보 및 기타 필수 데이터가 포함됩니다. 다음 예제에서는 Roboto Regular 글꼴을 TTF 파일에서 로드합니다. 라이브러리는 글꼴을 파싱하여 데이터를 추가 조작에 사용할 수 있게 합니다.

Node.js 내부에서 TTF 파일로부터 폰트를 로드하고 파싱하는 방법은?

const opentype = require('opentype.js');

// Load a font from a file
opentype.load('fonts/Roboto-Regular.ttf', function(err, font) {
    if (err) {
        console.error('Font could not be loaded:', err);
    } else {
        console.log('Font loaded successfully:', font);
        console.log('Number of glyphs:', font.numGlyphs);
    }
});

Node.js에서 폰트 글리프에 접근 및 조작

오픈 소스 Node.js 라이브러리인 OpenType.js는 소프트웨어 개발자가 Node.js 애플리케이션 내에서 글꼴의 개별 글리프에 접근하고 조작할 수 있게 합니다. 글리프는 글꼴에서 문자에 대한 시각적 표현입니다. 이 기능을 사용하면 글리프 경로를 추출하고, 수정하거나 새로운 글리프를 만들 수도 있습니다. 아래는 글꼴을 로드하고, 문자 "A"에 대한 글리프를 가져온 다음, 해당 글리프를 원래 크기의 1.5배로 확대하는 코드 스니펫입니다. toPathData() 메서드는 글리프의 경로를 SVG 경로 데이터로 변환하며, 이는 렌더링이나 추가 조작에 사용할 수 있습니다.

Node.js 애플리케이션에서 폰트를 로드하고 글리프를 수정하는 방법은?

const opentype = require('opentype.js');

// Load a font and modify a glyph
opentype.load('fonts/Roboto-Regular.ttf', function(err, font) {
    if (err) {
        console.error('Font could not be loaded:', err);
    } else {
        const glyph = font.charToGlyph('A');
        console.log('Original Glyph Path:', glyph.path.toPathData());

        // Modify the glyph path (e.g., scale it)
        glyph.path.scale(1.5);
        console.log('Scaled Glyph Path:', glyph.path.toPathData());
    }
});

Node.js 라이브러리를 통한 폰트 테이블 작업

OpenType.js는 개발자에게 기본 폰트 테이블에 대한 접근을 제공하며, 이 테이블은 폰트 디자인 및 메트릭에 대한 상세 정보를 저장합니다. 이는 고급 폰트 조작이나 분석에 특히 유용할 수 있습니다. 다음 예제의 코드 스니펫은 head 테이블(폰트 헤더 정보를 포함) 및 hhea 테이블(수평 헤더 메트릭을 보유)과 같은 특정 폰트 테이블에 접근하는 방법을 보여줍니다. 이러한 테이블은 폰트 렌더링 및 레이아웃에 대한 정밀한 제어에 사용할 수 있는 필수 세부 정보를 제공합니다.

Node.js 라이브러리를 사용하여 특정 폰트 테이블 및 그 안의 폰트에 접근하는 방법은?

const opentype = require('opentype.js');

opentype.load('path/to/font.ttf', function(err, font) {
  if (err) {
    console.error('Font could not be loaded: ' + err);
  } else {
    // Access the 'head' table (font header)
    const headTable = font.tables.head;
    console.log('Units per Em: ' + headTable.unitsPerEm);

    // Access the 'hhea' table (horizontal header)
    const hheaTable = font.tables.hhea;
    console.log('Ascender: ' + hheaTable.ascender);
    console.log('Descender: ' + hheaTable.descender);
  }
});
 한국인