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

Question

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

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

我试过将字体文件放在它们自己的文件夹和 css 文件夹中。我试过将每种格式列在单独的 src 行中并作为逗号分隔列表。如果我直接在字体中输入 link（即 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 中更加具体。喜欢 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;
}

（same/similar 为其他字体）

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

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

Custom font not displaying with @font-face?

css

font-face

webfonts