Почему сервер отправил мне шрифт, который уже установлен на моем компьютере? - PullRequest
1 голос
/ 04 июля 2019

Я новичок в веб-разработке и пытаюсь создать простую веб-игру, используя python 3.7 с django в качестве веб-фреймворка в сочетании с пакетом channel для использования веб-сокетов.

Я пытаюсь использовать пользовательские шрифты для игрового интерфейса.Я использовал функцию css local(), чтобы убедиться, что шрифты не отправляются, если клиент уже установил их в своей системе, как указано здесь :

Это обычное явление дляиспользуйте одновременно и url(), и local(), чтобы использованная пользователем копия шрифта использовалась, если она была доступна, и возвращалась к загрузке копии шрифта, если она не найдена на устройстве пользователя.

Однако, похоже, сервер разработки django отправляет мне эти шрифты, хотя они уже установлены на моем компьютере.

Вот мои html-шаблоны и css:

core / templates/core/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>

core / templates / core / game.html:

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

{% load static %}

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

core / static/core/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, или я что-то не так сделал?

Спасибо вadvance.

PS: я использую python 3.7.3 с django 2.2.2 и firefox 67.0.4 на windows 10, если это важно отметить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...