html - 无法加载 ttf 字体

Question

我有一个 CSS 文件试图导入 Open Sans。我使用的是从 Google Fonts 下载的 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");
}