0

私が取り組んでいるWebサイトの場合、クライアントはRoboto（by Google）をメインフォントとして使用したいと考えていました。ページ上の要素のいくつかは、RobotoLightのRobotoThinなど、さまざまなスタイルのRobotoを使用しています。ただし、@ font-faceセレクターを使用して、ブラウザーにRobotoでテキストをレンダリングさせました。私の問題は、標準のRobotoテキストではなく、デザインで異なるウェイトを使用する必要があることです。私が十分に明確であるかどうかはわかりません。説明や具体的な例が必要な場合は、お問い合わせください。

PS：同様の問題について同様のスレッドを見つけましたが、@font-faceと組み合わせてシステムフォントを使用しています。 @fontfaceを使用して、さまざまなフォントファミリにさまざまなスタイルを適用するにはどうすればよいですか？

4

1 に答える 1

1

別々のタグにいくつかのフォント面を追加するにはどうすればよいですか？

@font-face {
    font-family: 'Crystal';
    src: url('../fonts/crystalnormal.eot');
    src: url('../fonts/crystalnormal.eot?#iefix') format('embedded-opentype'),
         url('../fonts/crystalnormal.woff') format('woff'),
         url('../fonts/crystalnormal.ttf') format('truetype'),
         url('../fonts/crystalnormal.svg#crystalnormal') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FreestyleC';
    src: url('../fonts/freestyle.eot');
    src: url('../fonts/freestyle.eot?#iefix') format('embedded-opentype'),
         url('../fonts/freestyle.woff') format('woff'),
         url('../fonts/freestyle.ttf') format('truetype'),
         url('../fonts/freestyle.svg#freestyle') format('svg');
    font-weight: normal;
    font-style: normal;
}

foo {
    font-family:FreestyleC;
}
bar {
    font-family:Crystal;
}
于 2012-08-30T19:03:26.970 に答える