使用 <span style> 在 HTML 中包含字体

Question

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

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

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

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

Answer 1

使用@font-face，它将按您的预期工作。检查字体名称中的拼写错误，确保使用正确的标点符号。

@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");
}

<span style="font-family:formula1-display-regular;font-size:2em">Safety Car</span>

代码笔link

PS：这个 sn-p 在这里可能不起作用，但可以在上面的 codepen 链接上工作。

Answer 2

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

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

A.有关@font-face属性的更多详细信息Click here Now B. 对于视频教程Click here Now

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

@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");
}