Question

我正在使用Django创建一个相当复杂的网站，我注意到一个奇怪的问题。

我的所有模板都扩展了相同的基本模板（base.html）。该基本模板看起来像这样：

{% load staticfiles %}

<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="{% static 'css/fonts.css' %}">
        <link rel="stylesheet" href="{% static 'css/webStyleSheet.css' %}">
        {% block head %}
        {% endblock %}
    </head>
    <body>
    <div class="wrapper">
        {% block header %}
        <div class="header">
            <h1><a href="/">Title</a></h1>
            <ul class="nav-bar">
            <!-- nav bar content here etc etc-->
        </div>
       {% endblock %}
    </div>
    </body>
</html>

<!-- js relevant to the nav bar etc etc -->

{% block script %}
{% endblock %}

我的fonts.css文件声明了我的font-faces，例如：

/* latin */
@font-face {
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Overpass Mono Regular'), local('OverpassMono-Regular'), url('../fonts/OverpassMono-Regular.woff') format('woff'),
        url('../fonts/OverpassMono-Regular.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

在我的webStyleSheet.css我实现了这样的字体：

:root {
    --font-secondary: 'Overpass Mono', monospace;
}
/*the class I use for the nav-bar elements*/
.menu-button { 
    font-family: var(--font-secondary);
}

正如我所说，我在所有模板中扩展了这个基础。问题出现在一些扩展模板上，我得到了正确的字体（Overpass Mono），但在某些模板上，我得到了默认（等宽）。模板获取webStylesheet.css，但未呈现正确的字体。通常情况下，我认为这只是获取字体的相对路径的问题。但是，两个扩展模板都是兄弟姐妹。相关的文件结构如下所示：

site
--views.py
--urls.py
--static
----css
------fonts.css
------webStyleSheet.css
----fonts
------OverpassMono-Regular.woff
------OverpassMono-Regular.ttf
--templates
----html
------template1.html (font works)
------template2.html (font doesn't work)

两个模板都像这样扩展：

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

{% load staticfiles %}
{% load tags %}

{% block head %}
    <!-- some included css and scripts only relevant to this template -->
{% endblock %}

{% block content %}
    <!-- content -->
{% endblock %}
{% block script %}
    <!-- js -->
{% endblock %}

我可以辨别出两者之间的唯一区别是如何呈现模板。其中一个模板使用views.py中的视图进行渲染，另一个模板使用TemplateView.as_view(templatename='html/template1.html')直接渲染。就像在urls.py中一样：

urlpatterns = [
    url(r'^url1/$', TemplateView.as_view(template_name='html/template1.html'), name='template1'),
    url(r'^url1/url2/$', views.view2, name='view2'), # (return render(request, 'html/view2.html', contextVals) from views.py)
]

还会发生一些其他奇怪的文物。我正在使用的其他字体之一（对于导航栏中的主标题）适用于所有模板！我还有其他函数在template1上工作，但在其他函数上却没有：像Boostrap函数.tab()和.modal()，它们可能是相关的，并且与如何在这个继承结构中处理包含有关。

这是否与模板的呈现方式有关？还有什么可能导致这个问题，我该如何解决它？它正在推动我的墙！任何指导表示赞赏。

（注意，我看过this question，但问题并不完全相同）

Answer 1

Welp，经过一番挖掘，我终于找到了答案。事实证明问题出在这里：

:root {
    --font-secondary: 'Overpass Mono', monospace;
}
/*the class I use for the nav-bar elements*/
.menu-button { 
    font-family: var(--font-secondary);
}

我意识到它使用的字体实际上并不是默认的等宽字体：它完全是一种不同的字体。好吧，就像你想的那样，我所包含的其他样式表之一使用相同的字体变量名称（--font-secondary）。至少这意味着它比原先想象的更容易修复，但它肯定无法解释我的Bootstrap函数的其他问题。无论如何，这解决了问题中的主要问题。

CSS字体仅适用于从同一基础扩展的一些Django模板

1 个答案: