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);
})
 日本