html - 在 HTML 中包含字体

Question

我试图在我的 HTML 代码中包含一种字体，但我做不到。字体是这样的：

它有几种“子字体”，我想在它们之间进行选择，但我不知道为什么。其他也具有“子字体”的字体按预期工作，即使我无法在“子字体”之间进行选择

我编写了以下代码进行测试：
lang=html"<span style="font-family:Formula1 Display-Regular; font-size:2em">Safety Car</span>

首先，我想知道是否可以在不使用 CSS 的情况下放置字体。第二个是，我应该怎么做（如果可能的话使用 HTML，还有 CSS？

标签： htmlcssfonts

Answer 1

当您在 Web 开发中使用外部字体时，您必须在CSS文件中导入该字体。但有时CDN 链接不适用于某些字体。因此，在这种情况下，您必须使用该@font-face属性来使用该字体并从本地文件中导入该字体。我已经为 formula1 字体提供了@font-face CSS。所以你已经遵循了一些步骤。

1. 复制@font-face 我在下面提供的 CSS 代码并将其粘贴到您的 CSS 文件中。
2. 之后访问本网站并下载.ttf文件，将此文件添加到您的项目文件夹中。
3. 现在您可以使用外部字体了。

A. 有关@font-face房产的更多详细信息，请点击此处 B.视频教程请点击此处

注意：请确保您的文件路径正确

@font-face{
    font-family:"formula1-display-regular";
    src:url("https://candyfonts.com/wp-data/2018/10/26/11543/Formula1-Regular_web_0.ttf") format("woff"),
    url("https://candyfonts.com/wp-data/2018/10/26/11543/Formula1-Regular_web_0.ttf") format("opentype"),
    url("https://candyfonts.com/wp-data/2018/10/26/11543/Formula1-Regular_web_0.ttf") format("truetype");
}