代码之家 › 专栏 › 技术社区 › user3871

无法加载@FONT face字体

directory-structure sass fonts apache css

user3871 · 技术社区 · 7 年前

我下载的字体没有显示在Chrome中。我使用的是 scss which is compiled to css via gulp 。


   
    
     
      如果我直接去
     
     http://project-name.localhost/data/fnt/shermlock.ttf
它下载字体。


_fonts.scss:。


字体{
字体系列:“fishfingers”;
字体粗细:正常;
src:url(“data/fnt/fishfingers.ttf”)格式(“ttf”);
}
@字体{
字体系列:“shermlock”;
字体粗细:正常;
src:url(“data/fnt/shermlock.ttf”)格式(“ttf”);
}
包括在main.scss中


……
@导入“基础/字体”;
@导入“全局”;
……
html:


……
跨度{
字体大小:42px;
字体系列:“shermlock”,无衬线;
文本转换:大写;
}
……
.任务{
字体系列:“fishfingers”,无衬线;
字体粗细:400;
}
……
项目文件夹结构:


项目名称/
构建/
CSS/
JS/……
_字体.scss
_全球.scss


servername项目名称.localhost
</virtualhost>




请求URL:http://project-name.localhost/data/fnt/fishfingers.ttf

在浏览器中插入此URL将下载字体文件。



.

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




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




...
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




<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将下载字体文件。

3 回复 | 直到 7 年前

Muhammad Seerat Awan 7 年前

尝试

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