0

そこで、「Alef」という新しいフォントをダウンロードしました。ヘブライ語ですが、アクティブにできないので関係ありません。私は本当に愚かなことをしていると確信していますが、それを適用するために何時間も努力してきましたが、役に立ちませんでした。

私が得たもの：

8ファイル：

4 x通常のeot、svg、ttf、woff

4 x太字のeot、svg、ttf、woff

そして、stylesheet.cssと呼ばれるスタイルシートファイルには、次のコードが含まれています。

@font-face {
font-family: 'Alef';
src: url("/wp-content/themes/duet/Alef-bold.eot");
src: url("/wp-content/themes/duet/Alef-bold.eot?#iefix") format('embedded-opentype'),
     url("/wp-content/themes/duet/Alef-bold.woff") format('woff'),
     url("/wp-content/themes/duet/Alef-bold.ttf") format('truetype'),
     url("/wp-content/themes/duet/Alef-bold.svg#alefbold") format('svg');
font-weight: bold;
font-style: normal;

}
@font-face {
font-family: 'Alef';
src: url("/wp-content/themes/duet/Alef-regular.eot");
src: url("/wp-content/themes/duet/Alef-regular.eot?#iefix") format('embedded-opentype'),
     url("/wp-content/themes/duet/Alef-regular.woff") format('woff'),
     url("/wp-content/themes/duet/Alef-regular.ttf") format('truetype'),
     url("/wp-content/themes/duet/Alef-regular.svg#alefregular") format('svg');
    font-weight: normal;
    font-style: normal;

すべてのファイルをテーマディレクトリにアップロードしました：/ wp-content / themes / duet /

私のメインのCSSファイルはstyle.cssと呼ばれ、これも同じディレクトリにあります。このコードをファイルに追加しました。

@font-face{
font-family: 'Alef';
src: url('Alef.eot');
src: url('Alef.eot?#iefix')
   format('embedded-opentype'),
   url('Alef.woff') format('woff'),
   url('Alef.ttf') format('truetype'),
   url('Alef.svg#webfont') format('svg');
}

それから私がしたことは、この行を私のheader.phpに追加することでした：

        <link rel="stylesheet" href="/wp-content/themes/duet/stylesheet.css" type="text/css" charset="utf-8" />

そしてもちろん、私は自分のpを設定しました{font-family：Alef;）

私は何が間違っているのですか？Chromeのコンソールのファイルで404エラーが発生します。ただし、エラーコンソールの右側に正しいURLが表示されます。

4

2 に答える 2

1

私はこのツールをほとんど執拗に使用しています。このようにバグを解決する時間を節約できます。

http://www.fontsquirrel.com/tools/webfont-generator

史上最高のツール。

于 2013-03-26T19:48:19.110 に答える
0

2つの主な問題：

  • 12の異なるファイルを参照していますが、8つしかありません（Alef.eotなど;Alef-regular.eotなど;Alef-bold.eotなど）
  • 宣言ごとに2つの「src」ステートメントが混乱していると思います。URLをコンマで区切ったもののみにする必要があります。

これが私がすることです：

  • style.cssのfont-face宣言を削除します。font-face宣言をstylesheet.cssからstyle.cssに移動します。
  • すべてのURLをコンマで区切って1つの「src」宣言のみを使用してください。

これが私が使用するコードです:(置換されたファイルパス）::

`@font-face {
    font-family: 'Alef';
    src: url('/wp-content/themes/duet/Alef-regular.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/duet/Alef-regular.woff') format('woff'),
    url('/wp-content/themes/duet/Alef-regular.ttf') format('truetype'),
    url('/wp-content/themes/duet/Alef-regular.svg#Alef') format('svg');
    font-weight: normal;
    font-style: normal;
}

追加：もちろん、ここに太字のバージョンがあります...

`@font-face {
    font-family: 'Alef';
    src: url('/wp-content/themes/duet/Alef-bold.eot?#iefix') format('embedded-opentype'),
    url('/wp-content/themes/duet/Alef-bold.woff') format('woff'),
    url('/wp-content/themes/duet/Alef-bold.ttf') format('truetype'),
    url('/wp-content/themes/duet/Alef-bold.svg#Alef') format('svg');
    font-weight: bold;
    font-style: normal;
}
于 2013-03-26T18:56:05.757 に答える