2017-12-12 5 views
0

私はDjangoを使用してかなり複雑なサイトを作成しています。CSSフォントは、同じベースから拡張されたいくつかの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に私はそうのようなこれらのフォント実装:

私が言ったように、私はすべてのテンプレートでこのベースを拡張します。問題は、いくつかの拡張テンプレートでは正しいフォント(オーバーパスモノ)が得られるが、一部のテンプレートではデフォルト(モノスペース)が得られるという点で問題が生じる。テンプレートは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 %} 

私は2つの間を見分けることができます唯一の違いは、テンプレートのレンダリング方法です。テンプレートの1つはviews.pyのビューでレンダリングされ、もう1つは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) 
] 

起こるいくつかの他の奇妙なアーティファクトもあります。私が使用している他のフォントの1つ(nav-barのメインヘッダ用)は、すべてのテンプレートで機能します!私はtemplate1には他の関数を使っていましたが、Boostrap funtions .tab().modal()のように、この継承構造体でインクルードがどのように処理されるかが関係しています。

これはテンプレートの表示方法と関係がありますか?それ以外に何が問題を引き起こしているのでしょうか。それを修正するにはどうしたらいいですか?それは私の壁を運転している!どんな指導も高く評価されます。

(私はthis questionを見てきましたが、それは全く同じ問題ではない、注意してください)

答えて

0

Welpは、いくつかのより多くの掘削後、私は最終的に答えを見つけました。私はそれが使用されたフォントが実際にデフォルトの固定幅フォントではなかったことに気づい

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

:それは問題がここにいたことが判明し、それは完全に別のフォントをしました。さて、あなたが持っているように、私が含む他のスタイルシートの1つは、同じ変数名をフォントに使用します(--font-secondary)。少なくとも、それはもともと思っていたより簡単な修正だが、それは間違いなくBootstrapの他の問題を説明していないことを意味する。それにもかかわらず、これは質問の主な問題を解決します。

関連する問題