Question

我有一个试图导入Open Sans的CSS文件。我使用从Google字体下载的ttf字体。我似乎无法让字体工作。它仍然显示常规Times字体。

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的检查员来检查字体文件是否被拉入，但它不是。这也没有错误。如果我直接从Google添加css文件，那么它可以运行。我还注意到Google提供的不同字体格式不是ttf。

请注意，我正在使用Electron开发桌面应用程序。 Electron由Chrome提供动力。我的应用程序旨在脱机运行，因此我没有直接链接到Google。

知道发生了什么事吗？

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

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

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

无法加载ttf字体

3 个答案: