无法加载ttf字体

Question

我有一个CSS文件试图导入Open Sans。我使用的是从谷歌字体下载的ttf字体。我似乎不能让字体起作用。它还在显示普通的“时代”字体。

fonts.css

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

app.css

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

index.html

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

我的目录结构如下：

/app
 - dist
   - fonts
   app.css
   app.js
   fonts.css
 index.html

我已经使用Chrome的检查器来检查字体文件是否被拉进来了，但是没有，也没有错误。如果我从谷歌直接包含css文件，那么它就能工作。我还注意到谷歌提供了一种不同的字体格式，而不是ttf。

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

知道怎么回事吗？

Answer 1

以下措施发挥了作用：

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

Answer 2

下面的代码对我有效。使用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);
});

Answer 3

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

并在css：font-family: 'Open Sans', sans-serif;中使用字体系列