如何在 html 和 css 中使用不常见的字体 [重复]答案

【问题标题】：how to use uncommon fonts in html and css [duplicate]如何在 html 和 css 中使用不常见的字体 [重复]
【发布时间】：2020-12-27 04:29:48
【问题描述】：

我想在 html 中使用一些不常见的字体，但无法让它们工作。例如，我想使用 Kollekif 字体类型，但它不起作用

<!DOCTYPE html>
<html>
<head>
<style>
p.b {
  font-family: "Kollekif", Times, serif;
}

p.a {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
 
<p class="a">This work for Arial Font </p>

<p class="b">How can I make this font Kollekif</p>

</body>
</html>

我怎样才能实现这些不常见的字体？

【问题讨论】：

谷歌字体之类的，或者@font-face
尝试使用 Google 字体。这是一个font，看起来与 Kollektif 几乎一模一样。

标签： javascript html fonts

【解决方案1】：

要包含自定义字体，您需要包含可以加载该字体的资源。

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

例如，如果您下载 Kollekif 并将它们托管在托管 html 的字体文件夹中：

@font-face {
  font-family: "Kollekif";
  src: url("/fonts/Kollekif-webfont.woff2") format("woff2"),
       url("/fonts/Kollekif-webfont.woff") format("woff");
}

【讨论】：

【解决方案2】：

根据您的目标浏览器，您可以使用 @font-face。你可以在这里了解更多：https://www.w3schools.com/Css/css3_fonts.asp

如果将字体下载到与HTML页面相同的文件夹，可以使用以下代码（我假设字体保存为Kollektif.ttf）

<style>
@font-face {
   font-family: myFont;
   src: url(Kollektif.ttf);
}

p.b {
   font-family: myFont;
}

p.a {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

【讨论】：

【解决方案3】：

您需要从文件或 Google 字体中导入字体。

@import url(https://fonts.googleapis.com/css?family=Bungee);

CodePen using Google Fonts.

https://css-tricks.com/snippets/css/using-font-face/

【讨论】：

【解决方案4】：

一种不常见的字体或非标准字体可能无法通过调用其名称直接使用。事实证明，Kollekif 可能就是其中之一。要使用此类字体，您必须事先导入它们才能使用它们。

现在我无法找到Kollekif 的嵌入链接，所以我使用了另一种示例字体。您可以从Google Fonts 找到许多免费字体，但是如果您确实必须使用 Kollekif，您可以添加字体文件（.ttf、.otf、.woff 等）并使用它们的相对路径链接它们！

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Long+Cang&display=swap" rel="stylesheet">
<style>
p.b {
  font-family: "Long Cang", Times, serif;
}

p.a {
  font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
 
<p class="a">This work for Arial Font </p>

<p class="b">How can I make this font Kollekif</p>

</body>
</html>

【讨论】：