如何在css中使用下载的字体

Question

这里非常入门级。我有一个.ttf字体文件想用于我的博客，但我不确定如何/在哪里可以获得其编码（？）。这大约是对的吗？

* {
    font-family: 'providence-bold';
    src: url('/font/providence-bold.regular.ttf');
  }

请随意串烧这个，正如我所说的，我对自己在做什么一无所知。

编辑：这是我尝试使用的字体的链接。（如果有帮助）https://ufonts.com/download/providence-bold.html

Answer 1

@font-face {
  font-family: 'providence-bold';
  src: url('/font/providence-bold.regular.ttf');
}

这是我使用的格式。只要确保你的路径是正确的。

旁注：我不喜欢在变量中使用下划线 (_) 和破折号 (-)。建议养成以驼峰命名法或帕斯卡命名法编写变量的习惯。

Answer 2

我建议，包含字体的更好方法是将其转换为这些格式。

将字体转换为所需格式后，您可以从此处获取代码 ->链接

转换字体后，它将生成一个 rar 文件，将其解压，您将找到font.css可以找到这些代码的位置。

@font-face {
font-family: 'providence-bold';
src: url('../fonts/providence-bold.eot');
src: url('../fonts/providence-bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/providence-bold.woff') format('woff'),
      url('../fonts/providence-bold.ttf') format('truetype'),
      url('../fonts/providence-bold.svg#providence-bold') format('svg');
      font-weight: normal;
      font-style: normal;
    }

请务必检查字体位置的 URL。