时间戳

首页 > 解决方案 > @font-face 不显示自定义字体？

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

问题描述

更新：现在解决了！正如 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 是我用来创建不同格式的，所以这不是答案。

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

标签： cssfont-facewebfonts

解决方案

我认为您编写它的方式（即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'）。

推荐阅读