如何在 CSS 中嵌入自定义字体？

Question

我最近一直在尝试将字体嵌入我的网站。我没有让它工作，我已经观看并阅读了教程。我不想以 ttf 格式嵌入名为“Ubuntu Light”的字体。这就是我一直在尝试的：

#logBtn{
  font-family: 'UbuntuLight';
}
@font-face{
font-family: "UbuntuLight";
src: url("CSS/Ubuntu-L.ttf");
}

以及文件夹中的文件：Treeview of project

我几乎是新手，我在 4 个月内一直在编写 HTML 和 CSS。 我之前一直被困在这个问题上，这让我取消了我的项目，因为我放弃了。但我不想再次放弃。所以我真的很感激一些帮助！ :)

Answer 1

url(...) 路径是相对于样式表的。

因此，由于您的样式表位于 CSS 文件夹中，因此您无需将其包含在 url 中：

@font-face{
  font-family: "UbuntuLight";
  src: url("Ubuntu-L.ttf");
}

Answer 2

您可以使用以下代码快速轻松地嵌入字体：

@font-face {
  font-family: 'Name';
  src: url('Font.ext');
  font-weight: 400;
  font-style: normal;
}

Font.ext 应替换为您的字体文件及其扩展名（文件类型），例如

src: url('Ubuntu-L.ttf');

以下 font-weight 和 font-style 应该引用特定的字体选择。