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

Question

我已将 .ttf 文件从 google fonts 下载到我的本地 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">

我没有收到任何错误，但也没有显示字体。 奇怪的是，official docs甚至不要提及本地字体。

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');
}