0

私は自分のプロジェクトで HTML 5 を使用しています。カスタム フォントを使用したいだけですが、オンラインで利用可能なチュートリアルが機能していないようです。完全に迷っています。

これには 960 グリッド システムを使用しています。カスタム CSS は、 CUSTOM FONTS CSSを置く場所です。

これがHTML 5の私のコードです

<!doctype html>
<html lang="en">

<head>




<meta charset="utf-8">  


<title>LOGIN PAGE</title>
    <meta name="description" content="Administrator">  
    <link rel="stylesheet" type="text/css" media="screen" href="style/reset.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="style/960_12_col.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="style/custom.css" />

</head>
<body>
  <div id="main-container" class="container_12">

    <h1>HEAD</h1>
    <form>
      <ul id="main-login" class="push_2">
        <li><p >USERNAME</p> <input type="text" name="cai_uname"  /></li>
        <li><p>PASSWORD</p> <input type="password" name="cai_pass"  /></li>
        <li><input type="submit" name="cai_login" value="LOGIN" /></li>
      </ul>

    </form>
</body>

ここにCSSがあります

@font-face{
  font-family: AzoftSans;
  src: url('font/azoft-sans.eot');
  src: url('font/azoft-sans.eot?#iefix') format('embedded-opentype'),
       url('font/azoft-sans.ttf') format('truetype');
}

body{
  background:#666666 url("../images/bg_login_half.jpg") repeat-x;

}
h1{
  font:bold 24pt/2  AzoftSans, Tahoma, Arial, Verdana, sans-serif;
  text-align: center;
}

オンラインで入手できる 960 gridsystem reset と 960_12_col.css は貼り付けません。それが私のCSSに影響するかどうかはわかりません。

返信いただきありがとうございます

4

2 に答える 2

0

コードは、Azoft Sansフォントがダウンロードされ、FontSquirrelfontsで処理され、HTML ドキュメントのフォルダーの下の適切なフォルダー ( ) にインストールされている場合、対応するブラウザーで機能します。そのため、プロセスの一部のステップが失敗しました。@font-faceどうやら、 EOF と TTF ファイルのみを参照しているため、FontSquirrel が生成した通常のフォント ファイルと CSS コードを使用していないようですが、FontSquirrel は WOFF と SVG も生成します。

そのため、プロセスを適切に実行したことを確認してください。生成された TTF ファイルも確認してください。開くことができますか?システムに通常のフォントとしてインストールするとどうなりますか? ファイル名とフォルダ名を再確認してください。それでも問題が解決しない場合は、Web 上にテスト ページを設定し、URL を表示します。

于 2012-10-21T13:12:23.143 に答える
0

このようなエラーが発生した場合、chrome(F12) を使用して、ファイルへのすべてのリンクが正しいことを確認します。私はあなたの背景に気づきます

'../images/*.jpg'

試す：

'../font/*.*'

これはあなたにぴったりの正しいフォーマットです。最初に .ttf を置いてみてください。

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}
于 2012-10-21T11:47:39.627 に答える