Question

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

在名为custom.css的常规Web应用程序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

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

1 个答案: