javascript - 利用可能なフォントの重みを取得するには?

Question

JavaScript で特定のフォントの重みのリストを取得する方法はありますか?

Photoshop のようなセレクターを作成したい。

Answer 1

しかし、あなたの最終目標については不明です....

Google フォントのようなものを使用している場合は、利用可能なすべての太さをすでに知っているはずです。つまり、独自のフォントを提供する場合は、利用可能なすべてのマスターです。

Answer 2

いいえ！ある書体が実際に別の書体のフォントの太さであるかどうかは、Javascript では解決できない難解な知識です。CSS ルールを使用して font-family が持つ font-weightsを定義することができ@font-face、この種の方法で、求めていることを達成することは不可能であることを示しています。

すぐ下に、@font-face3 つのウェイトを持つフォントのかなり標準的な設定があります。

@font-face {
  font-family: Barney;
  src: url(barney_regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: Barney;
  src: url(barney_light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: Barney;
  src: url(barney_bold.ttf);
  font-weight: 500;
}

.ttfしかし、これらの各ファイルが同じフォント ファミリの異なる太さを表していることを知っているのは恣意的です。ここでは、私がそれを認識しているので、それを指定しました。Font Squirrel などの自動化されたサービスがこれらの 3 つのファイルを取得した場合、おそらく次のようになります。

@font-face {
  font-family: barney_regular;
  src: url(barney_regular.ttf);
}

@font-face {
  font-family: barney_light;
  src: url(barney_light.ttf);
}

@font-face {
  font-family: barney_bold;
  src: url(barney_bold.ttf);
}

ここで、これら 3 つのウェイトは実際にはすべて別個のフォント ファミリとして指定されていますが、これは明らかに誤りです。しかし、理論的には、もっとばかげたことができます。

@font-face {
  font-family: barney;
  src: url(barney_regular.ttf);
  font-weight: 500;
}

@font-face {
  font-family: barney;
  src: url(barney_regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: barney;
  src: url(barney_regular.ttf);
  font-weight: 300;
}

上記では、まったく同じ書体が 3 つの異なるウェイトに割り当てられています。したがって、Javascript が@font-face宣言内の関係を検出できたとしても、たとえば、どのファイルがどの体重、スタイル、ファミリーに関連付けられているかなどです。指定された太さの数…それらのリソースが存在するかどうか、ダウンロードされているかどうか、同じフォントの異なる幅を正確に表しているかどうかはまだわかりません。

Web タイポグラフィは過去 10 年間で大きな変化を遂げましたが、それでも (比較的言えば) 活字印刷のゴミ媒体です。