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

Question

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

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

和文件夹中的文件： 项目的Treeview

我几乎是新手，我已经在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应该引用特定的字体选择。