无法加载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。

您有什么想法？

- BugHunterUK

---

专业提示：使用WOFF源，而不是ttf。更重要的是，直接链接到Google Web字体。它可以让浏览器从缓存中解析该URL，因为还有其他无数站点也使用Google Web字体中的Open Sans。 - Mike 'Pomax' Kamermans

直接链接到Google不是一个选项。我正在创建一个Electron桌面应用程序，它使用Web技术构建跨浏览器应用程序。该应用程序旨在在线和离线运行，当离线时从URL加载字体是不可能的。这就是为什么我必须这样做的原因。 - BugHunterUK

好的，那就坚持使用WOFF格式吧。不要使用ttf或otf源文件。话虽如此，“format（'ttf'）”是无效的CSS语法，因此请查看有效的CSS字体格式。 - Mike 'Pomax' Kamermans

Answer 1

以下内容是可行的：

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

- BugHunterUK

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

- Peter

Answer 3

如果您想使用Google字体，您不需要将字体文件上传到您的网站文件夹中，只需将此URL添加到您的HTML文件中（

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

- Hafid Denguir

---

对于 Electron 桌面应用程序，您不希望依赖每个请求直接从 Google 拉取字体，因为应用程序旨在具有离线访问功能。 - BugHunterUK

好的，我明白了，所以你可以从Google字体库下载字体，并将其生成为适用于所有浏览器的字体。要生成字体，您可以使用此网站：https://www.fontsquirrel.com/tools/webfont-generator - Hafid Denguir

我不需要它在所有浏览器上运行。Electron 由 Chrome 驱动:p - BugHunterUK

我在本地测试过了，它可以工作。将格式（'ttf'）更改为格式（'truetype'）。 - Hafid Denguir

是的，这和我的答案一样。我一段时间前回答了自己的问题。不过还是谢谢你的帮助，伙计。非常感激。 - BugHunterUK