1

font-faceこんにちは私はブラウザに別のフォントを追加するために使用する方法を学ぼうとしていますが、スタイルが適用されていないため、コードに何かが欠けているようです。これが私のコードです：

<div id="logo">
      <img src="img/header/THANATHOS.png" alt="Logo"/>
      <p>a gamers community</p>
</div>

<style>
@font-face {
    font-family: 'HarlowSolid';
    src: url('Fonts/normal/HarlowSolid.eot'); /* IE9 Compat Modes */
    src: url('Fonts/normal/HarlowSolid.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Fonts/normal/HarlowSolid.woff') format('woff'), /* Modern Browsers */
         url('Fonts/normal/HarlowSolid.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Fonts/normal/HarlowSolid.svg#svgFontName') format('svg'); /* Legacy iOS */
}

div#logo p{
    font-family: HarlowSolid , Helvetica , sans-serif;
}
</style>

私はここで何が間違っているのですか？

4

2 に答える 2

5

タグでラップするか<style> /* Code Here */</style>、スタイル シートに配置したことを確認してください。

また、そのコードを記述したファイルへのパスも確認してください。したがって、それが に/css/style.cssあり、harlowSolid.woff が というルート フォルダfontsにある場合、コードは次のようにする必要があります。url('../Fonts/normal/HarlowSolid.woff')

また、テストしているブラウザーがfont-face をサポートしていることも確認してください。あなたが含めた条件付きでは、問題に直面する可能性は低いはずです。

確認のために：投稿した実際のコードは正しいので、ファイルが存在するか、適切に構造化されているかを確認してください。

Chrome/Safari/FF を使用している場合、通常は右クリック -> [要素の検査] を選択し、右下隅にある赤い歯車記号を探します。これは、コーディング/リソース エラーを示します。(クリックすると、問題の説明が表示されます。)

于 2012-09-05T14:59:38.660 に答える
2

2番目のsrcは正しいですか？http://www.w3schools.com/css3/css3_fonts.aspをご覧ください。

@font-face {
    font-family: 'HarlowSolid';
    src: url('Fonts/normal/HarlowSolid.eot'); /* IE9 Compat Modes */
    **src:** url('Fonts/normal/HarlowSolid.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('Fonts/normal/HarlowSolid.woff') format('woff'), /* Modern Browsers */
         url('Fonts/normal/HarlowSolid.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('Fonts/normal/HarlowSolid.svg#svgFontName') format('svg'); /* Legacy iOS */
}
于 2012-09-05T15:55:47.413 に答える