如何将此字体包含在我的 HTML 中？

Question

我在网页上发现了一种名为 Slim Joe 的漂亮字体，我在下面发布了 link。

即使我花了很多时间搜索他们的代码，我也找不到 how/where 他们包含的字体。我可以看到它在他们的 CSS 文件中使用（字体：Slim-Joe），但我看不到它包含在他们的 html.

中的什么地方

有人可以帮我把这个字体加入我的 html 吗？当我浏览 Google 提供的字体时，我明白 do/how 的样子（因为它们很容易包含在我的 HTML 中），但我不能对这个特定字体做任何事情。

包含它的网页：

http://presentation.creative-tim.com/（上面写着 "creative tim"）

字体的样子：

https://befonts.com/big-john-slim-joe-font.html

Answer 1

您可以通过 css @font-face 规则将字体包含到您的网站中。这需要在您的服务器上有 otf 或 ttf 字体文件。要完成这项工作，您可以使用 font-family 属性来命名字体。这是您稍后将用来引用您下载的字体的内容。然后使用 src 将其映射到下载到计算机某处的 ttf 或 otf 文件。

像这样声明

@font-face {
  font-family: john-slim-joe;
  src: url(myFontsFolder/john-slim-joe.ttf);
}

像这样使用

p{
  font-family: john-slim-joe;
}

Answer 2

要将字体添加到您的网站：

找到 CSS 文件。
创建或找到您的字体文件夹。
使用 CSS 的 @font-face 属性通过 url 添加字体文件。这也是您命名字体的地方。这是 W3School.com 的 CSS @font-face Rule
之后，可以使用"font-family"属性。

希望对您有所帮助！

Answer 3

您引用的网站 (http://presentation.creative-tim.com/) 已从给定目录导入字体文件。查看 Html header ，您会发现以下行：

<link href="/assets/css/fonts/Rubik-Fonts.css" rel="stylesheet" />

在此文件中，您可以看到他们如何导入和声明 Slim-Joe 字体。

@font-face {
    font-family: 'Slim-Joe';
    src:url('../../fonts/Slim-Joe/Slim-Joe.eot?d7yf1v');
    src:url('../../fonts/Slim-Joe/Slim-Joe.eot?#iefixd7yf1v') format('embedded-opentype'),
    url('../../fonts/Slim-Joe/Slim-Joe.woff?d7yf1v') format('woff'),
    url('../../fonts/Slim-Joe/Slim-Joe.ttf?d7yf1v') format('truetype');
    font-weight: normal;
    font-style: normal;
}

以及导航栏的用法 css：

.navbar .navbar-brand {
    font-weight: 600;
    margin: 5px 0px;
    padding: 20px 15px;
    font-size: 20px;
    font-family: "Slim-Joe";
    letter-spacing: 0;
}

如何将此字体包含在我的 HTML 中？

How do I include this font in my HTML?

html

css

webfonts