1. 製品
  2.   Font
  3.   JavaScript
  4.   Typr.js
 
  

フォントの解析とレンダリングのための無料 JavaScript ライブラリ

ブラウザ上で TrueType および OpenType フォントの解析とレンダリングを直接サポートするオープンソース JavaScript フォント処理ライブラリです。

ウェブおよびソフトウェア開発の領域では、タイポグラフィは全体的なユーザー体験を形作る上で重要な役割を果たします。フォントを効率的に操作・レンダリングするために、開発者はプロセスを簡素化する堅牢なライブラリに依存しています。そのようなライブラリの一つが Typr.js で、フォントのパースとレンダリング専用に設計された強力な JavaScript ライブラリです。軽量に設計されており、ウェブプロジェクトへの迅速な統合が可能です。このライブラリは Chrome、Firefox、Safari、Edge など主要なウェブブラウザすべてをサポートしています。これにより、さまざまなプラットフォームやデバイス間で一貫したフォントレンダリングが保証されます。

Typr.js は、さまざまなタイプのフォントファイルを扱うための軽量で多用途なソリューションをソフトウェア開発者に提供する、強力なオープンソースの JavaScript ライブラリです。TrueType および OpenType フォントの解析とレンダリングをブラウザ上で直接行えるため、サーバー側の処理が不要になります。これにより、Typr.js はウェブデザイナーや開発者がウェブサイト上のタイポグラフィを最適化したい場合に欠かせないツールとなります。このライブラリは、テキストの拡大縮小、文字間隔の調整、カスタムフォントのロードなど、アクセシビリティ機能の実装を完全にサポートし、さまざまなニーズを持つユーザーに対応します。

Typr.js は非常に扱いやすく、シンプルなテキスト表示からより複雑なタイポグラフィ関連プロジェクトまで、さまざまなウェブアプリケーションで使用できます。フォントの読み込みや管理、フォントからさまざまなメトリクスの解析・抽出、オンラインでのテキスト操作やスタイリング、国際化・ローカリゼーションのサポート、先進的なタイポグラフィなど、豊富な機能を備えています。その豊かな機能セット、軽量さ、クロスブラウザ互換性により、ウェブ上のタイポグラフィを向上させるための貴重なツールとなっています。

Previous Next

Typr.js の使い方

Typr.js をインストールする推奨方法は npm を使用することです。プロジェクトに Maven 依存関係を追加するには、以下のコマンドを使用してください。

npm を使用して Typr.js をインストール

 npm install @fredli74/typr --save-dev

手動でインストールすることも可能です。最新のリリースファイルは GitHub リポジトリから直接ダウンロードしてください。

JavaScript API を使用したフォントの読み込みと管理

オープンソースの Typr.js は、JavaScript アプリケーション内でフォントの読み込みと管理を完全にサポートしています。ウェブページ上でのフォントの読み込みと管理のプロセスを簡素化します。TrueType（TTF）、OpenType（OTF）、Web Open Font Format（WOFF）など、さまざまなフォント形式に対応しており、開発者はカスタムフォントをプロジェクトにシームレスに統合できます。便利なフォント管理インターフェースを提供することで、Typr.js は開発者がフォントの読み込みを効率的に制御し、パフォーマンス最適化のためにフォントサブセットの優先順位付けを行えるようにします。

SVG カラーフォント解析のための SVG テーブルパーサーを追加

Typr.SVG = {};
Typr.SVG.parse = function(data, offset, length)
{
  var bin = Typr._bin;
  var obj = { entries: []};

  var offset0 = offset;

  var tableVersion = bin.readUshort(data, offset);  offset += 2;
  var svgDocIndexOffset = bin.readUint(data, offset);  offset += 4;
  var reserved = bin.readUint(data, offset); offset += 4;

  offset = svgDocIndexOffset + offset0;

  var numEntries = bin.readUshort(data, offset);  offset += 2;

  for(var i=0; i < numEntries ; i++)
  {
    var startGlyphID = bin.readUshort(data, offset);  offset += 2;
    var endGlyphID = bin.readUshort(data, offset);  offset += 2;
    var svgDocOffset = bin.readUint(data, offset);  offset += 4;
    var svgDocLength = bin.readUint(data, offset); offset += 4;

    var svg = bin.readASCII(data, offset0 + svgDocOffset + svgDocIndexOffset, svgDocLength);

    for(var f=startGlyphID; f<=endGlyphID; f++){
      obj.entries[f] = svg;
    }
  }

  return obj;

}

JavaScript API を使用したテキストの書式設定とスタイリングの適用

オープンソースの Typr.js ライブラリは、ソフトウェア開発者が JavaScript アプリケーション内でさまざまなテキストフォーマットを簡単に適用できるようにします。Typr.js を使用すれば、開発者はウェブページ上のテキストを手間なく操作・スタイル設定できます。改行、テキストの両端揃え、ハイフネーションなどのテキストレイアウト機能を幅広く提供し、テキストの表示方法を精密にコントロールできます。さらに、文字間隔、単語間隔、テキスト装飾など、多彩なテキストスタイリングオプションにも対応しており、開発者は視覚的に魅力的で読みやすいテキストを作成できます。

JavaScript アプリ内でテキストの書式設定とスタイリングを適用

// Assume that Typr.js library is already loaded

// Define the target element where the text will be formatted and styled
const targetElement = document.getElementById('myTextElement');

// Load and parse the font file using Typr.js
Typr.loadFont('path/to/font.ttf', (font) => {
  // Font loading is complete
  
  // Apply the loaded font to the target element
  targetElement.style.fontFamily = font.name.fontFamily;

  // Set text content for the target element
  targetElement.textContent = 'Hello, Typr.js!';

  // Apply text styling
  targetElement.style.fontSize = '24px';
  targetElement.style.letterSpacing = '2px';
  targetElement.style.wordSpacing = '4px';
  targetElement.style.textDecoration = 'underline';

  // Additional text layout adjustments
  targetElement.style.textAlign = 'center';
  targetElement.style.lineHeight = '1.5';
  targetElement.style.textJustify = 'inter-word';
});

JavaScript API を使用したカーニングとリガチャ

Typr.js は、ソフトウェア開発者がカーニングやリガチャなどの高度な組版機能を活用し、テキストの視覚的魅力を高めることを可能にします。カーニングは特定の文字ペア間の間隔を調整して全体的な可読性を向上させ、リガチャは文字列を視覚的に美しい代替形に置き換えます。これらの機能を活用することで、開発者はウェブ上でより洗練された調和の取れたタイポグラフィを実現できます。

 日本