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定义之后，必须使用分号而不是逗号（在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标签之前。

Answer 2

在开发人员工具中打开Network标签，查看文件是否实际加载（如果没有加载），您会得到NOT FOUND，然后检查目录结构。

本地托管的Google字体未加载

2 个答案: