opentype.jsライブラリを使ってフォントをアタッチさせたテキストパスコマンドをsvgで表示してみよう

こんにちわ。nap5です。

opentype.jsライブラリを使ってGoogleFontで提供されているフォントをアタッチさせたテキストパスコマンドを作成し、svgで表示してみたので、紹介したいと思います。

opentype.jsライブラリはこちらです。

GitHub - opentypejs/opentype.js: Read and write OpenType fonts using JavaScript.

デモで使用したフォントは以下になります。

• Edu VIC WA NT Beginner

• Roboto

• Oleo Script

以下のデモですが、不安定のため、zipにしたものも添付します。zipファイルダウンロード後、展開します。展開後のディレクトリに移動した後、以下のコマンド打つとデモが動きます。

0j4bu5.zip

324 KB

ファイルダウンロードについて

ダウンロード

$ cd 展開後のディレクトリ
$ yarn install
$ yarn dev

以下のcodesandboxのデモが見れない場合のフォールバックとしてrenderというホスティングサービスでデプロイしたものも用意しました。

Vite App

デモサイトです。

Vite App

デモコードです。

pensive-sanne-0j4bu5 - CodeSandbox

このライブラリは便利そうです。パスアニメーション等にも応用できそうです。

以下がデモコードの抜粋です。
静的なフォントファイルをimportで読み込んだあと、ライブラリでロードしてパスコマンドを生成しています。

  useEffect(() => {
    (async () => {
      const font = await opentype.load(eduVICWANTBeginner);
      const path = font.getPath('Hello, World!', 0, 0, 72);
      const {x1, y1, x2, y2} = path.getBoundingBox();
      const x = x1;
      const y = y1;
      const w = x2 - x1;
      const h = y2 - y1;
      const viewbox = `${x} ${y} ${w} ${h}`;
      svgDomRef.current.setAttribute('viewBox', viewbox);
      pathDomRef.current.setAttributeNS(null, 'd', path.toPathData());
    })();
  }, []);

メンバーシップ制度を始めました。掲示板の方が、アクティブにポストしているので、よかったら、覗いてみてください。

Nap5の部屋｜nap5

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/

Web標準のJavascript Animation APIを使ったインタラクティブなカウントアップダウンの作り方

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。