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

Question

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

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

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

我几乎是新手，我已经编写 HTML 和 CSS 代码大约 4 个月了。我以前一直坚持这个，这让我取消了我的项目，因为我放弃了。但我不想再放弃。所以我真的很感激一些帮助！ :)

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 应该参考特定的字体选择。

How do i embed a custom font in CSS?