无法加载@ font-face字体

Question

我下载的字体没有出现在Chrome中。我正在使用scss，css通过gulp编译为http://project-name.localhost/data/fnt/Shermlock.ttf 。

如果我直接去

@font-face {
  font-family: 'Fishfingers';
  font-weight: normal;
  src: url("data/fnt/Fishfingers.ttf") format("ttf");
}
@font-face {
  font-family: 'Shermlock';
  font-weight: normal;
  src: url("data/fnt/Shermlock.ttf") format("ttf");
}

下载字体。

_fonts.scss：

...
@import "base/fonts";
@import "global";
...

包含在 main.scss 中：

...
span {
    font-size: 42px;
    font-family: 'Shermlock', sans-serif;
    text-transform: uppercase;
}
...
.task {
    font-family: 'Fishfingers', sans-serif;
    font-weight: 400;
}
...

HTML：

project-name/
    build/
       index.html
       css/
           main.css <--- compiled scss
       data/
         fnt/
            Fishfingers.ttf
            Shermlock.ttf
    js/...
    sass/
       base/
           _fonts.scss
           ...
       _global.scss
       main.scss

项目文件夹结构：

<VirtualHost *:80>
   ServerName project-name.localhost
   DocumentRoot /Users/myname/Sites/project-name/build
</VirtualHost>

Apache设置：

Fishfingers

编辑：查看网络请求，比方说200，我得到了正确的文件作为Request URL: http://project-name.localhost/data/fnt/Fishfingers.ttf 响应：

str

在浏览器中插入此网址会下载字体文件。

Chrome开发工具中的响应：

Answer 1

尝试

@font-face {
  font-family: 'Fishfingers';
  font-weight: normal;
  src: url("./data/fnt/Fishfingers.ttf") format("ttf");
}
@font-face {
  font-family: 'Shermlock';
  font-weight: normal;
  src: url("./data/fnt/Shermlock.ttf") format("ttf");
}

Answer 2

正如您正确指出的那样，您的css文件已编译到＆＃39; main.css＆＃39;但是您从css文件到字体位置的路径不正确，因为您第一次接下来会上升一级层次结构。因此，请修改源网址并在../前加url("../data/fnt/Fishfingers.ttf")

Answer 3

答案是font face mixin要求format("ttf");写为format("truetype");。

format("otf");将成为format("opentype");等等。