css - 本地托管的 Google 字体未加载

Question

我想在网络托管服务器上本地托管 Google 字体。 但是，字体未加载。我试图简化实现并在我的 index.html 中使用了这些样式:

<style>
    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        src: local('Open Sans Regular'), local('OpenSans-Regular'),
            url('open-sans-v15-latin-regular.woff2') format('woff2'),
            url('open-sans-v15-latin-regular.woff') format('woff'),
            url('open-sans-v15-latin-regular.ttf') format('truetype'),
        }
    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 700;
        src: local('Open Sans Bold'), local('OpenSans-Bold'),
            url('open-sans-v15-latin-700.woff2') format('woff2'),
            url('open-sans-v15-latin-700.woff') format('woff'),
            url('open-sans-v15-latin-700.ttf') format('truetype'),
    }

    body{ font-family:"Open Sans",serif; }
</style>

.woff 和.ttf 文件位于index.html 旁边的根目录中。

我提供了后备字体 'serif' 来尝试确定错误。 该站点始终显示后备 'serif' 而不是 'Open Sans'。 在 DevTools 的“源”选项卡中，我可以看到字体未加载，但“控制台”或服务器日志中没有错误。

我该如何解决这个问题？

更新:像CrissCrossCrass的提示一样，有一个语法错误。在最后一个 src-definition 之后必须有一个分号而不是逗号(在 format:('truetype') 之后)。正确的样式是:

<style>
    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        src: local('Open Sans Regular'), local('OpenSans-Regular'),
            url('open-sans-v15-latin-regular.woff2') format('woff2'),
            url('open-sans-v15-latin-regular.woff') format('woff'),
            url('open-sans-v15-latin-regular.ttf') format('truetype');
        }
    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 700;
        src: local('Open Sans Bold'), local('OpenSans-Bold'),
            url('open-sans-v15-latin-700.woff2') format('woff2'),
            url('open-sans-v15-latin-700.woff') format('woff'),
            url('open-sans-v15-latin-700.ttf') format('truetype');
    }

    body{ font-family:"Open Sans",serif; }
</style>

Answer 1

您的文件目录结构如何？有可能对您的字体文件的引用实际上并不指向您的字体文件。此外，您可能希望将样式标签放在 HTML 标签之前。