🎟jsでのフォント読み込みサンプル

あたり帳簿

主要なフォントは三種類　おぼえておけよ

。

  1. Webfont:

    • Webfontは、ウェブページ上で使用するためのフォントフォーマットの総称です。このカテゴリには、WOFF (Web Open Font Format) や WOFF2 などのフォーマットが含まれます。

    • WOFFは、TTFやOTFのフォントを効率的に配信するための圧縮フォーマットです。

    • WOFF2は、WOFFの改良版で、さらに効率的な圧縮を提供します。

  2. OTF (OpenType Font):

    • OTFは、AdobeとMicrosoftが共同で開発したフォントフォーマットです。

    • グリフの複雑な形状やリガチャ、スワッシュ、スモールキャップなどの高度なタイポグラフィ機能をサポートしています。

    • PostScriptアウトラインを使用することが多いため、グラフィックデザインや印刷によく使用されます。

  3. TTF (TrueType Font):

    • TTFは、Appleが開発し、後にMicrosoftも採用したフォントフォーマットです。

    • シンプルなアウトラインを持つグリフをサポートしていますが、OTFほどの高度なタイポグラフィ機能はサポートしていません。

    • しかし、広くサポートされており、さまざまなプラットフォームやアプリケーションで使用されています。

function setup() {
myFont=loadFont("https://filesamples.com/samples/font/otf/Lato-Regular.otf");
}
function draw() {
background(220);                   　 stroke(sin(frameCount/10)100+255);
fill(cos(frameCount10)*100+255,0,0);
textFont(myFont);
textSize(36);
text("abc",5,50);
}


@font-faceはウェブフォントだけでなく、TTFやOTFといったフォントフォーマットにも使用できます。@font-faceはCSSのルールで、ウェブページに外部のフォントファイルを埋め込むためのものです。そのため、フォントのフォーマットがWOFFやWOFF2だけに限定されるわけではありません。
以下は、OTFやTTFのフォントファイルをウェブページに埋め込む例です。

@font-face { font-family: 'CustomFont'; src: url('path/to/customfont.otf') format('opentype'), url('path/to/customfont.ttf') format('truetype'); } body { font-family: 'CustomFont', sans-serif; }


このように、@font-faceルールを使用すれば、TTFやOTFのフォントファイルを直接ウェブページに埋め込んで使用することができます。ただし、ライセンスやパフォーマンスの観点から、ウェブでの使用に最適化されたWOFFやWOFF2のフォーマットを使用するのが一般的です。

Webフォントの読み込みを最適化したり、フォントの表示の制御を助けるJavaScriptライブラリはいくつかあります。以下はその中の一部です：

  1. Web Font Loader:

    • Google FontsとTypekitが共同で開発。

    • カスタムフォントの読み込み状況を検知し、特定のCSSクラスをHTML要素に追加することで、フォントの読み込み状態に基づいたスタイルを適用することができます。

    • GitHub

  2. Font Face Observer:

    • Webフォントが読み込まれるのを検知するための小さな@font-faceローダー。

    • フォントの読み込みが完了したら、プロミスが解決されます。

    • GitHub

  3. css-font-loading-module:

    • これは実際にはライブラリではありませんが、ネイティブJavaScript APIで、Webフォントの読み込みとレンダリングを制御するためのものです。

    • このAPIをサポートしているブラウザでは、外部ライブラリなしでフォントの読み込みを制御することができます。

これらのライブラリやAPIを使用することで、WebフォントのFOIT（Flash of Invisible Text）やFOUT（Flash of Unstyled Text）などの問題を軽減または避けることができます。適切なものを選択し、プロジェクトの要件に合わせてカスタマイズすることで、最適なユーザーエクスペリエンスを提供することができます。


お願い致します