2017-12-12 2 views
0

장고를 사용하여 상당히 복잡한 사이트를 만드는 중이며 이상한 문제를 발견했습니다.CSS 글꼴은 동일한베이스에서 확장 된 일부 장고 템플릿에서만 작동합니다.

내 모든 템플릿은 동일한 기본 템플릿 (base.html)을 확장합니다. 이 같은 그 기본 템플릿의 모습 (일) :

/* 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에 내가 지금처럼 해당 글꼴 구현 :

{% 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 파일 예를 들어, 내 글꼴 얼굴을 선언

내가 말했듯이, 나는이 템플릿을 모든 템플릿에서 확장합니다. 문제는 일부 확장 템플릿에서 올바른 글꼴 (고가 모노)을 얻지 만 일부 템플릿에서는 기본값 (고정 폭)을 얻습니다. 템플릿은 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) 
] 

도 발생하는 다른 이상한 유물이있다. nav-bar의 기본 머리글에 대해 사용하고있는 다른 글꼴 중 하나가 모든 템플릿에서 작동합니다! template1에는 다른 기능이 있지만 다른 것들에는 적용되지 않았습니다. Boostrap 기능 .tab().modal()과 관련이 있으며이 상속 구조에서 포함이 처리되는 방법과 관련이 있습니다.

템플릿이 렌더링되는 방식과 관련이 있습니까? 그밖에 문제를 일으키는 원인이 무엇이며 어떻게 해결할 수 있습니까? 그것은 나를 위로 벽으로 몰고있다! 모든 지침을 부탁드립니다.

(참고, 나는 this question 보았다했지만 그것은 아주 같은 문제가 아니에요) Welp이 좀 더 파고 후, 나는 마침내 해답을 발견

답변

0

. 나는 그것이 사용 된 글꼴이 실제로 기본 고정 폭 글꼴 아니라는 것을 깨달았다

: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 기능에 대한 나의 다른 문제를 설명하지는 않습니다. 그럼에도 불구하고, 이것은 질문의 주된 문제를 해결합니다.

관련 문제