canvas上の文字にプロポーショナルメトリクスを適用したい！

最初に結論

CSS の font-feature-settings: "palt" 1; を使うことによって、実現できる可能性があります。

canvas で字詰したくありませんか？

最近はなかなか使う機会もありませんが、使うとやっぱり便利な局面もあるHTMLのcanvas。このcanvasでは、文字の扱い方が当然、普通のHTMLとは違いますので、制御しようとすると力技になりがちですが、条件が整えばもっとさっと使う方法もあります。

例えばNoto Sans Japaneseであれば、Webフォントとして読み込んだ場合でも、下記のCSSを使うことによって記号や括弧類などの約物や、「ゅ」「っ」のような捨て仮名のレイアウトを整えてくれます。

.css

canvas {
  font-feature-settings: "palt" 1;
}

実際に比較してみる

macOS版のブラウザになりますが、下記のように表示がされるようになります。

Chrome（Blink）

プロポーショナルメトリクス OFF

プロポーショナルメトリクス ON

Safari（WebKit）

プロポーショナルメトリクス OFF

プロポーショナルメトリクス ON

Firefox（Gecko）

プロポーショナルメトリクス OFF

プロポーショナルメトリクス ON

ここでポイント

• 半角の英数に関しては差が出ません
• 全角の漢字や通常のひらがな・カタカナもほぼ差がないようです
• Firefoxに関していうと全体的に有効化されていないようです
  • おそらくcanvasタグに対してfont-feature-settings: "palt" 1;をかけるというのはFirefoxでは駄目なようです

Can I useでもpaltだけの状況・情報はありません。
（※font-feature-settingsの情報はある。）

AdobeのサイトにCSS での OpenType 機能の構文というページがあり、日本語で書かれている仕様としてはここが一番まとまっていそうですが、実際のブラウザ上で機能するかは個別で試してみるしかなさそうです。

ただ、とりあえずChromeとSafariではcanvas内の文字にもプロポーショナルメトリクスをかけることができました。

Firefoxにも対応したい！！！

前述の通り、Firefoxではcanvasにfont-feature-settings: "palt" 1;をかけても反映されません。

一方、@font-faceにfont-feature-settings: "palt" 1;を指定した上で呼び出すとFirefoxでも対応することができます。（Chrome、Safariも同様に表示可能。）

.css

@font-face {
  font-family: "Noto Sans JP Palt";
  src: url("◯◯.woff2") format('woff2');
  font-weight: 100 900;
  font-feature-settings: "palt" 1;
}

では、上記のsrc: url("◯◯.woff2") format('woff2');の◯◯.woff2の箇所を、Google Fontsから提供されているCSSファイルhttps://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swapの中身から移植すれば動くということになります。

しかし、このファイルを開いてみると100個以上の.woff2のフォントファイルが分割配置されているため、とても手作業で移植するというのは厳しい状況になります。

したがって、下記の用に読み込みを工夫してあげる必要があります。

.html

<link
  id="google-fonts"
  rel="stylesheet"
  crossorigin="anonymous"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&amp;display=swap"
>

Google Fontsから提供されたコードに対して、JSから扱えるようにIDとcrossoriginを付与しています。

JSから扱えるようになったため、Google Fontsから提供されたCSSの各@font-faceに対して、font-feature-settings: "palt" 1;を付与した新しいfont-family: "Noto Sans JP Palt";をJSで作ります。

.js

function registerPaltFont() {
  // Google FontsのCSSを取得
  const sheet = document.getElementById("google-fonts")?.sheet;
  if (!sheet) {
    throw new Error("Google FontsのCSSが読み込まれていません。");
  }

  const rules = [];

  for (const rule of sheet.cssRules) {
    if (rule.type !== CSSRule.FONT_FACE_RULE) continue;

    // 対象フォントを確認
    const family = rule.style
      .getPropertyValue("font-family")
      .trim()
      .replace(/^['"]|['"]$/g, "");

    if (family !== "Noto Sans JP") continue;

    // 元の定義を引き継ぎ、paltを有効にしたフォントを作成
    rules.push(`
      @font-face {
        ${rule.style.cssText}
        font-family: "Noto Sans JP Palt";
        font-feature-settings: "palt" 1;
      }
    `);
  }

  if (rules.length === 0) {
    throw new Error("Noto Sans JPのフォント定義が見つかりません。");
  }

  // まとめてスタイルシートに登録
  const style = document.createElement("style");
  style.id = "palt-font-style";
  style.textContent = rules.join("\n");
  document.head.appendChild(style);
}

この対応で、Firefoxのcanvasでも無事プロポーショナルメトリクスの設定がされた文字表示になります。