Webサイトで.woffフォントを使用するにはどうすればよいですか?


100

CSSがフォントにアクセスできるように、フォントをどこに配置しますか?

ブラウザの非標準フォントを.woffファイルで使用しています。「awesome-font」が「awesome-font.woff」ファイルに保存されているとしましょう。

回答:


168

woffファイルを生成したら、後ですべてのCSSスタイルで使用できるfont-familyを定義する必要があります。以下は、フォントファミリー(通常、ボールド、ボールドイタリック、イタリック)の書体を定義するコードです。fontsサブディレクトリに4つの* .woffファイル(前述の書体用)が配置されていると想定されています。

CSSコード:

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

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

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-boldoblique.woff") format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "myfont";
    src: url("fonts/awesome-font-oblique.woff") format('woff');
    font-style: italic;
}

その定義をした後、あなたはただ書くことができます、例えば、

HTMLコード:

<div class="mydiv">
    <b>this will be written with awesome-font-bold.woff</b>
    <br/>
    <b><i>this will be written with awesome-font-boldoblique.woff</i></b>
    <br/>
    <i>this will be written with awesome-font-oblique.woff</i>
    <br/>
    this will be written with awesome-font.woff
</div>

CSSコード:

.mydiv {
    font-family: myfont
}

CSSスタイルシートに含めることができるwoffファイルを生成するための優れたツールはこちらにあります。最新のFirefoxバージョンですべてのwoffファイルが正しく機能するわけではなく、このジェネレーターは「正しい」フォントを生成します。


マテリアルアイコンがどのように機能するか説明していただけますか。stackoverflow.com/questions/45323577/...
スニルガーグ

16

あなた@font-faceはあなたのスタイルシートでこのように宣言する必要があります

@font-face {
  font-family: 'Awesome-Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome-Font'), local('Awesome-Font-Regular'), url(path/Awesome-Font.woff) format('woff');
}

このフォントを段落に適用する場合は、次のように使用します。

p {
font-family: 'Awesome-Font', Arial;
}

その他のリファレンス


1
この場合、srcタグの場合、woffファイルにrel = "preload"をどのように使用しますか?
マイク
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.