CSS 字体仅适用于从相同基础扩展的一些 Django 模板
Posted
技术标签:
【中文标题】CSS 字体仅适用于从相同基础扩展的一些 Django 模板【英文标题】：CSS font only works in some Django templates extended from same base 【发布时间】：2018-05-26 12:18:24 【问题描述】：我正在使用 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 文件声明了我的字体，例如：
/* 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，但不是完全相同的问题）
【问题讨论】：
【参考方案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 模板的主要内容，如果未能解决你的问题，请参考以下文章