Question

我是@ font-face的新手。我已经浏览了这里的所有帖子，几个教程，我无法弄清楚为什么我的字体没有加载。我正在激活和停用字体，看它是否通过服务器加载而没有运气。奇怪的是，当它被激活时，它可以在浏览器中工作，但不能在本地工作。

我在fonts文件夹中有css文件，并且都已上传到服务器。我已经测试了字体附带的演示文件，并且工作正常。

我确定我错过了一些非常基本的东西，我觉得非常愚蠢。

这是我的@ font-face css：

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

这是我试图让它继续工作的页面： http://takatech.com/index.2.html#

非常感谢任何帮助。

Answer 1

您的字体位于http://takatech.com/fonts/，但外部样式表根据样式表的位置引用目录。因此，通过指定fonts/Capsuula-webfont.eot，它将在http://takatech.com/fonts/fonts/Capsuula-webfont.eot

中查找该字体

请改为尝试：

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

Answer 2

这是因为字体系列是capsuularegular而你的#main-wide Capsuula

所以，将CSS更改为：

#main-wide {
    color: #999999;
    font-family: "capsuularegular";
    font-size: 14px;
    line-height: 30px;
    text-align: left;
}

Answer 3

尝试设置web.config以允许自定义字体下载到客户端。例如：

<system.webServer>
  ...
  <staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
  </staticContent>
</system.webServer>

@ font-face无法在任何浏览器中加载

3 个答案: