Django：无法在font-face中加载西里尔字体 [英] Django: Can't load cyrillic font in font-face

问题描述

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

I'm using django-easy-pdf to create pdf reports. So, I need my font to be cyrillic . In my template I write:

@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-衬线。我发现一些西里尔字体： Arimo-Regular ，但它不工作。也许浏览器不支持这种字体？我已经尝试了几种cyrylic字体，但它仍然是 sans-serifs
我不知道该字体是否加载，但 {％static'static / themes / font / Arimo-Regular.ttf'％} ，因为我用 css code> main.html ，它的工作原理。
我的项目结构：

But all the time, the font is sans-serif. I found some cyrillic font: Arimo-Regular, but it's not working. Maybe this font is not supported by browser? I've tried several cyrylic fonts, but it remains sans-serifs And i'm not sure whether that font is loaded or not, but {% static 'static/themes/font/Arimo-Regular.ttf' %}, because I do so with my css in main.html and it works. My project structure:

正如你所看到的那样，那些正方形是可爱的符号，而 NETWORK 没有显示任何错误：

As you can see, those squares are cyrilic symbols, and NETWORK doesn't show any errors:

而我的整个 report.html

And my whole 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：

Rendered html:

推荐答案

由于Google在这个问题上是Google的第二名（在 django-easy-pdf 中出现问题后），以下是一个解决方案。

Since this is number 2 place in Google for this question (after an issue in django-easy-pdf), here's a solution.

这是代码提供字体文件：

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)

所以，你的字体m在服务器的文件系统中应该是STATIC_ROOT或MEDIA_ROOT。这意味着：

So, your font must be either in STATIC_ROOT or MEDIA_ROOT on the server's filesystem. Which means:

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

1) Add the font to static files of your project (assuming your static files are set up properly).

2）重要提示：运行 python manage.py collectstatic ，所以文件实际上被复制到那里，即使你运行开发服务器。

2) Important: run python manage.py collectstatic, so the file is actually copied there, even if you run the development server.

3）如果您：

static / fonts / awesomefont.ttf 中

• 您的 STATIC_URL 是，说 / static_files /

• placed your font into static/fonts/awesomefont.ttf of your project
• your STATIC_URL is, say /static_files/

然后你可以使用其中之一：

Then you can use either of those:

/* 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正在运行的本地机器。

Again, please note - the font will be loaded by xhtml2pdf utility, not the browser, so those files must be local to the machine Django is running on.

这篇关于Django：无法在font-face中加载西里尔字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！