@font-face 不显示自定义字体？

Question

更新：现在解决了！正如 Johannes 在评论中建议的那样，我删除了格式声明和左括号之间的空格。从“格式（'woff'）”到“格式（'woff'）”。我不敢相信额外空间造成的所有时间和挫败感，但我很高兴能在这一切结束！感谢所有试图提供帮助的人。 ***

我使用@font-face 在我的网站项目中使用了两种自定义字体。它们都可以在我安装了字体的计算机上完美显示，但它们不会在任何没有安装字体的计算机上显示。如果我将字体文件上传到我的项目中，并链接到它们，它应该不起作用吗？

我尝试将字体文件放在他们自己的文件夹和 css 文件夹中。我尝试在单独的 src 行上列出每种格式，并以逗号分隔的列表形式列出。如果我直接输入字体的链接（即mysite.com/myfont.ttf）字体下载，所以我真的觉得它应该显示在所有计算机上。

这是我得到的：

@font-face {
    font-family: 'Robotica';
    src: url('robotica.eot');
    src: url('robotica.eot?#iefix') format('embedded-opentype'),
    url('robotica.woff') format ('woff'),
    url('robotica.ttf') format ('truetype'),
    url('robotica.otf') format ('opentype'),
    url('robotica.woff2') format ('woff2');
    font-weight: normal;
    font-style: normal;
} 

@font-face {
    font-family: 'Bradley Hand ITC';
    src: url('bradley.eot');
    src: url('bradley.eot?#iefix') format('embedded-opentype'),
    url('bradley.woff') format ('woff'),
    url('bradley.ttf') format ('truetype'),
    url('bradley.woff2') format ('woff2');
    font-weight: normal;
    font-style: normal;
}

header h1 {
    font-family: 'Bradley Hand ITC';
    font-size: 350%;
    font-weight: 100;
    color: #fcfcfc;
    line-height: 0.5;
}

header h1 span {
    font-family: 'Robotica';
    font-size: 39%;
    color: #101010;
    -webkit-text-stroke: 0.5px #fcfcfc;
    text-shadow: 2px 2px 0 rgba(81, 81, 81, 0.2),
     -1px -1px 0 rgba(81, 81, 81, 0.3),  
      1px -1px 0 rgba(81, 81, 81, 0.3),
      -1px 1px 0 rgba(81, 81, 81, 0.3),
       1px 1px 0 rgba(81, 81, 81, 0.3);
}

?#iefix 也没有工作。问题不是特定于浏览器的。 Font Squirrel 是我用来创建不同格式的，所以这不是答案。

但我在除我之外的任何计算机上尝试过的所有内容都不会显示自定义字体，而是显示默认的衬线字体。

Answer 1

Css 很可能不会读取您放置它们的文件。我建议在那里的网址更具体。像 url(../../css/fonts/robotica.eof)。这是确保它指向在线项目中的路径。该项目是托管的，对吧？

Answer 2

我认为您编写它的方式（即所有可用格式的单独 src 定义）会使 woff2 格式覆盖所有其他格式，因此如果浏览器无法处理 woff2，它将无法工作。

因此，不要使用所有这些分号并重复src，而是这样尝试：

@font-face {
    font-family: 'Robotica';
     src: url('robotica.eot') format('embedded-opentype'),
          url('robotica.woff') format ('woff'),
          url('robotica.ttf') format ('truetype'),
          url('robotica.otf') format ('opentype'),
          url('robotica.woff2') format ('woff2');
    font-weight: normal;
    font-style: normal;
} 

（其他字体相同/相似）

编辑（从评论移到答案）：此外，您应该删除format 和格式描述的后续左括号之间的空格（如格式（'woff'）而不是格式（'woff'）。