Question

我几乎100％肯定我正在做的事情是完全正确的这是我到目前为止所拥有的：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="homepage.css"/>

</head>
<body>
    <div id="menu">
        <p>THE BIG BLUE SITE OF SAILING KNOWLEDGE</p>
    </div>
</body>
</html>

CSS：

@font-face: {font-family: "ostrich-reg"; src: url('Fonts/ostrich-regular-webfont.ttf'); }
@font-face: {font-family: "ostrich-light"; src: url("Fonts/ostrich-light.ttf"); }
@font-face: {font-family: "collab"; src: url("Fonts/ColabThi.otf"); }

#menu {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    height: 100vh;
    width: 27%;
    background: #2d5dac;
    text-align: center;
}

#menu p {
    color: white;
    font-family: ostrich-reg;
    font-size: 60px;
}

那里真的不多，没有太大的错误空间，所以我认为这是我的档案。我从Font Squirrel那里得到了文件，我听说这是一个非常可靠的来源（我之前已经多次使用它们），但是为了好玩，我通过他们的webfont生成器运行它仍然无法正常工作。此外，我直接尝试使用另一个文件并获得相同的结果（它也是另一种格式 - .0tf）。所以我不知道。有什么建议吗？

顺便说一下，我知道这对IE不起作用，我刚刚开始制作这个网站，我现在还不太关心。

以下是我尝试过滤字体时会发生什么： Filtering for Fonts...

所以，只要我这样做，我很确定这意味着字体没有加载。这很奇怪，因为我很确定路径确实正确... .Fonts文件夹与.html文件所在的文件夹相同，字体直接在Fonts文件夹中。

Answer 1

我在我的一个项目中使用了这个字体。我在我的CSS文件中使用了这样的东西（我仍然以这种方式使用我的所有字体）

CSS

@font-face {
    font-family: 'OstrichSansCondensedLight';
    src: url('ostrich-light-webfont.eot');
    src: url('ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('ostrich-light-webfont.woff') format('woff'),
         url('ostrich-light-webfont.ttf') format('truetype'),
         url('ostrich-light-webfont.svg#OstrichSansCondensedLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

但是我使用了.eot，.woff，.ttf，.svg文件。是的，它正在使用IE8 +，因为我使用了src: url('ostrich-light-webfont.eot?#iefix') format('embedded-opentype'),

如果您遇到任何问题或任何字体文件遗失，请告诉我，我可以尝试为您找到。

字体没有显示？

1 个答案: