はじめに

みなさんはMSゴシックの正確なフォントファミリーをパッと言えますか？

これ、自分も何度か間違えたことあるんですけど、正しいフォントファミリーは ＭＳゴシック で、MSは全角・スペースは半角にしないといけないんです。

じゃあ正しいフォントファミリーはどうやって知ればいいかというと、Windowsの場合は少し面倒で、コントロールパネルでフォントを一覧表示して「ファミリ」という列を追加することで確認できます。（以下サイト参照）

それで、もう少し簡単に知る方法がないかChatGPT先生に聞いたところ、PowerShellから.NETクラス経由で取得することもできるようでした。

ということで、この記事ではコマンドでのフォントファミリー取得方法と、ついでにつくってみたフォント確認用ページを生成するスクリプトを紹介します。

ちなみにMacの場合はFont Bookアプリから簡単に確認できます。

コマンドでの取得方法

フォントファミリを取得するコマンドはこれだけです。

function Get-FontFamily {
  Add-Type -AssemblyName System.Drawing
  $InstalledFontCollection = New-Object System.Drawing.Text.InstalledFontCollection
  return $InstalledFontCollection.Families | ForEach-Object {
    $_.Name
  }
}

InstalledFontCollectionクラスのインスタンスがもつFamiliesプロパティにフォントファミリー名が入っているのでそれを参照しています。

これを実行するとインストール済みフォントのフォントファミリー名がリストで返ってきます。MSゴシックの"MS"もちゃんと全角です。

> Get-FontFamily
Arial
Arial Black
Bahnschrift
Bahnschrift Condensed
  :
  :
ＭＳ ゴシック
ＭＳ 明朝
ＭＳ Ｐゴシック
ＭＳ Ｐ明朝

Macの場合

上記コマンドで参照している System.Drawing.Common パッケージはWindows専用なのでMacでは動かないです。
ただ、かわりに system_profiler コマンドが使えるので以下のように置き換えれば同じようにフォントファミリーの一覧が取得できます。（これはPowerShellスクリプトといっていいのか...？）

function Get-FontFamily {
  return system_profiler SPFontsDataType | grep 'Family:' | sed 's/^[ ]+Family: //g' | sort | uniq
}

同様に、Linuxならfontconfigパッケージが入っていればfc-listコマンドが使えるようです。

フォント確認用ページ

コマンドだけだと味気なかったので、ブラウザでフォントファミリとレイアウトの確認ができるページを生成するスクリプトをつくってみました。

# フォントファミリーの取得コマンドレット
function Get-FontFamily {
  Add-Type -AssemblyName System.Drawing
  $InstalledFontCollection = New-Object System.Drawing.Text.InstalledFontCollection
  return $InstalledFontCollection.Families | ForEach-Object {
    $_.Name
  }
}

# 確認用ページのHTML
$HtmlContents = @"
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="data:,">
    <style>
      * { font-size: large; }
      body { width:80%; margin: auto; }
      #app { position: relative; }
      #text-input { position: sticky; top: 0; padding: 24px 0; border-bottom: 2px solid #999999; background-color: white; }
      textarea { width: 100%; }
      .row { margin: 32px 0px; }
      .sample-text { width: calc(100% - 8px * 2); min-height: 24px; background-color: #eeeeee; border-radius: 5px; padding: 8px; white-space: pre-wrap; text-wrap: wrap; }
    </style>
    <title>Check Font Family</title>
  </head>
<body>
  <div id="app">
    <div id="text-input">
      <label>Sample Text</label>
      <textarea id="text-input_textarea" rows="5"></textarea>
    </div>
    <div id="font-list">
      <div id="font-list_body"></div>
    </div>
  </div>
</body>
<script>
// ↓ここでフォントファミリー名配列を埋め込む↓
const fontFamilyList = $(Get-FontFamily | ConvertTo-Json -Compress -AsArray);
const defaultSampleText = [
  'Windowsでコンピューターの世界が広がります。1234567890',
  'あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。',
].join('\n');

window['font-list_body'].innerHTML = fontFamilyList.map(fontFamily => ``\
  <div class="row">
    <label>`${fontFamily}</label>
    <div class="sample-text" style="font-family: '`${fontFamily}';">`${defaultSampleText}</div>
  </div>
``).join('');

window['text-input_textarea'].value = defaultSampleText;
window['text-input_textarea'].addEventListener('keyup', e => {
  const textarea = e.target;
  Array.from(document.querySelectorAll('div.sample-text')).forEach(div => {
    div.innerText = textarea.value;
  });
})
</script>
</html>
"@

# HTMLをUTF8で書き出し
$HtmlFilePath = "${PSScriptRoot}\index.html"
[System.IO.File]::WriteAllLines($HtmlFilePath, $HtmlContents, [System.Text.UTF8Encoding]::new($false))

# ブラウザで開く
Invoke-Item -LiteralPath $HtmlFilePath

これを実行するとこんな感じのページが表示されます。
ラベル名がフォントファミリーになっていて、Sample Textに入力した文字列が各フォントごとにどう表示されるかを確認できます。

さいごに

いかがでしたか？
フォントファミリーの確認に困ったらぜひ当記事を参考にしてみてください。

最後まで読んでいただきありがとうございました。