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 を使用すれば、ソフトウェア開発者はリガチャや代替グリフ、可変フォントなどの機能に簡単にアクセスでき、複雑で洗練されたタイポグラフィデザインを作成できます。既存のフォントを解析・操作するだけでなく、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);
  }
});
 日本