2

カスタムフォントを取得しようとしています。

試してみると、フォントが機能せず、カスタムの Times new Roman が使用されます。

これはスタイルシートの私のコードです:

@font-face {
    font-family: "ARBONNIE";
    src: url(Custom/ARBONNIE.ttf);
}
font {
    font-family: "ARBONNIE";
}

しかし、Web サイトを表示すると、カスタム フォントが表示されません。
それは正しいディレクトリとすべてです。助けてください ：（

4

3 に答える 3

5

の使用は@font-face、すべてのブラウザと互換性があるわけではありません。クロスブラウザ@font-faceコードを生成するための便利なツールはここにあります：FontSquirrelGenerator@font-face。このジェネレーターは、必要なすべてのファイルと、さまざまなブラウザーでテストするために使用できる完全な例を提供します。

最終的にページ上で、CSSは次のようになります。

@font-face {
    font-family: 'BitstreamVeraSerifBold';
    src: url('verasebd-webfont.eot');
    src: url('verasebd-webfont.eot?#iefix') format('embedded-opentype'),
         url('verasebd-webfont.woff') format('woff'),
         url('verasebd-webfont.ttf') format('truetype'),
         url('verasebd-webfont.svg#BitstreamVeraSerifBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

.custom-font {
    font-family: 'BitstreamVeraSerifBold';
}

BitstreamVeraSerifBoldここではフォントを使用しており、フォントファイルはCSSファイルと同じディレクトリにあることに注意してください。

そしてあなたのHTMLで：

<span class="custom-font">Your text here</span>
于 2012-06-28T23:23:06.143 に答える
0

2つの潜在的な問題があります。

@ font-faceは、特定のブラウザおよび特定のフォントタイプでのみサポートされます

IE9は.eotフォントの@font-faceをサポートしますIE8以前は@font-faceをサポートしませんFirefox、Opera、Chrome、およびSafariは*.ttfおよび*.otfフォントの@font-faceをサポートします

これをIEでテストしていますか？*.ttfは機能しません。

2番目に考えられる問題-「フォント」という単語をセレクターとして使用せずにこれを実行してみてください。一意のセレクターを使用するか、本体またはpセレクターに割り当てます

編集-1つの領域にこれが必要であることがわかりました。新しいセレクターを選択し、次のようなフォントスタイルを使用します。

@font-face {
  font-family: "ARBONNIE";
  src: url("Custom/ARBONNIE.ttf");}

ArbFont {font:16pt "Arbonnie";}

次に、次のような新しいセレクターを使用するようにhtmlを変更します。

<div id="ArbFont">This is in Arbonnie</div>
于 2012-06-28T23:03:59.103 に答える
0

ウェブサイト全体に使用していますか？

「font {}」を置く場所は、div、a、p、span、bodyなどのフォントを割り当てる必要がある場所です。

それでbody { font-family: "ARBONNIE"; }、それが役立つことを願ってください。

于 2012-06-28T22:48:47.070 に答える