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

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

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

광활한 웹 디자인 및 개발의 왕국에서 타이포그래피는 전체 사용자 경험을 형성하는 데 핵심적인 역할을 합니다. 그러나 웹에서 타이포그래피를 다루는 데는 자체적인 어려움이 있습니다. 다행히도 오픈소스 JavaScript 라이브러리인 opentype.js가 등장하여 소프트웨어 개발자들이 웹 애플리케이션에서 타이포그래피를 조작하고 그 잠재력을 활용할 수 있는 강력한 도구가 되었습니다. 이 라이브러리는 간단하고 직관적인 API를 제공하여 모든 수준의 개발자가 쉽게 사용할 수 있게 합니다. 또한 개발자에게 특정 디자인 요구에 맞게 타이포그래피를 맞춤화하고 적용할 수 있는 유연성을 제공합니다.

Opentype.js는 다양한 최신 웹 브라우저에서 작동하여 타이포그래피 기능 구현을 위한 신뢰할 수 있고 일관된 솔루션을 제공합니다. 라이브러리에는 견고한 폰트 파싱 메커니즘, 폰트 내 개별 글리프와 상호 작용, 복잡한 텍스트 레이아웃 지원, 다양한 폰트 렌더링, 크로스 브라우저 호환성, 상세 폰트 데이터 추출, 고급 텍스트 레이아웃 지원, 개별 글리프 애니메이션 등 여러 중요한 기능이 포함되어 있습니다. 기존 웹 기술과 원활하게 통합되며 HTML5 캔버스, SVG와 함께 사용하거나 CSS 및 JavaScript 프레임워크와 결합할 수도 있습니다.

Opentype.js는 웹 개발자가 널리 사용되는 글꼴 형식인 OpenType 글꼴을 다룰 수 있게 해주는 오픈 소스 JavaScript 라이브러리입니다. OpenType 글꼴은 리가처, 커닝, 글리프 대체와 같은 고급 타이포그래피 기능을 제공하여 텍스트의 시각적 매력과 가독성을 크게 향상시킵니다. opentype.js를 활용하면 소프트웨어 개발자는 이러한 기능을 활용하고 OpenType 글꼴의 기본 데이터를 접근할 수 있어 웹에서 동적이고 인터랙티브한 타이포그래피 경험을 만들 수 있습니다. 타이포그래피 세부 사항을 미세 조정하거나 복잡한 타이포그래피 애니메이션을 만들든, OpenType.js는 디지털 영역에서 타이포그래피 예술에 열정을 가진 모든 사람에게 귀중한 도구입니다.

Previous Next

Opentype.js 시작하기

Opentype.js를 설치하는 권장 방법은 npm을 사용하는 것입니다. 프로젝트에 Maven 의존성을 추가하려면 다음 명령을 사용하십시오.

npm을 통해 Opentype.js 설치

 npm install opentype.js

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

JavaScript API를 통한 글꼴 데이터 접근

OpenType.js의 주요 기능 중 하나는 몇 줄의 JavaScript 코드만으로 상세한 글꼴 데이터를 추출할 수 있다는 점입니다. 오픈 소스 Opentype.js 라이브러리는 JavaScript 애플리케이션 내에서 글꼴 관련 데이터를 로드하고 접근하는 완전한 기능을 제공했습니다. 개발자는 글꼴 이름, 디자이너 정보, 글리프 형태, 커닝 페어 등 다양한 속성에 접근할 수 있습니다. 이러한 정보는 타이포그래피에 대한 정밀한 제어를 가능하게 하고 창의적인 실험을 촉진합니다. 다음 예제는 JavaScript 명령을 사용하여 글꼴 관련 데이터를 로드하고 표시하는 방법을 보여줍니다.

JavaScript 앱 내에서 글꼴 관련 데이터를 표시하는 방법은?

function displayFontData() {
    document.getElementById("font-data").innerHTML = JSON.stringify(font.tables, null, 4);
	var html, tablename, table, property, value;
	for(tablename in font.tables) {
		table = font.tables[tablename];
		html = '';
		for(property in table) {
			value = table[property];
			html += '
'+property+'
';
			html += value;
			html += '
';
		}
		document.getElementById(tablename+"-table").innerHTML = html;
	}
}

function onFontLoaded(font) {
@@ -331,6 +384,13 @@ 
무료 소프트웨어

fontSizeSlider.addEventListener('input', fontSizeChanged, false);
fontSizeSlider.addEventListener('change', fontSizeChanged, false);

var tableHeaders = document.getElementById('font-data').getElementsByTagName('h3');
for(var i = tableHeaders.length; i--; ) {
	tableHeaders[i].addEventListener('click', function(e) {
		e.target.className = (e.target.className === 'collapsed') ? 'expanded' : 'collapsed';
	}, false);
}

opentype.load(fontFileName, function (err, font) {
    var amount, glyph, ctx, x, y, fontSize;
    if (err) {
        showErrorMessage(err.toString());
        return;
    }
    onFontLoaded(font);
});

JavaScript 앱 내에서 글꼴 열기 및 구문 분석

오픈 소스 Opentype.js 라이브러리는 소프트웨어 개발자가 자체 JavaScript 애플리케이션 내에서 다양한 유형의 글꼴을 로드하고 변환할 수 있도록 합니다. 이 라이브러리는 강력한 글꼴 파싱 메커니즘을 제공하여 개발자가 OpenType(WOFF, OTF, TTF) 글꼴 파일을 웹 애플리케이션에 로드할 수 있게 합니다. 글꼴이 로드되면 개발자는 글리프 형태, 메트릭, 메타데이터와 같은 다양한 글꼴 속성을 접근하고 조작할 수 있습니다. 다음 예제는 JavaScript 앱 내에서 WOFF, OTF, TTF와 같은 다양한 유형의 글꼴을 로드하는 방법을 보여줍니다.

JavaScript API를 통해 WOFF 또는 TTF 글꼴을 로드하는 방법은?

// case 1: from an URL
const buffer = fetch('/fonts/my.woff').then(res => res.arrayBuffer());
// case 2: from filesystem (node)
const buffer = require('fs').promises.readFile('./my.woff');
// case 3: from an 
const buffer = document.getElementById('myfile').files[0].arrayBuffer();

// if running in async context:
const font = opentype.parse(await buffer);
console.log(font);

// if not running in async context:
buffer.then(data => {
    const font = opentype.parse(data);
    console.log(font);
})
 한국인