フォントファイル（例：.ttc .ttf .otf）に異なる重みが含まれていますか？

Question

フォント（GoogleフォントのようなCDNからではない）が重量あたりフォントファイルを1つ持つプロジェクトがよく見られます。これはいつものケースですか？

私はクライアント（Yuanti SC、a .ttcだが私はotfとttfに変換した）からフォントファイルを送ってきたので尋ねる。太字以外の重さを表示することはできない。

@font-face { 
    font-family: Yuanti; 
    src: url(/fonts/yuanti.otf) format('otf'), 
      url(/fonts/yuanti.ttf) format('truetype'); 
    font-weight: 100; 
} 

私は、複数のフォント重みが1つのフォントファイルであることが可能（または少なくともそう）ではありませんことを確認したかったです。

Answer 1

フォントファイルは1つの重量につき1つです。これはいつものケースですか？

短い答え：はい。

個々のOpenTypeフォントは単一ウェイトのみをカバーしますが、フォントウェイトとCSSウェイトを混同しないでください。フォントは技術的にはany weight between 0 and 65336であり、これらの数字はという技術的には何も意味するものではありません。ファウンダリがフルファミリー（適切な重み付け/モデル化された個別のフォントで構成されています）に適していることを示す方法です。

CSSには100から900までの重みしかないという人為的な制限があります。たとえば、フォントファイルには、 OS/2 metadata table（これは偶然にも歴史的な理由からのみOS/2と呼ばれます）の重み値150です。

のブラウザでは、あなたがそれらを使用することができますが、そうではないフォントのコレクションをサポートしている場合：あなたは、複数のウェイトをロードする方法は、文字通り、複数のフォントをロードすることです：

@font-face { 
    font-family: "myfont"; 
    font-weight: 100; 
    src: url(fonts/super-bold.woff) format("woff"); 
} 

@font-face { 
    font-family: "myfont"; 
    font-weight: 400; 
    src: url(fonts/italic.woff) format("woff"); 
} 

@font-face { 
    font-family: "myfont"; 
    font-weight: 900; 
    src: url(fonts/ultra-thing.woff) format("woff"); 
} 

そして、そこに何が起こったかに注意してください：それはしていませんフォントファイル自体のフォントウェイトが何であるかということです。実際のフォントリソースにどのウェイトマップを割り当てるかを知ることができます。「私のCSSで、ウェイト100がスーパーボールドにマップされている」と言うと、 。 CSS @font-faceの定義は、フォントファイルではなく、リソースファイルとCSSスタイル/重みとの間のマッピングを定義するものです。

通常は、超薄型に100を、普通に400に、超黒色に900をバインドしますが、これはフォントではなくショットを呼び出すことです。 CSSはOpenTypeメタデータを尊重しません。@font-faceバインディングは最終的な発言をします。

については、ブラウザはフォントコレクションをサポートしていませんが、これは実際にフォントを読み込むときに使用されるデータと関係があります。実際のOpenTypeフォント（あなたのコンピュータで一般的なタイプセットに使用するもの）には、webfont（名前や文脈上のメタデータなど）として読み込まれたときには文字通り無視される大量のデータがあります。実際に多くのデータを解析し、見つかったものに基づいてリソースマッピングを行う必要があります。パックされたリソースマッピングの内容を大幅に複雑にするだけでなく、リモートではないエッジのケースを適切に処理するための追加コードが必要です。オーバーライドが必要です。 "誰かがコレクションを読み込んでも、どのリソースがどのスタイル/重み値にマップされているかを制御したい場合はどうなりますか？"

このように、コレクションのサポートを追加すると、実際の利点はありません。OpenTypeコレクションを個々のttf/otfフォント（OpenTypeフォント、両方ともグリフ定義のみが異なるもの、他のすべてのデータ同じようにコード化されています）、WOFFやWOFF2を使ってWeb用に単純に詰め込むのは簡単ではなく、デザイナー/ユーザーはこれらのフォントを読み込む方法をはるかに制御できるので、すぐにコレクションのサポートをいつでも見ることはできません。

Answer 2

nwellnhofと述べたように、TrueTypeCollectionsには重さに影響を与える可能性のあるさまざまなフォントを含めることができますが、ブラウザが余分な印象を与えるフォントをレンダリングする方法でもあります。

Photoshopをお持ちの場合は、値にまたがってアニメーションエイリアシングプロパティを変更することで確認できます。しかし、フォントの読み込み順序を変更することで、これを変更することもありますが、それを悪化させることもあります。最近、Googleは通常、フォントのスムースなレンディションを提供しています。

解決策ではありませんが、うまくいけば私が助けてくれることがありました。