无法加载@字体字体

Question

我下载的字体没有出现在Chrome中。我使用的是scss，它通过gulp编译成css。

如果我直接去

http://project-name.localhost/data/fnt/Shermlock.ttf

它下载字体。

_fonts.scss:

@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");
}

包括在main.scss中的如下内容：

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

HTML:

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

项目文件夹结构：

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

Apache安装程序：

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

编辑：查看网络请求，比方说Fishfingers，我获得了正确的文件作为200响应：

Request URL: http://project-name.localhost/data/fnt/Fishfingers.ttf

在浏览器中插入这个url可以下载字体文件。

Chrome开发工具中的响应：

​

​

Answer 1

答案是字体面混联需要将format("ttf");写成format("truetype");。

format("otf");就会变成format("opentype");等等。

Answer 2

试一试

@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 3

正如您正确地指出的，css文件被编译到'main.css‘中，但是您从css文件到字体位置的路径是不正确的，因为您首先要在层次结构上上升一级。因此，修改源url并添加../以生成url("../data/fnt/Fishfingers.ttf")。