css - フォント-フェイスウェイト

Question

作業中のアプリのカスタムフォントに購入フォント（Museo Sans）を使用しています。購入時に提供されたファイルには、さまざまな重みのWebフォントファイル（MuseoSans100Regular、MuseoSans300Regularなど）が含まれています。@ font-faceに、さまざまな重みに使用するファイルを指定して、これを実行できるようにする方法はありますか。

font-family: MuseoSans;
font-weight: 300;

これではなく：

font-family: MuseoSans300;

Answer 1

はい、font-weight2つの異なる@font-face定義でどのファイルがどのファイル用であるかを指定する必要があります。

@font-face {
    font-family: 'MuseoSans';
    src: url('../font/museo_sans_100.woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'MuseoSans';
    src: url('../font/museo_sans_300.woff');
    font-weight: 300;
    font-style: normal;
}

h1, p {
    font-family: MuseoSans;
}

h1 {
    font-weight: 300; /* uses museo_sans_300.woff */
}

p {
    font-weight: 100; /* uses museo_sans_100.woff*/
}