Django:无法在font-face中加载西里尔字体

时间:2015-05-19 10:37:15

标签: css django fonts font-face

我正在使用django-easy-pdf创建pdf报告。所以,我需要我的字体是西里尔字母。在我的模板中,我写道:

@font-face { font-family: Arimo-Regular; src: url('{% static 'static/themes/font/Arimo-Regular.ttf' %}'); }

html {
    font-family: Arimo-Regular, Arial, 'sans-serif';
    color: #333333;
}

但是所有时间,字体都是sans-serif。我找到了一些西里尔字体:Arimo-Regular,但它不起作用。浏览器可能不支持此字体?我尝试了几种cyrylic字体,但它仍然是sans-serifs 而且我不确定该字体是否已加载,但是{% static 'static/themes/font/Arimo-Regular.ttf' %},因为我使用css中的main.html这样做并且它有效。 我的项目结构: enter image description here

如您所见,这些正方形是cyrilic符号,NETWORK没有显示任何错误:enter image description here

我的整个report.html

{% extends "easy_pdf/base.html" %}
{% load staticfiles %}


{% block extra_style %}
    <style type="text/css">
        @font-face { font-family: "Arimo-Regular"; src: url({% static 'themes/font/Arimo-Regular.ttf' %}); }
        {% comment %}@font-face { font-family: FiraMono; src: url('{% static 'static/themes/font/FiraMono-Regular.otf' %}'); }
        @font-face { font-family: "Lato Light"; src:  url('{% static 'static/themes/font/FiraMono-Regular.otf' %}')};{% endcomment %}

        html {
            font-family: "Arimo-Regular", Arial, 'sans-serif';
            color: #333333;
        }

        p {
            margin: 0 0 6px 0;
            font-size: 11pt;
            font-family: "Arimo-Regular", Arial, 'sans-serif';
        }

        table {
            line-height: 140%;
            margin-bottom: 20px;
        }
            table.bordered {
                border-top: 0.1pt solid #999999;
                border-bottom: 0.1pt solid #999999;
            }

            tr, td, th { border: none; }

            th {
                font-size: 8pt;
                border-bottom: 0.1pt solid #999999;
                padding: 3px 0;
                line-height: 1;
                font-weight: bold;
                font-family: "Arimo-Regular", Arial, 'sans-serif';
            }

            td {
                font-size: 8pt;
                font-family: "Arimo-Regular", Arial, 'sans-serif';
                vertical-align: top;
                padding: 3px 0;
            }

            td:last-child { padding-bottom: 0; }

        .text-left { text-align: left; }
        .text-right { text-align: right; }
        .bottom-10 { margin-bottom: 10px; }
        .bottom-20 { margin-bottom: 20px; }

        .header { color: #7f7f7f; }
        .header p { font-size: 13px; line-height: 1.5em; }
        .header-link { font-weight: bold; text-decoration: none; color: #4F81BD; font-size: 14px; }
        .logo { margin-bottom: 20px; margin-left: -25px; }
        .logo img { zoom: 60%; }

        .recipient { margin-left: 7cm; }

        .main h1 {
            margin: 18px 0 18px 0;
            font-size: 250%;
            font-weight: normal;
            color: #4F81BD;
        }

        .main h2 {
            margin: 18px 0 6px 0;
            font-size: 180%;
            font-weight: normal;
        }

        .info { border: 1px solid #4F81BD; padding: 10px; margin-top: 50px; margin-bottom: 50px; }
        .info a { color: #4F81BD; text-decoration: none; }

    </style>
{% endblock %}

{% block content %}
    <div id="content">
        <div class="recipient bottom-10">
            <p class="bottom-10">
                <strong>ACME Inc.</strong>
                <br> John Doe
            </p>
            <p class="bottom-10">
                Street Name <br>
                Postal Code <br/>
                City
            </p>
            <p>{{ today|date:"DATETIME_FORMAT" }} UTC</p>
        </div>


        <p class="info">
            This is an example of <a href="https://github.com/nigma/django-easy-pdf">django-easy-pdf</a>
            &ndash; Django PDF rendering the easy way.
            Check <a href="http://en.ig.ma/">en.ig.ma</a> for Django and Python development.
        </p>

        <div class="main">
            <h1>Sample Invoice</h1>

            <table>
                <thead>
                    <tr>
                        <th class="text-left" style="font-family: Arimo-Regular;">кирилица</th>
                        <th class="text-right">PackAmount</th>
                        <th class="text-right">Price per bottle</th>
                        <th class="text-right">Price per package</th>
                        <th class="text-right">Price per package</th>
                    </tr>
                </thead>
                <tbody>
                {% for item in order.orderproduct_set.all %}
                    <tr>

                        <td class="text-left">{{ item.product.brand.name }} {{ item.product.volume }}</td>
                        <td class="text-right">{{ item.product_amount }}</td>
                        <td class="text-right">{{ item.product.price }}</td>
                        <td class="text-right">{{ item.product.package.price }}</td>

                    </tr>
                {% endfor %}
                </tbody>
            </table>

            <table class="bottom-20">
                <tr>
                    <td><strong>Total</strong></td>
                    <td class="text-right"><strong>100 Doge</strong></td>
                </tr>
            </table>

            <h2>Payment details</h2>

            <p class="bottom-20">
                Please cover the invoice within 10 days.
            </p>

            <p>Dogecoin address (it's real): <strong>DREWeqR5KB2rbpJFybKvWepNs6sUQZowNs</strong></p>
            <pdf:barcode value="DREWeqR5KB2rbpJFybKvWepNs6sUQZowNs" type="qr" barwidth="100" barheight="100" />
        </div>
    </div>
{% endblock %}

呈现的html: enter image description here

1 个答案:

答案 0 :(得分:1)

由于此问题在Google中排名第2(在django-easy-pdf中出现问题后),这是一个解决方案。

这是the code that supplies the font files

if settings.STATIC_URL and uri.startswith(settings.STATIC_URL):
    path = os.path.join(settings.STATIC_ROOT, uri.replace(settings.STATIC_URL, ""))
elif settings.MEDIA_URL and uri.startswith(settings.MEDIA_URL):
    path = os.path.join(settings.MEDIA_ROOT, uri.replace(settings.MEDIA_URL, ""))
else:
    path = os.path.join(settings.STATIC_ROOT, uri)

因此,您的字体必须是服务器文件系统上的STATIC_ROOT或MEDIA_ROOT。这意味着:

1)将字体添加到项目的静态文件中(假设您的静态文件设置正确)。

2)重要提示:运行python manage.py collectstatic,因此即使您运行开发服务器,实际上也会将文件复制到

3)如果你:

  • 将您的字体放入项目的static/fonts/awesomefont.ttf
  • 您的STATIC_URL是,/static_files/

然后你可以使用其中任何一个:

/* Relative to static files' root */
@font-face { font-family: Awesome; src: url(fonts/awesomefont.ttf); }
/* Full static URL */
@font-face { font-family: Awesome; src: url(/static_files/fonts/awesomefont.ttf); }

请再次注意 - 字体将由xhtml2pdf实用程序加载,而不是浏览器,因此这些文件必须是运行Django的机器的本地文件。