Question

我正在尝试使用@font-face中的CSS在GitHub页面上使用自定义网络字体。我在存储库中创建了一个文件夹并上传了.woff - 我想要使用的字体文件。但是，我似乎无法正确链接字体。下面你会找到我正在使用的非常基本的HTML和CSS。

在我的GitHub页面（[username].github.io）中，可以简单地链接样式表，因为它位于与index.html相同的目录中的文件夹中：

现在，为什么我似乎无法链接.woff - 文件也位于同一目录中的文件夹中？：

我尝试通过@font-face链接到字体并使用Assets/AkzidenzGrotesk-Regular.woff作为url来实现此目的。然而，该站点拒绝使用该字体并按照CSS中的规定回退到Times。

有人可以帮我解释并向我解释，为什么会这样？如何链接字体文件以便在网站上使用它？

我的索引文件：

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="CSS/basic.css">

    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">


</head>

<body>

    <h1>Personal HTML-Projcet</h1>
    <p>Personal web design project, hosted via GitHub-Pages.</p>

        <div class="grotesk">

            <p>This is a test, using Akzidenz Grotesk as a webfont.</p>

        </div>

</body>

</html>

各自的CSS：

@font-face {
    font-family: AkzidenzGroteskRegular;
    src: url(/Assets/AkzidenzGrotesk-Regular.woff);
}


body {

    background-color: white;
    font-family: 'Work Sans', sans-serif;

    }

h1 {

    color: black;

}

p {

    color: black;

}

.grotesk {

    font-family: 'AkzidenzGroteskRegular', 'Times';

}

Answer 1

请务必刷新缓存，因为我在j0hnga1t.github.io上看到的所有内容都显示使用了 Berthold Akzidenz-Grotesk Regular字体。

无法通过GitHub页面上的@ font-face链接自定义字体

1 个答案: