简单 html 网站上的自定义字体将无法加载

Question

我一直在关注在线代码和示例，尝试在我非常基础的 html 网站上使用自定义字体。如果重要的话，我正在使用 django。

备注文件：

aurebesh_translator.html

<!DOCTYPE html>
<html>
    <link rel="stylesheet" type="text/css" href="main.css">
    <p>This should be in aurebesh</p>
</html>

main.css

@font-face {
    font-family: "aurebesh";
    src: url(aurebesh.ttf);
    font-style: normal;
    font-weight: 100;
}

p {
    font-family: aurebesh;
    font-weight: 100;
}

这些排列如下：

| templates
| - ...
| - main.css
| - aurebesh_translator.html
| - fonts
| -- aurebesh.ttf

... 其中 aurebesh.ttf 文件是我要使用的字体的关联字体文件。

据我在网上了解到的情况，这似乎是使用我的自定义字体的格式化方式。奇怪的是，如果我只是将上述文件复制到我的桌面（这样只有 main.css、aurebesh_translator.html 和 fonts/aurebesh.ttf 存在）和运行 aurebesh_translator.html 在浏览器中，成功加载并使用字体！这对我来说非常奇怪，因为当我将这些文件包含在我网站其余文件的上下文中时，它会以某种方式停止工作！我试过在 chrome 和 firefox 中打开它，但都不起作用（它们都在没有我的自定义字体的情况下加载）。

这是我在尝试访问页面时从我的终端运行连接我的服务器得到的错误：

[01/Jun/2020 00:08:18] "GET /articles/aurebesh_translator HTTP/1.1" 200 127
Not Found: /articles/main.css
[01/Jun/2020 00:08:18] "GET /articles/main.css HTTP/1.1" 404 4061

我该如何解决这个错误？

Answer 1

在 Django 中，当您 link css/js 静态文件在 href 属性中使用 static 标记时，即 href = "{% static 'path_of_file' %}" 在这种情况下使用 href = "{% static 'main.css' %}"

Answer 2

在静态文件夹中添加这些文件，

main.css
aurebesh.ttf
字体

由于您使用的是 django，css 或图像等静态文件不能直接在 html 中使用。您必须在 html 中加载静态文件并更改文件的路径。

<!DOCTYPE html>
<html>
{% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'main.css' %}">
    <p>This should be in aurebesh</p>
</html>

简单 html 网站上的自定义字体将无法加载

Custom font on simple html website will not load

html

css

django

fonts