ブラウザまたはnode.jsからテキストの文字形式にアクセスできます。
ライブデモについては、https://opentype.js.org/を参照してください。
glyfとPostScript cff概要を備えています)次の例で、次のソースのいずれかを選択します。
<!-- using global declaration -->
< script src =" https://your.favorite.cdn/opentype.js " > </ script >
< script > opentype . parse ( ... ) </ script >
<!-- using module declaration (need full path) -->
< script type = module >
import { parse } from "https://unpkg.com/opentype.js/dist/opentype.mjs" ;
parse ( ... ) ;
</ script >npm install opentype.js const opentype = require ( 'opentype.js' ) ;
import opentype from 'opentype.js'
import { load } from 'opentype.js'TypeScriptを使用していますか?この例を参照してください
Opentype.jsの改善またはデバッグを計画している場合は、次のことができます。
git clone git://github.com/yourname/opentype.js.gitクローンしますcd opentype.jsに移動しますnpm installで必要な依存関係をインストールしますnpm run build使用してくださいnpm run start 、 /docsフォルダーに移動しますnpm run testですべてが正常に動作するかどうかを確認してくださいこれは2つのステップで行われます。最初に、フォントファイルをArrayBufferにロードします...
// either from an URL
const buffer = fetch ( '/fonts/my.woff' ) . then ( res => res . arrayBuffer ( ) ) ;
// ... or from filesystem (node)
const buffer = require ( 'fs' ) . promises . readFile ( './my.woff' ) ;
// ... or from an <input type=file id=myfile> (browser)
const buffer = document . getElementById ( 'myfile' ) . files [ 0 ] . arrayBuffer ( ) ; ...その後、 .parse()それをFontインスタンスに入れます
// 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 ) ;
} )Woff2 Brotli圧縮は、前身よりも29%優れたパフォーマンスを発揮します。しかし、この圧縮はより複雑であり、はるかに重い(> 10×!)opentype.jsライブラリ(≈120kb=>≈1400kb)になります。
これを解決するには:フォントを事前に解凍します(たとえば、Fontello/Wawoff2で)。
// promise-based utility to load libraries using the good old <script> tag
const loadScript = ( src ) => new Promise ( ( onload ) => document . documentElement . append (
Object . assign ( document . createElement ( 'script' ) , { src , onload } )
) ) ;
const buffer = //...same as previous example...
// load wawoff2 if needed, and wait (!) for it to be ready
if ( ! window . Module ) {
const path = 'https://unpkg.com/[email protected]/build/decompress_binding.js'
const init = new Promise ( ( done ) => window . Module = { onRuntimeInitialized : done } ) ;
await loadScript ( path ) . then ( ( ) => init ) ;
}
// decompress before parsing
const font = opentype . parse ( Module . decompress ( await buffer ) ) ;また、各グリフベジエパスを定義することにより、フォントをゼロから作成することもできます。
// this .notdef glyph is required.
const notdefGlyph = new opentype . Glyph ( {
name : '.notdef' ,
advanceWidth : 650 ,
path : new opentype . Path ( )
} ) ;
const aPath = new opentype . Path ( ) ;
aPath . moveTo ( 100 , 0 ) ;
aPath . lineTo ( 100 , 700 ) ;
// more drawing instructions...
const aGlyph = new opentype . Glyph ( {
name : 'A' ,
unicode : 65 ,
advanceWidth : 650 ,
path : aPath
} ) ;
const font = new opentype . Font ( {
familyName : 'OpenTypeSans' ,
styleName : 'Medium' ,
unitsPerEm : 1000 ,
ascender : 800 ,
descender : - 200 ,
glyphs : [ notdefGlyph , aGlyph ] } ) ;Fontオブジェクトが(クラフトまたは.parse()から)を取得したら、ファイルとして保存できます。
// using node:fs
fs . writeFileSync ( "out.otf" , Buffer . from ( font . toArrayBuffer ( ) ) ) ;
// using the browser to createElement a <a> that will be clicked
const href = window . URL . createObjectURL ( new Blob ( [ font . toArrayBuffer ( ) ] ) , { type : "font/opentype" } ) ;
Object . assign ( document . createElement ( 'a' ) , { download : "out.otf" , href } ) . click ( ) ;フォントは、ロードされたOpentypeフォントファイルを表します。描画コンテキストにテキストを描画するか、テキストを表すパスを取得するためのグリフと方法のセットが含まれています。
glyphs :Glyphオブジェクトのインデックス付きリスト。unitsPerEm :フォント内のx/y座標は整数として保存されます。この値は、グリッドのサイズを決定します。共通の値は2048および4096です。ascender :最高のアセンダーのベースラインからの距離。ピクセルではなく、フォントユニットで。descender :最も低いセンダーのベースラインからの距離。ピクセルではなく、フォントユニットで。 Font.getPath(text, x, y, fontSize, options)指定されたテキストを表すパスを作成します。
x :テキストの開始の水平位置。 (デフォルト: 0 )y :テキストのベースラインの垂直位置。 (デフォルト: 0 )fontSize :ピクセル単位のテキストのサイズ(デフォルト: 72 )。options : {glyphrenderoptions}各グリフに渡されました。以下を参照してくださいオプションは、オプションの{glyphrenderoptions}オブジェクトです。
script :適用する機能を決定するために使用されるスクリプト(デフォルト: "DFLT"または"latn" )language :適用する機能を決定するために使用される言語システム(デフォルト: "dflt" )kerning :TrueがKerning情報を考慮した場合(デフォルト: true )features :OpenType機能タグをキーとして機能させ、各機能を有効にするためのブール値を備えたオブジェクト。現在、 "liga"と"rlig"のみがサポートされています(デフォルト: true )。hinting :Trueが利用可能な場合はTrueTypeフォントヒントを使用する場合(デフォルト: false )。colorFormat :フォーマット色はレンダリング用に変換されます(デフォルト: "hexa" )。 rgb() / rgba()出力の"rgb" / "rgba" 、6 /8桁のヘックス色の"hex" / "hexa" 、またはhsl() / hsla()出力の"hsl" / "hsla"にすることができます。 "bgra" 、r、g、b、aキー(0-255からのr/g/b、0-1)でオブジェクトを出力します。 "raw" CPALテーブルで使用される整数を出力します。fill :フォントの色、各グリフをレンダリングするために使用される色(デフォルト: "black" )注:同じ引数を持つFont.getPaths()もあり、パスのリストを返します。
Font.draw(ctx, text, x, y, fontSize, options)指定されたテキストを表すパスを作成します。
ctx :Canvasのような2D描画コンテキスト。x :テキストの開始の水平位置。 (デフォルト: 0 )y :テキストのベースラインの垂直位置。 (デフォルト: 0 )fontSize :ピクセル単位のテキストのサイズ(デフォルト: 72 )。options : {glyphrenderoptions}各グリフに渡された、 Font.getPath()を参照してくださいオプションは、以下を含むオプションのオブジェクトです。
kerning : trueなら、カーニング情報を考慮してください(デフォルト: true )features :OpenType機能タグをキーとして機能させ、各機能を有効にするためのブール値を備えたオブジェクト。現在、 "liga"と"rlig"のみがサポートされています(デフォルト: true )。hinting :Trueが利用可能な場合はTrueTypeフォントヒントを使用する場合(デフォルト: false )。 Font.drawPoints(ctx, text, x, y, fontSize, options)テキストにすべてのグリフのポイントを描きます。カーブ上のポイントは青色で描かれ、カーブオフカーブポイントは赤で描かれます。引数はFont.draw()と同じです。
Font.drawMetrics(ctx, text, x, y, fontSize, options)テキスト内のすべてのグリフの重要なフォント測定を示す線を描画します。黒い線は、座標系の起源を示しています(ポイント0,0)。青い線は、グリフ境界ボックスを示しています。緑色のラインは、グリフの前進幅を示します。
Font.stringToGlyphs(string)文字列をグリフオブジェクトのリストに変換します。結晶などの置換の可能性があるため、弦とグリフリストの間に厳密な1対1の対応はないことに注意してください。返されたグリフのリストは、指定された文字列の長さよりも大きいまたは小さい場合があります。
Font.charToGlyph(char)キャラクターをグリフオブジェクトに変換します。グリフが見つからなかった場合はnullを返します。この関数は、指定された文字とグリフの間に1対1のマッピングがあることを前提としていることに注意してください。複雑なスクリプトの場合、そうではないかもしれません。
Font.getKerningValue(leftGlyph, rightGlyph)左グリフ(またはそのインデックス)と右グリフ(またはそのインデックス)の間のカーニングペアの値を取得します。カーニングペアが見つからない場合は、 0を返します。グリフ間の間隔を計算すると、カーニング値がアドバンス幅に追加されます。
Font.getAdvanceWidth(text, fontSize, options)テキストのアドバンス幅を返します。
これはPath.getBoundingBox()とは異なるものです。たとえば、接尾辞付きの白人は前幅を増加させますが、境界ボックスや書道の「F」のような張り出しの文字は、前進幅よりも非常に大きな境界ボックスを持っている可能性があります。
これはcanvas2dContext.measureText(text).widthに対応します
fontSize :ピクセル単位のテキストのサイズ(デフォルト: 72 )。options : {glyphrenderoptions} 、 Font.getPath()を参照してくださいFont.palettesオブジェクト( PaletteManager )これにより、テーブルを手動で変更することなく、CPALテーブルのパレットと色を管理できます。
Font.palettes.add(colors)新しいパレットを追加します。
colors :(オプション)パレットに追加する色、既存のパレットへの違いはデフォルト値で満たされます。 Font.palettes.delete(paletteIndex)ゼロベースのインデックスでパレットを削除します
paletteIndex :ゼロベースのパレットインデックスFont.palettes.deleteColor(colorIndex, replacementIndex)すべてのパレットの特定の色インデックスを削除し、その色を使用してすべてのレイヤーを交換インデックスに現在保持している色で更新します
colorIndex :削除する必要がある色のインデックスreplacementIndex :色の色のインデックス(削除前のパレットに従って)は、削除するために色を使用してレイヤーに置き換えますFont.palettes.cpal()フォントのCPALテーブルを返し、存在しない場合はfalseを返します。内部で使用されます。
Font.palettes.ensureCPAL(colors)主に内部で使用されます。 CPALテーブルが存在するか、デフォルト値が入力されていることを確認します。
colors :(オプション)創造に入力する色は、作成された場合にtrue戻ります。既に存在している場合はfalse 。 Font.palettes.extend(num)既存のすべてのパレットとNumpaletteentriesの値を多くの色のスロットで拡張します
num :すべてのパレットに追加する追加のカラースロットの数Font.palettes.fillPalette(palette, colors, colorCount)特定のカウントまで、デフォルトの色の値に戻る、パレットの色のセット(パレットインデックス、または提供されたCPAL色の値の配列)を色のセットで埋めます。既存のパレットを変更せず、代わりに新しい配列を返します!必要に応じて、代わりにFont.palettes.setColor()を使用します。
palette :パレットインデックスまたはパレットを埋めるためのCPAL色の値の配列、残りはデフォルトの色で満たされますcolors : {glyphrenderoptions}のcolorFormatの出力としてサポートされている形式で、パレットを埋めるための色の値の配列、 Font.getPath()を参照してください。 CSSカラー名もブラウザのコンテキストでサポートされています。colorCount :パレットを満たすための色の数は、デフォルトでNumpaletteentriesフィールドの値になりますFont.palettes.getAll(colorFormat)オプションで指定された色形式で、各パレットの色値の配列を返します
colorFormat :(オプション) {glyphrenderoptions} at Font.getPath() 、(デフォルト: "hexa" )を参照してください。 Font.palettes.getColor(index, paletteIndex, colorFormat)ゼロベースのインデックスで特定のパレットを取得します
index :パレット内の色のゼロベースのインデックスpaletteIndex :ゼロベースのパレットインデックス(デフォルト:0)colorFormat :(オプション) {glyphrenderoptions} at Font.getPath() 、(デフォルト: "hexa" )を参照してください。 Font.palettes.get(paletteIndex, colorFormat)ゼロベースのインデックスで特定のパレットを取得します
paletteIndex :ゼロベースのパレットインデックスcolorFormat :(オプション) {glyphrenderoptions} at Font.getPath() 、(デフォルト: "hexa" )を参照してください。 Font.palettes.setColor(index, colors, paletteIndex)ゼロベースのインデックスによって特定のパレットに1つ以上の色を設定します
index :ゼロベースの色インデックスから充填を開始しますcolor : {glyphrenderoptions}のcolorFormatの出力としてサポートされている色表記の色値または色の値の配列、 Font.getPath()を参照してください。 CSSカラー名もブラウザのコンテキストでサポートされています。paletteIndex :ゼロベースのパレットインデックス(デフォルト:0) Font.palettes.toCPALcolor(color)カラー値の文字列をCPAL整数の色値に変換します
color : {glyphrenderoptions}のcolorFormatの出力としてサポートされている色表記の文字列、 Font.getPath()を参照してください。 CSSカラー名もブラウザのコンテキストでサポートされています。 Font.layersオブジェクト( LayerManager )これにより、テーブルを手動で変更することなく、Colrテーブルのカラーグリフ層を管理できます。
Font.layers.add(glyphIndex, layers, position)最後に、または特定の位置に、1つ以上のレイヤーをグリフに追加します。
glyphIndex :レイヤーを追加するGlyphインデックス。layers :レイヤーオブジェクト{glyph、paletteindex}/{glyphid、paletteindex}またはレイヤーオブジェクトの配列。position :レイヤーを挿入する位置(デフォルトは最後に追加されます)。 Font.layers.ensureCOLR()主に内部で使用されます。 Colrテーブルが存在し、デフォルト値が入力されていることを確認します。
Font.layers.get(glyphIndex)特定のグリフの層を取得します
glyphIndex {glyph, paletteIndex}レイヤーオブジェクトの配列を返します。 Font.layers.remove(glyphIndex, start, end = start)グリフから1つ以上のレイヤーを削除します。
glyphIndex :glyphインデックスからレイヤーを削除しますstart :インデックスでレイヤーを削除しますend :(オプション)提供されている場合は、すべてのレイヤーを開始インデックスから(および含める)エンドインデックスに削除しますFont.layers.setPaletteIndex(glyphIndex, layerIndex, paletteIndex)Color Glyph LayerのPaletteIndexプロパティを新しいインデックスに設定します
glyphIndex :ゼロベースのグリフインデックスによるフォントのグリフlayerIndex :ゼロベースのレイヤーインデックスによるグリフのレイヤーpaletteIndex :任意のパレットのゼロベースのインデックスでレイヤーに設定する新しい色Font.layers.updateColrTable(glyphIndex, layers)主に内部で使用されます。 Colrテーブルを更新し、必要に応じてBaseGlyphRecordを追加し、正しい位置に挿入され、Numlayersを更新し、削除または挿入に従ってすべてのBaseGlyPhRecordのFirstLayerIndex値を調整します。
Font.variationオブジェクト( VariationManager ) VariationManager 、OpenType Fontバリエーションテーブルを使用して可変フォントプロパティを処理します。
Font.variation.activateDefaultVariation()バリエーションデータをフォントのデフォルトレンダリングオプションとして設定することにより、デフォルトのバリエーションをアクティブにします。使用可能な場合はデフォルトインスタンスを使用します。それ以外の場合、デフォルトはすべての軸の座標になります。
Font.variation.getDefaultCoordinates()フォントのバリエーション軸のデフォルト座標を返します。
Font.variation.getDefaultInstanceIndex()デフォルトのバリエーションインスタンスのインデックスを決定して返します。決定できない場合は-1を返します。
-1を表す整数。 Font.variation.getTransform(glyph, coords) Font.variation.process.getTransform()のショートカット。
Font.variation.getInstanceIndex(coordinates)提供された座標に一致するバリエーションインスタンスのインデックス、または一致しない場合は-1インデックスを見つけます。
coordinates :軸タグをキーとしてのオブジェクトと対応する値としての変動値。-1 。 Font.variation.getInstance(index)ゼロベースのインデックスで特定のバリエーションインスタンスを取得します。
index :バリエーションインスタンスのゼロベースのインデックス。null 。 Font.variation.set(instanceIdOrObject)フォントのデフォルトレンダリングオプションでのレンダリングにデフォルトで使用するバリエーション座標を設定します。
instanceIdOrObject :バリエーションインスタンスのゼロベースのインデックスまたはバリエーション値に軸をマッピングするオブジェクトのいずれか。 Font.variation.get()フォントのデフォルトレンダリングオプションから現在のバリエーション設定を取得します。
Font.variation.processオブジェクト( VariationProcessor ) VariationProcessor VariationManagerのコンポーネントであり、主に変数フォントのグリフにバリエーションを計算および適用するために内部で使用されます。フォントの可変軸とインスタンスに基づいて、変換と調整を処理します。
Font.variation.process.getNormalizedCoords(coords)現在の設定に基づいて、変動軸の正規化された座標を返します。
coords :座標はオブジェクトを正常化します(またはデフォルトでフォントのdefaultRenderOptionsのバリエーション座標)Font.variation.process.interpolatePoints(points, deltas, scalar)提供されたデルタとスカラー値に基づいてポイントを補間します。
points :元のポイントの配列。deltas :ポイントデルタの配列。scalar :補間のスカラー値。Font.variation.process.deltaInterpolate(original, deltaValues, scalar)元の値、デルタ、およびスカラーが与えられた単一ポイントの補間値を計算します。
original :ポイントの元の値。deltaValues :ポイントのデルタ値の配列。scalar :補間のスカラー値。Font.variation.process.deltaShift(points, deltas)デルタ値をシフトポイントに適用します。
points :元のポイントの配列。deltas :適用するデルタの配列。Font.variation.process.transformComponents(components, transformation)指定された変換マトリックスを使用して、グリフのコンポーネントを変換します。
components :グリフのコンポーネント。transformation :適用する変換マトリックス。Font.variation.process.getTransform(glyph, coords)提供されたバリエーション座標に基づいてグリフの変換されたコピー、またはバリエーションが適用されなかった場合はグリフ自体を取得します
glyph :変換するグリフのグリフまたはインデックス。coords :バリエーション座標オブジェクト(またはデフォルトでフォントのdefaultRenderOptionsのバリエーション座標)opentype.Glyph Font.variation.process.getVariableAdjustment(adjustment)特定の調整パラメーターの変数調整を計算します。
adjustment :調整パラメーター。Font.variation.process.getDelta(deltas)現在のバリエーション設定に基づいて、デルタのコレクションから適切なデルタ値を選択します。
deltas :デルタ値のコレクション。Font.variation.process.getBlendVector()現在の設定に基づいて、補間のブレンドベクトルを計算します。
グリフは、しばしばキャラクターに対応する個々のマークです。ライガチュアなどのいくつかのグリフは、多くのキャラクターの組み合わせです。グリフは、フォントの基本的な構成要素です。
font :フォントオブジェクトへの参照。name :グリフ名(例: "Aring" 、 "five" )unicode :このグリフの主要なユニコード値( undefinedなる可能性があります)。unicodes :このグリフのユニコード値のリスト(ほとんどの場合、これは1なりますが、空になる場合があります)。index :グリフのインデックス番号。advanceWidth :このグリフを描くときにペンを前進させる幅。leftSideBearing :前のキャラクターから起源までの水平距離( 0, 0 );負の値は、オーバーハングを示しますxMin 、 yMin 、 xMax 、 yMax :グリフの境界ボックス。path :グリフの生の、衝突していないパス。 Glyph.getPath(x, y, fontSize, options, font)描画コンテキストで使用するために、スケーリングされたグリフパスオブジェクトを取得します。
x :グリフの水平位置。 (デフォルト: 0 )y :グリフのベースラインの垂直位置。 (デフォルト: 0 )fontSize :ピクセルのフォントサイズ(デフォルト: 72 )。options : {glyphrenderoptions} 、 Font.getPath()を参照してくださいfont :レイヤーと色を取得するためにcolr/cpalフォントをレンダリングするために必要なフォントオブジェクトGlyph.getBoundingBox()指定されたグリフのスケーリングされていないパスの最小境界ボックスを計算します。 x1 / y1 / x2 / y2を含むopentype.BoundingBoxオブジェクトを返します。グリフにポイントがない場合(たとえばスペース文字)、すべての座標はゼロになります。
Glyph.draw(ctx, x, y, fontSize, options, font)与えられたコンテキストにグリフを描きます。
ctx :描画コンテキスト。x :グリフの水平位置。 (デフォルト: 0 )y :グリフのベースラインの垂直位置。 (デフォルト: 0 )fontSize :フォントサイズ、ピクセル(デフォルト: 72 )。options : {glyphrenderoptions} 、 Font.getPath()を参照してくださいfont :レイヤーと色を取得するためにcolr/cpalフォントをレンダリングするために必要なフォントオブジェクトGlyph.drawPoints(ctx, x, y, fontSize, options, font)与えられたコンテキストにグリフのポイントを描きます。カーブ上のポイントは青色で描かれ、カーブオフカーブポイントは赤で描かれます。引数はGlyph.draw()と同じです。
Glyph.drawMetrics(ctx, x, y, fontSize)テキスト内のすべてのグリフの重要なフォント測定を示す線を描画します。黒い線は、座標系の起源を示しています(ポイント0,0)。青い線は、グリフ境界ボックスを示しています。緑色のラインは、グリフの前進幅を示します。引数はGlyph.draw()と同じです。
Glyph.toPathData(options) 、 Glyph.toDOMElement(options) 、 Glyph.toSVG(options) 、 Glyph.fromSVG(pathData, options) 、現在、これらはパスオブジェクト上の対応物のラッパー関数のみです(ドキュメントを参照)が、将来的に拡張されて自動計算のためにGLYPHデータを渡すことができます。
Glyph.getLayers(font)指定されたフォントのColr/CPALテーブルからこのグリフのカラーグリフ層を取得します
Font.getPath()またはGlyph.getPath()を通るパスがあると、使用できます。
commands :パスコマンド。各コマンドは、タイプと座標を含む辞書です。例については、以下を参照してください。fill :パスの塗りつぶし色。色はCSS色を表す文字列です。 (デフォルト: 'black' )stroke : Pathのストローク色。色はCSS色を表す文字列です。 (デフォルト: null ;パスはstrokeではありません)strokeWidth : Pathの線の厚さ。 (デフォルト: 1 、しかし、 strokeがnullの場合、ストロークは描かれません) Path.draw(ctx)指定された2Dコンテキストにパスを描画します。これは、パスオブジェクトのfill 、 stroke 、およびstrokeWidthプロパティを使用します。
ctx :描画コンテキスト。 Path.getBoundingBox()指定されたパスの最小境界ボックスを計算します。 x1 / y1 / x2 / y2を含むopentype.BoundingBoxオブジェクトを返します。パスが空の場合(スペース文字など)、すべての座標はゼロになります。
Path.toPathData(options)パスを一連のパスデータ命令に変換します。 https://www.w3.org/tr/svg/paths.html#pathdataを参照してください
options :decimalPlaces :浮動小数点値の小数点以下の場所の量。 (デフォルト: 2 )optimize :パスデータにいくつかの最適化を適用しますtrueflipY :SVGとフォントパスは反転Y軸を使用するため、パスデータのY軸をひっくり返すかどうか。 ( true :境界ボックスから計算、 false :disable; default: true )flipYBase :ベースフリッピング計算の基本値。おそらく、これをフォントのアセンダー値とセンダー値から計算したいと思うでしょう。 (デフォルト:PATHデータの境界ボックスから自動的に計算) Path.toSVG(options)パスを文字列としてsvg <path>要素に変換します。
options : Path.toPathData()を参照してくださいPath.fromSVG(pathData, options)SVGパスデータからパスを取得します。
既存のパスのパスデータを上書きする:
const path = new Path ( ) ;
path . fromSVG ( 'M0 0' ) ;または新しいパスを直接作成する:
const path = Path . fromSVG ( 'M0 0' ) ;pathData :SVGパスコマンドの文字列、または(ブラウザのコンテキストでのみ) SVGPathElementのいずれかoptions :decimalPlaces 、 optimize 、 flipY 、 flipYBase : Path.toPathData()を参照してくださいscale :すべてのコマンド座標に適用されるスケーリング値(デフォルト: 1 )x / y :xまたはy軸上のすべてのコマンド座標に適用されるオフセット(デフォルト: 0 ) {type: 'M', x: 100, y: 200}{type: 'L', x: 100, y: 200}{type: 'C', x1: 0, y1: 50, x2: 100, y2: 200, x: 100, y: 200}{type: 'Q', x1: 0, y1: 50, x: 100, y: 200}{type: 'Z'} バージョン化にはSemverを使用しています。
mit
Opentype.jsが不可能な他の人の仕事を認めたいと思います。