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

Question

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

Photoshopのようなセレクタを作成したいと思います。

Answer 1

私はあなたの最終的な目標については不明だ、しかし....

は、Googleフォントのようなものを使用している場合は、既に利用可能なすべての重みを知っている必要があります。言い換えれば、あなた自身のフォントを提供すれば、利用可能なすべてのもののマスターになります。

Answer 2

ある書体が実際に別の書体のフォントウェイトであるかどうかは、Javascriptが解決する方法がないという難解な知識です。 フォントファミリーがCSS @font-faceのルールを使用しているフォントウェイト、およびこのような方法では、あなたが求めているものを達成できないことがわかります。

すぐ下に、私は3つのウエイトを持つフォントに対してかなり標準の@font-faceセットアップを持っています。

@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の各ファイルは、同じフォントファミリの異なる重量は任意で表していることを知っています。ここで私はそれを認識しているので、それを指定しました。自動化されたサービス、例えばフォントリスは、これらの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つの重みに割り当てられている。しかし、理論的には、私はstupiderものを行うことができます。だからたとえJavascriptが@font-face宣言内の関係を検出できたとしても、どのファイルがどの重みに関連付けられているかのように、スタイルは&ファミリーです。いくつの重みが指定されているのですか？それでも、それらのリソースが存在し、ダウンロードされ、同じフォントの異なる幅を正確に表しているかどうかは分かりません。

ウェブのタイポグラフィーは過去10年間で大きな変化を遂げましたが、タイプ設定用のゴミ媒体（まだまだ）です。