css - 使用@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

我认为您编写它的方式(即所有可用格式的单独 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 和格式描述的后续左括号之间的空格(如 format('woff') 而不是 format ( 'woff')。