我来自 Digital Ocean 空间的 django 应用程序字体不起作用答案

【问题标题】：My django app font from Digital Ocean spaces are not working我来自 Digital Ocean 空间的 django 应用程序字体不起作用
【发布时间】：2020-09-12 16:20:07
【问题描述】：

我在实时服务器上有一个 django 应用程序，静态文件托管在 Digital Ocean 空间中。静态文件运行良好，但字体却不行。我想可能是因为字体文件链接到 /static/ 文件夹，所以我将 @font-face src: url() 参数更改为字体文件的数字海洋空间 cdn 链接，但它仍然无法正常工作。我什至在 html 模板中嵌入了 @font-face 规则，并将字体文件与 django 静态文件模板 url 连接起来，但它仍然无法正常工作。虽然字体在我的本地主机上工作。

{% load static %}

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">

    <style type="text/css">

        @font-face {
            font-family: 'TT Norms Pro';
            src: url(' {% static 'user/fonts/TTNormsPro-Bold.eot' %} ');
            src: local('TT Norms Pro Bold'), local('TTNormsPro-Bold'),
                url('{% static 'user/fonts/TTNormsPro-Bold.eot?#iefix' %} ') format('embedded-opentype'),
                url('{% static 'user/fonts/TTNormsPro-Bold.woff2' %}') format('woff2'),
                url('{% static 'user/fonts/TTNormsPro-Bold.ttf' %}') format('truetype');
            font-weight: bold;
            font-style: normal;
        }

        @font-face {
            font-family: 'TT Norms Pro';
            src: url('{% static 'user/fonts/TTNormsPro-Regular.eot' %}');
            src: local('TT Norms Pro Regular'), local('TTNormsPro-Regular'),
                url('{% static 'user/fonts/TTNormsPro-Regular.eot?#iefix' %}') format('embedded-opentype'),
                url('{% static 'user/fonts/TTNormsPro-Regular.woff2' %}') format('woff2'),
                url('{% static 'user/fonts/TTNormsPro-Regular.woff' %}') format('woff'),
                url('{% static 'user/fonts/TTNormsPro-Regular.ttf' %}') format('truetype');
            font-weight: normal;
            font-style: normal;
        }


    </style>

    <link rel="stylesheet" href=" {% static 'user/libs/css/bootstrap.min.css' %} ">
    <link rel="stylesheet" href=" {% static 'user/libs/fontawesome/css/all.min.css' %} ">
    <link rel="stylesheet" href=" {% static 'user/libs/css/flatpickr.min.css' %} ">
    <link rel="stylesheet" href=" {% static 'user/libs/css/animate.css' %} ">
    <link rel="stylesheet" href=" {% static 'user/default-styles.css' %} ">
    <link rel="stylesheet" href=" {% static 'user/styles.css' %} ">
    <link rel="stylesheet" href=" {% static 'user/media-queries.css' %} ">


    <script src=" {% static 'user/libs/js/jquery-3.3.1.min.js' %} "></script>
    <script src=" {% static 'user/libs/js/popper.min.js' %} "></script>
    <script src=" {% static 'user/libs/js/bootstrap.min.js' %} "></script>
    <script src=" {% static 'user/libs/js/list.min.js' %} "></script>
    <script src=" {% static 'user/libs/js/sweetalert2@9.js' %} "></script>
    <script src=" {% static 'user/libs/js/flatpickr.js' %} "></script>
    <script src="https://kit.fontawesome.com/88095687d9.js" crossorigin="anonymous"></script>

</head>

【问题讨论】：

在浏览器中打开开发工具并查找 CORS 错误。这是最常见的原因。
@Daniel-Morell 是的，我看到所有字体文件的 CORS 错误。它说（原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。这意味着我必须在 DO 空间上添加 CORS 配置，是吗？
非常感谢。它现在工作。我只需要添加 CORS 配置。
也许您可以发布自己问题的答案来解释您为解决此问题所做的工作，因为它可能对未来的访问者有所帮助！

标签： css django digital-ocean django-staticfiles

【解决方案1】：

从技术上讲，出现此问题是因为我的网站没有跨站点访问字体文件，因此不允许使用它们。为了解决这个问题，我在我的 Digital Ocean Spaces Account 上的 CORS 配置中，将我的域名添加到“Origin”字段，我还将“Allowed Methods”设置为 GET。然后字体开始在我的网站上工作。更多信息请访问Digital Ocean Spaces CORS configuration

【讨论】：

嗨 Cyberposh，您是否设置了任何允许的标头？我现在几个小时都面临同样的问题！ :(
好吧，您还可以使用djangocorsheaders 模块在您的django 应用程序中设置允许的标头。这将解决问题。