如何在 django 项目中使用下载的字体而不是 google fonts api答案

【问题标题】：How to use a downloaded font in a django project instead of google fonts api如何在 django 项目中使用下载的字体而不是 google fonts api
【发布时间】：2021-03-09 13:36:17
【问题描述】：

我无法在任何地方找到解决问题的方法，所以我希望能得到一些帮助。我是编程新手，也是 django 新手。我遵循以下tutorial 直到第 4 部分开始。

到目前为止一切顺利。现在我在网上找到了一种我想使用的新字体，而不是教程使用的 google 字体，用于顶部栏中的 django“徽标”（称为 Crimson Foam）。

问题是，我不知道如何在我的 base.html 文件中使用它以及如何处理我的 css 文件（我已经看到您显然需要使用这些文件）。我的静态文件是这样组织的：

-- static
 |--fonts
 | |--crimson_foam.ttf
 |
 |--css
   |-- app2.css
   |-- bootstrap files

我试过这样：

模板/base.html

{% load static %}<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{% block title %}Django Boards{% endblock %}</title>
    <link href="{% static 'fonts/crimson_foam.ttf' %}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/app2.css' %}">
  </head>
Rest of the html file

我尝试了 2 个不同的 .css 文件版本：

静态/css/app2.css

版本 1：

title {
    color:#FAB4FF;
    font-family: "Crimson foam";      #didnt know what to put there
}

版本 2：

.navbar_brand {
    font-family: "Crimson foam", regular;
}

说实话，我对 django 有太多的了解让我不知所措。我知道有类似的线程，但他们不是在谈论 html 基础文件，而且我还不够先进，无法看到在哪里进行更改。

提前感谢大家阅读这篇长文！

【问题讨论】：

查看这篇文章：stackoverflow.com/questions/21346045/django-new-fonts

标签： html css django fonts

【解决方案1】：

对于找到解决我问题的方法的每个人，我都找到了答案：

我的解决方案使用了一个名为 @font-face 的 css 方法。

为了达到想要的结果，我们必须将以下代码添加到我们的 css 文件中：

css/app2.css

@font-face {
    font-family: "Any name you want to give your font for further use";
    src: url("either an absolute path from your homedirectory or a relative path");
}

# in my Case the code looked like this:

@font-face {
    font-family: "Crimson Foam";
    src: url("../fonts/crimson_foam.ttf);
}

这样，您可以将名称为“Crimson Foam”的字体添加到可用字体池中。您可以将多个 @font-face 方法放在一个 .css 文件中。

要使用刚刚声明的字体名，您可以做以下两件事之一：

将其分配给 html 特定标签：

html-tag.your_method_name {
    font-family: "One of the fonts you assigned with @font-face", style (like regular or cursive);
    font-size: A percantage (like 150%) or pixel like "36px";
}

# In my case, that looked like this:

h1.crimson_method {
    font-family: Crimson Foam, regular;
    font-size: 30px;
}

您也可以在不指定标签的情况下创建字体方法，如下所示：

.method_name {
    font-family: "";
    font-size: "";
}

完成此操作后，您还必须在 html 文件中的 class="something" 部分中提及您的方法名称。可能是这样的：

{% load static %}<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title class="crimson_method">{% block title %}Django Boards{% endblock %}</title>
  </head>
Rest of the html file

我在问题的 html 部分中使用的链接用于引用一个网站，我从中获得了 google 字体。还有一种实现 google 字体的方法，但是对于这个主题，网上有很多很好的教程，比如 this one。

【讨论】：