117

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

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

4

2 に答える 2

194

woffファイルの生成後、font-familyを定義する必要があります。これは、後ですべてのcssスタイルで使用できます。以下は、フォントファミリ（通常、太字、太字-斜体、斜体）の書体を定義するコードです。サブディレクトリに4つの*.woffファイル（前述の書体用）があると想定されていますfonts。

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ファイルを生成するための優れたツールはここにあります。すべてのwoffファイルが最新のFirefoxバージョンで正しく機能するわけではなく、このジェネレーターは「正しい」フォントを生成します。

于 2012-10-10T05:29:25.287 に答える
20

@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;
}

その他のリファレンス

于 2012-10-10T05:29:55.643 に答える