如何在 Django 项目中使用下载的字体而不是 google 字体 api

Question

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

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

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

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

我已经试过了：

templates/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 文件版本：

static/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 基本文件，而且我还不够先进，看不出在哪里可以改变。

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

Answer 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。

如何在 Django 项目中使用下载的字体而不是 google 字体 api

How to use a downloaded font in a django project instead of google fonts api

html

css

django

fonts