自定义字体未显示在我的网页中

Question

我有一个特定的字体集，我想在为我的班级项目构建的 Web 应用程序上实现它。现在，我通过 GitHub Pages 将它全部托管在 GitHub 上。索引页目前使用了 4 个 CSS 文件，一个用于Animate.css，一个用于整个应用程序的通用 CSS 文件，一个 Bootstrap 的 CSS 文件，另一个是专门用于它的 CSS 文件。

在名为 custom.css 的通用网络应用 CSS 文件中，我有以下代码：

@CHARSET "ISO-8859-1";

@type-face {
font-family: FuturaStd-HeavyOblique;
src: url('fonts/FUTURASTD-HEAVYOBLIQUE.OTF');
}

@
type-face {
    font-family: COUTURE Bold;
    src: url('fonts/COUTURE-Bold.ttf');
}

.body {
    background-color: black;
    color: white;
    height: 100%;
}

这是我的 index.css 文件：

body {
    background-image: url('../images/flyknit.jpg');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    -webkit-background-size: cover;
}

.indexTitle {
    font-family: FuturaStd-HeavyOblique;
    text-align: center;
}

h1 {
    font-size: 500%;
}

.buttonBox {
    margin-top: 150px;
    text-align: center;
    font-family: FuturaStd-HeavyOblique;
}

#bbText {
    text-align: center;
}

a {
    color: white    
}

起初，这些字体在我的电脑上运行良好，因为我已经安装了它们。但是如果我要通过 GitHub 运行页面，字体就不会显示出来。最近，该字体甚至无法在我自己的计算机上运行。我做错了什么？任何帮助表示赞赏。

Answer 1

在你的 fonts.css 中试试这个怎么样

@font-face {   
font-family: 'FuturaStd-HeavyOblique'; 
src: url('fonts/FUTURASTD-HEAVYOBLIQUE.OTF');
}

调用它

font-family: 'FuturaStd-HeavyOblique';  

不确定引号是否重要，但我认为@type-face 应该是@font-face