css - 谷歌字体不再支持下载的文件？

Question

我已将 .ttf 文件从 google 字体下载到我的本地 css 文件夹，但似乎无法正确加载它们。我已经尝试过这些方法：

CSS

@import url('./css/css?family=Cabin+Condensed:400,500,600,700');

@font-face {
    font-family: 'Cabin Condensed';
    font-style: normal;
    font-weight: 700;
    src: local('Cabin Condensed') format('truetype');
}

body, html {
    font-family: 'Cabin Condensed', sans-serif;
}

HTML

<link href="./css/css?family=Cabin+Condensed:400,500,600" rel="stylesheet">

我没有收到任何错误，但字体也没有显示。奇怪的是，官方文档甚至没有提到本地字体。

Answer 1

在我看来，问题在于使用local需要在本地安装字体的路径。

尝试删除 @import并将后备添加src: url到您的src: local:

@font-face {
    font-family: 'Cabin Condensed';
    src: local('Cabin Condensed'), url(<path to the TTF file>);
}

例如：

@font-face {
    font-family: 'Cabin Condensed';
    src: local('Cabin Condensed'), url('/css/fonts/Cabin-Condensed.ttf');
}