时间戳

首页 > 解决方案 > 为什么服务器向我发送已安装在我机器上的字体？

python - 为什么服务器向我发送已安装在我机器上的字体？

问题描述

我是 web 开发的新手，我正在尝试使用 python 3.7 和 django 作为 web 框架结合使用 web 套接字的通道包来制作一个简单的 web 游戏。

我正在尝试为游戏 UI 使用自定义字体。我使用 csslocal()函数来确保如果客户端已经在他的系统上安装了字体，则不会发送字体，如下所示：

url()两者一起使用是很常见的local()，因此如果可用，则使用用户安装的字体副本，如果在用户的设备上找不到字体副本，则返回下载字体副本。

但是，似乎 django 开发服务器向我发送了这些字体，尽管我已经在我的机器上安装了它们。

这是我的 html 模板和 css：

核心/模板/核心/base.html：

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% if title %}
        <title>Stratego - {{ title }}</title>
    {% else %}
        <title>Stratego</title>
    {% endif %}
    <link rel="stylesheet" href="{% static "core/css/style.css" %}">
</head>

<body>
    {% block content %}{% endblock %}
</body>

</html>

核心/模板/核心/game.html：

{% extends "core/base.html" %}

{% load static %}

{% block content %}
<h1 class="main-header">Hello</h1>
<div class="regular-text">Hello</div>
{% endblock content %}

核心/静态/核心/css/style.css

body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
}

/* ########## Alegreya ########## */

/* Regular */
@font-face {
    font-family: "Alegreya";
    src: local("Alegreya"),
        url("/static/core/fonts/Alegreya-Regular.ttf") format("truetype");
}
/* end Regular */

/* Bold */
@font-face {
    font-family: "Alegreya";
    src: local("Alegreya"),
        url("/static/core/fonts/Alegreya-Bold.ttf") format("truetype");
    font-weight: bold;
}
/* end Bold */

/* Italic */
@font-face {
    font-family: "Alegreya";
    src: local("Alegreya"),
        url("/static/core/fonts/Alegreya-Italic.ttf") format("truetype");
    font-style: italic;
}

@font-face {
    font-family: "Alegreya";
    src: local("Alegreya"),
        url("/static/core/fonts/Alegreya-Italic.ttf") format("truetype");
    font-style: oblique;
}
/* end Italic */

/* Bold-Italic */
@font-face {
    font-family: "Alegreya";
    src: local("Alegreya"),
        url("/static/core/fonts/Alegreya-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Alegreya";
    src: local("Alegreya"),
        url("/static/core/fonts/Alegreya-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: oblique;
}
/* end Bold-Italic */

/* ########## AlegreyaSC ########## */

/* Regular */
@font-face {
    font-family: "AlegreyaSC";
    src: local("Alegreya SC"),
        url("/static/core/fonts/AlegreyaSC-Regular.ttf") format("truetype");
}
/* end Regular */

/* Bold */
@font-face {
    font-family: "AlegreyaSC";
    src: local("Alegreya SC"),
        url("/static/core/fonts/AlegreyaSC-Bold.ttf") format("truetype");
    font-weight: bold;
}
/* end Bold */

/* Italic */
@font-face {
    font-family: "AlegreyaSC";
    src: local("Alegreya SC"),
        url("/static/core/fonts/AlegreyaSC-Italic.ttf") format("truetype");
    font-style: italic;
}

@font-face {
    font-family: "AlegreyaSC";
    src: local("Alegreya SC"),
        url("/static/core/fonts/AlegreyaSC-Italic.ttf") format("truetype");
    font-style: oblique;
}
/* end Italic */

/* Bold-Italic */
@font-face {
    font-family: "AlegreyaSC";
    src: local("Alegreya SC"),
        url("/static/core/fonts/AlegreyaSC-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "AlegreyaSC";
    src: local("Alegreya SC"),
        url("/static/core/fonts/AlegreyaSC-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: oblique;
}
/* end Bold-Italic */

.main-header {
    font-family: "AlegreyaSC";
    font-weight: bold;
}

.regular-text {
    font-family: "Alegreya";
}

字体位于core/static/core/fonts.

当我通过运行启动 django 开发服务器python manage.py runserver并转到浏览器中的 url 时，我得到了正确的结果，但是在终端中我得到了这个输出：

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
July 04, 2019 - 17:16:31
Django version 2.2.2, using settings 'stratego.settings'
Starting ASGI/Channels version 2.2.0 development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
HTTP GET / 200 [0.02, 127.0.0.1:60158]
HTTP GET /static/core/css/style.css 200 [0.00, 127.0.0.1:60158]
HTTP GET /static/core/fonts/AlegreyaSC-Bold.ttf 200 [0.00, 127.0.0.1:60158]
HTTP GET /static/core/fonts/Alegreya-Regular.ttf 200 [0.00, 127.0.0.1:60159]
Not Found: /favicon.ico
HTTP GET /favicon.ico 404 [0.00, 127.0.0.1:60158]

我还没有使用数据库，所以迁移并不重要。从输出中，您可以看到服务器将字体发送到客户端，但它们已经安装在我的机器上，为什么还要发送它们？
我不认为我在命名上犯了错误（在我的计算机设置中，这些字体被称为“Alegreya”和“Alegreya SC”）。

我是否误解了该local()函数在 css 中的工作方式，或者我做错了什么？

提前致谢。

PS：如果需要注意的话，我在 Windows 10 上使用 python 3.7.3 和 django 2.2.2 和 firefox 67.0.4。

标签： pythonhtmlcssdjangofonts

解决方案

推荐阅读