Блог

Главная - Вопросы по программированию - Как использовать @font-face с производственным Django в Digital Ocean?

Как использовать @font-face с производственным Django в Digital Ocean?

#css #django

Вопрос:

Похоже, я не могу получить доступ к своим статическим шрифтам с помощью @font-face свойства CSS с шрифтом, хранящимся в цифровых океанских пространствах.

Все остальные мои статические элементы работают в разделе html. Например, я могу сделать:

 {% load static %}
<div class = "statusImg"><img id = '{{machine.id}}simLight' src="{% static 'images/simLight_off.png' %}"></div>

И это будет работать, как и ожидалось, принося изображение из цифрового океана.

Я не уверен, как это сделать в <style> разделе, хотя?

Я пытался:

 <style>
    @font-face {
        font-family: PSSroboto;
        src: url("/static/fonts/roboto/Roboto-Regular.ttf")
    }
</style>

и:

 <style>
    @font-face {
        font-family: PSSroboto;
        src: url({% static '/static/fonts/roboto/Roboto-Regular.ttf' %})
    }
</style>

и:

 <style>
    @font-face {
        font-family: PSSroboto;
        src: "{% static '/static/fonts/roboto/Roboto-Regular.ttf' %}"
    }
</style>

Я даже жестко закодировал URL-адрес и опубликовал шрифт, но это привело к нарушению политики CORS, и в целом, вероятно, в любом случае это не лучшая идея. Я надеюсь, что мне не хватает чего-то маленького?

Спасибо!

Обновление Похоже, что на самом деле это правильный синтаксис: (удаление статического префикса)

 <style>
    @font-face {
        font-family: PSSroboto;
        src: url("{% static 'fonts/roboto/Roboto-Regular.ttf' %}")
    }
</style>

But the URL is formatted incorrectly. When I inspect the URL it will replace all the You can see wherever there was an amp; it appended amp; to it.

So it should be something like:

https://nyc3.digitaloceanspaces.com/nameofmyspace/nameofmyspace-space-static/fonts/roboto/Roboto-Regular.ttf?AWSAccessKeyId=XXXXXXXXXXXXXXamp;Signature=XXXXXXXXXXXXXXXXXX=amp;Expires=1621600823

but instead is auto generating this:

https://nyc3.digitaloceanspaces.com/nameofmyspace/nameofmyspace-space-static/fonts/roboto/Roboto-Regular.ttf?AWSAccessKeyId=XXXXXXXXXXXXXXamp;amp;Signature=XXXXXXXXXXXXXXXXXX=amp;amp;Expires=1621600823

No idea why it is doing this, but have seen this before when using javascript.

So, I tried to do a script:

     let fontUrl = 'https://nyc3.digitaloceanspaces.com/nameofmyspace/nameofmyspace-space-static/fonts/roboto/Roboto-Regular.ttf';
    var newStyle = document.createElement('style');
    newStyle.innerHTML = `
        @font-face {
            font-family: "PSSroboto";
            src: url(${fontUrl})
        }
        `;
        document.head.appendChild(newStyle);

Но это не изменило шрифты…

Я в тупике

Метки: