Question

我正在尝试使用自定义字体作为我网站的部分文本，并且无法弄清楚为什么我的脚本无法识别字体。我将'ParisJetAime.otf'上传到我的主html文件夹下的/ font /文件夹中，并将其包含在我的脚本中：

 #font-face {
     font-family: h1style;
     src: url(font/ParisJeTAime.otf)
 }
 #text {
     font-size: 30px;
     color: #ffffff;
     font-family: ParisJeTAime.ttf;
     margin: 220px auto auto 130px 
 }

我的测试div标签如下所示：

 <div id="main">
     <form method="post" action="">
         <div id="text">
             Font Test
         </div>
         <input type="text" name="q" id="search" />
         <input type="submit" name="submit" id="submit" value="Go!" />
     </form>
 </div>

我错过了一段代码吗？文本显示但标准Tahoma而不是我想要的。谢谢！

编辑：

使用fontsquirrel并将其作为新代码：

#font-face {
    font-family: 'ParisJeTAimeRegular';
    src: url(fonts/'parisjetaime-webfont.eot');
    src: url(fonts/'parisjetaime-webfont.eot?#iefix') format('eot'),
         url(fonts/'parisjetaime-webfont.woff') format('woff'),
         url(fonts/'parisjetaime-webfont.ttf') format('truetype'),
         url(fonts/'parisjetaime-webfont.svg#webfontysiEwOWy') format('svg');
    font-weight: normal;
    font-style: normal;
  }
#text {
    font-size: 30px;
    color: #ffffff;
    font-family: parisjetaime-webfont.ttf;
    margin: 220px auto auto 130px ;

}

仍然没有运气 - 任何想法？

Answer 1

检查此处是否不是网络安全的字体 - fontsquirrel

Answer 2

您需要弄清楚的一件事是您是否有权使用该字体。在线使用字体（在实践和许可问题上）都很棘手。幸运的是，有一些服务使这很容易（和合法）。

http://typekit.com/

http://www.google.com/webfonts

Answer 3

您使用的是错误的，它应该是@font-face而font-family定义了您要使用的名称，所以在您的情况下：

@font-face {
     font-family: 'ParisJeTAime';     // the name you want to use
     src: url('font/ParisJeTAime.otf');
}
#text {
    font-family: 'ParisJeTAime', Arial, etc.;    // the name you defined for your font
}

另请注意，在任何其他样式声明之前，@font-face声明需要位于css文件的顶部。

除此之外，您将遇到跨浏览器问题，因为所有浏览器都使用不同类型的字体，因此只有.otf不会削减它（我甚至不知道哪个浏览器使用{ {1}} ...）。您需要一个包含不同源文件（.otf，.eot，.woff等）的列表，以使其在最常用的浏览器中运行。

修改：修改后，您仍然使用错误，需要使用.ttf代替@，并且需要在#中使用正确的名称{1}}：

#text

有关网站上的非标准字体的问题

3 个答案: