Html 无法加载ttf字体

我有一个CSS文件，它试图导入

打开SAN

。我正在使用从谷歌字体下载的

ttf

字体。我似乎无法使用字体。它仍然显示常规时间字体

font.css

@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans-Regular.ttf") format("ttf");
}

body {
    font-family: "Open Sans";
}

app.css

@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans-Regular.ttf") format("ttf");
}

body {
    font-family: "Open Sans";
}

index.html

<link rel="stylesheet" href="dist/fonts.css" />
<link rel="stylesheet" href="dist/app.css" />

我用Chrome的inspector检查字体文件是否被拉入，但事实并非如此。也没有错误。如果我直接从谷歌输入

css

文件，那么它就可以工作了。我还注意到谷歌提供了一种不同的字体格式，而不是

ttf

请注意，我正在使用Electron开发一个桌面应用程序。电子由铬供电。我的应用程序打算离线运行，因此我没有直接链接到谷歌

知道发生了什么吗？

以下方法奏效了：

@font-face {
  font-family: "Open Sans";
  src: url(fonts/OpenSans-Regular.ttf) format("truetype");
}

---

如果你想使用谷歌字体，你不需要将字体文件上传到你的网站文件夹中，只需将此url添加到你的文件html（ )

---

并在css中使用字体系列：

字体系列：'opensans'，Sans serif
以下代码对我有效。使用JavaScript加载字体

let openSans= new FontFace('Open Sans', 'url(./fonts/mem8YaGs126MiZpBA-UFUZ0bbck.woff2)');
openSans.load().then(function(loaded_face) {
    document.fonts.add(loaded_face);
  document.body.style.fontFamily = '"Open Sans", Arial';
}).catch(function(error) {
    // error occurred
   console.error(error);
});

对于电子桌面应用程序，您不希望依赖于根据请求直接从谷歌提取字体，因为应用程序旨在进行脱机访问。好的，我理解，所以您可以从谷歌字体下载字体并生成它以在所有浏览器中工作，对于生成字体，您可以使用此网站：我不需要它在所有浏览器中运行。Electron是由Chrome供电的：在本地进行pi测试，这是工作，将格式（“ttf”）更改为格式（“truetype”）是的，这与我自己的答案相同。我刚才回答了我自己的问题。谢谢你的帮助，伙计。非常感谢。protip：使用WOFF源代码，而不是
ttf
。但更重要的是：直接链接到google webfont。它允许浏览器从缓存中解析URL，因为其他一百万个站点也使用google webfonts中的开放SAN。直接链接到google不是一个选项。我正在创建一个电子桌面应用程序，它使用web技术构建跨浏览器应用程序。该应用程序旨在联机和脱机运行，并在无法脱机时从URL加载字体。这就是我为什么要这样做的原因。很公平——不管怎样，还是要坚持下去。不要使用ttf或otf源。也就是说，没有
格式（'ttf'）
，这是无效的CSS语法，所以。