font atlas sdf

font-atlas-sdf

フォントテクスチャアトラスで<canvas>要素を入力します。SDF（署名距離フィールド）フォントをすばやく生成するために使用できます。 SDFは、WebGLでテキストを描く最も効率的な方法です。記事を参照してください。ビットマップフォントについては、Font-Atlasを参照してください。

デモ

使用法

canvas = fontatlas（option？）

フォントテクスチャアトラスを使用して、 <canvas>要素を入力して返します。次のオプションを取得します。

財産	デフォルト	意味
canvas	新しいキャンバス	既存の<canvas>要素を使用します。
font	16px sans-serif	テキストを描画するときに使用するフォントファミリ。 CSSフォント文字列またはフォントプロパティを備えたオブジェクト： size 、 family 、 style 、 weight 、 variant 、 stretchにすることができます。
shape	[512, 512]	ピクセルのキャンバスの[width, height]を含む配列。
step	[32, 32]	ピクセルの各セルの[width, height]を含む配列。
chars	[32, 126]	どちらかのいずれかです。使用するすべての文字を含む文字列。使用するすべての文字の配列。使用する[start, end]文字コードを指定する配列。
radius	サイズ×1.5	距離変換の「勾配」に影響します。
align	'optical'	フォントベースラインではなく、境界ボックスによってシンボルを垂直に整列します。利用可能な値：質量アライメントの中心の'optical' （光学プロパティを参照）、 'bounds' 、またはフォントアライメントを使用するためのfalse 。
fit	0.5	GLYPHサイズを正規化して、同じsizeの部分をカバーします。例： 0.5 sizeの半分をカバーし、 1フルサイズにフィットし、 false FITを無効にします。

関連している

• font-atlas-bitmap font atlas。
• Tiny-SDF-Fast Glyph署名距離フィールド生成。
• 光プロパティ - グリフ光学センターと境界ボックスの計算