css - 考えられるすべてを試しても@font-faceが機能しない

Question

私は本当に@font-faceコードの助けが必要です。IT は私のフォントファイルを認識していないようです。

パスを思いつくものに変更したり、新しいフォルダーを作成したり、既存のフォルダーの名前を変更したり、フォントファイルをルートに配置したりしました。

私はFirefoxとChromeでテストしています。

CSSで試したコードは次のとおりです。

src: url(http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(http://www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(../wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/thefalltheme/images/Univers.ttf);
src: url(../thefalltheme/images/Univers.ttf);
src: url(thefalltheme/images/Univers.ttf);
src: url(/images/Univers.ttf);
src: url(../images/Univers.ttf);
src: url(images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/Univers.ttf);
src: url(/Univers.ttf);
src: url(Univers.ttf);
src: url(../Univers.ttf);

フォントファイルをどこに置くべきか、または CSS を機能させるために何を変更すればよいかを教えてもらえますか?

（ここやネット上の他の場所でも同様の質問をチェックし、このWebサイトを使用してみましたが役に立ちませんでした。）

ありがとう！

更新: bozdoz の提案は機能しません。FontSquirrel を使用してフォントを取得しました。これはCSSです：

@font-face { font-family: 'lane'; src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot'); src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg'); font-weight: normal; font-style: normal; }

h1{ font-size: 110px; font-family: 'lane', georgia, serif; color: #000000; }

ボズドズが持っていたという理由だけで「レーン」という名前を使用しました。

すべてのフォントは次のとおりです。

http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/

これらの名前は次のとおりです。

univers-webfont.eot, univers-webfont.woof, univers-webfont.ttf, univers-webfont.svg

score 2 · Accepted Answer

正しく使用していますか？@font-face のフォーマットは次のとおりです。ファイル数に注意してください。Font Squirrelを使用して、ブラウザー間の互換性のために必要なすべてのフォントを作成できます。また、WordPress を使用しているようです。WordPress の CSS では、絶対パス (つまり、リストの最初のパス) を使用する必要があると思います。お役に立てれば。

<style>
@font-face {
    font-family: 'lane';
    src: url('type/lanehum-webfont.eot');
    src: url('type/lanehum-webfont.eot?#iefix') format('embedded-opentype'),
         url('type/lanehum-webfont.woff') format('woff'),
         url('type/lanehum-webfont.ttf') format('truetype'),
         url('type/lanehum-webfont.svg#LaneHumouresqueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.font { font-family:"lane", arial, serif; }
</style>

score 1 · Accepted Answer

あなたはこのようなことをしたい:

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }

フォント定義ファイルは、css ファイルに対して相対的である必要があります。したがって、css が次の場所にある場合:

/Content/css/main.css

次に、フォントを同じフォルダーに配置する必要があります。指定すれば

@font-face { font-family: Delicious; src: url('fonts/Delicious-Roman.otf'); }

次に、フォント定義は

/Content/css/fonts/Delicious-Roman.otf

サーバーがフォントのダウンロードをブロックしていないことを確認することをお勧めします。URL を試して、指定された URL で 404 または 403 が返されるかどうかを確認してください。

score 1 · Accepted Answer

fontSuirrel のジェネレーターを試す必要があります。そのスクリプトは広範囲にテストされ、多くのブラウザーに準拠しています。フォントを生成するときに詳細設定を選択します。ttf特定のブラウザでは、フォントとして使用できない場合があるためeot woff、ttf

score 0 · Accepted Answer

まず第一に、あなたの多大な助けに感謝します！@font-faceコードに問題はありませんでした。問題は、CSS 全体にありました。ご覧のとおり、私の CSS は次のように記述されています。

/*   
Info
*/

@media screen {
* {
margin: 0px;
padding: 0px;
}
html { background: black url(images/bg.jpg); }
body { font: 14px/1.4 Georgia, serif; }
article, aside, figure, footer, header, nav, section { display: block; }

@font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

etc.

問題は、@font-faceそれが後であったために見られなかったことでした@media screen! 前後に置いた@media screen後/* Info */、問題なく動作しました。

また、Wordpressを使用する場合、絶対パスと相対パスを使用できるようです...

もう一度、すべてのあなたの助けに感謝します！

score 0 · Accepted Answer

答えとしてのコメントからの私の提案：

引用符で試してください：

url("Univers.ttf");

font-family があることを確認してください。そうしないと、コードでフォントを使用できません。

font-family: "MyFontName";

CSS で使用するカスタムフォントファミリは次のようになります。

p { font-family: "MyFontName", Arial, sans-serif; }

css - 考えられるすべてを試しても@font-faceが機能しない

5 に答える 5

Related

Reference