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

当我遇到这样的错误时，我使用 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 回答
0

当Azoft Sans字体已下载、使用FontSquirrelfonts处理并安装在HTML 文档文件夹下的适当文件夹 ( ) 中时，该代码在支持的浏览器上有效。因此，该过程中的某些步骤失败了。显然，您没有使用普通的 FontSquirrel 生成的字体文件和 CSS 代码，因为您@font-face仅引用 EOF 和 TTF 文件，但 FontSquirrel 也会生成 WOFF 和 SVG。

因此，请检查您是否正确执行了该过程。还要检查例如生成的 TTF 文件：你能打开它吗？如果你把它安装为系统中的普通字体会发生什么？仔细检查文件和文件夹名称。如果问题仍然存在，请在 Web 上设置一个测试页面并显示 URL。

于 2012-10-21T13:12:23.143 回答