无法加载@font-face 字体

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

尝试

@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 文件被编译到 'main.css'，但是您从 css 文件到字体位置的路径不正确，因为您首先在在层次结构中上升一个级别。所以修改源 url 并添加 ../ 使 url("../data/fnt/Fishfingers.ttf")

Answer 3

答案是font facemixin要求format("ttf");写成format("truetype");。

而format("otf");会变成format("opentype");，等等

无法加载@font-face 字体

Unable to load @font-face fonts

css

apache

fonts

directory-structure

sass