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

Question

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

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

随意串扰，就像我说的那样，我对自己的工作一无所知。

编辑：如果可以帮助https://ufonts.com/download/providence-bold.html

，请点击此处，找到我要使用的字体的链接

Answer 1

我会建议，一种更好的方式包括字体是将其转换为这些格式。

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

转换字体后，它将生成一个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到字体的位置。

Answer 2

您需要从此处提供的网址中添加指向字体的链接：

https://ufonts.com/download/providence-bold.html

如果您像这样../providence-bold.html添加它们，则它们是相对于html文档的。因此，需要将其安装在服务器http://yourname.tumblr.com或其他任何设备上。

如果将URL更改为指向ufonts上的资源，则它应该起作用。

所以

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

但是这些资源必须存在于ufonts URL处。如果这只是下载ttf文件的地方，则将无法使用。必须从某个地方提供它们，并且tumblr不允许您将字体文件上传到它们的服务器。

Answer 3

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

}

这是我使用的格式。只要确保您的路径正确无误即可。

旁注： 我不喜欢在变量中使用下划线（_）和破折号（-）。如果您习惯于将变量编写为camelCase或PiscalCase，那么您的抵抗力就会更大。

Answer 4

首先，您需要获取正确格式的字体。您可以在https://fontsly.com/gothic/celtic等网站上以所需的.ttf格式下载它们，也可以使用某些转换器。