在尝试为 Flask 应用程序加载自定义字体时我缺少什么?

问题描述 投票:0回答:1

我正在尝试在我的 Flask 应用程序中加载自定义字体。无论我尝试什么,似乎都不起作用。

我的应用程序的布局如下所示:

文件夹结构

- app.py
- static
-- css
--- main.css
-- fonts
--- Nunito-Italic-VariableFont_wght.ttf
- templates
-- index.html
-- base.html

app.py

from flask import Flask, render_template, url_for

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True)

index.html

{% extends 'base.html' %}

{% block title %}
Home
{% endblock %}

{% block body %}
<h1>Home</h1>
{% endblock %}

base.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <link rel = "stylesheet" href = "{{ url_for('static', filename='css/main.css') }}">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    {% block body %}{% endblock %}
</body>
</html>

main.css

@font-face {
    font-family: Nunito;
    src: url("static/fonts/Nunito-Italic-VariableFont_wght.ttf");
}

body {
    margin: 0;
    background-color: white;
    min-height: 100vh;
    background-size: cover;
}

加载网页后,字体不会改变。其他事项:

  • 应用程序找到该文件夹(如:没有未解析的文件路径或目录),所以这不应该是问题。
  • 每当我在 main.css 的正文中添加像 Arial 这样的“字体系列”时,它确实会更改网页上的字体

我查看了以下现有问题并尝试实施答案中建议的内容,但似乎没有帮助。我错过了什么?

谢谢。

html css python-3.x flask
1个回答
0
投票

字体的 URL 相对于 CSS 文件的位置是错误的;样式表中的 URL 是相对于样式表的位置进行解析的。

由于CSS文件是

static/css/style.css
,所以应该引用
../fonts/Nunito-Italic-VariableFont_wght.ttf

您当前的

static/fonts/Nunito-Italic-VariableFont_wght.ttf
具有浏览器请求
static/css/static/fonts/...
(您可以通过查看浏览器的开发人员工具中的网络检查器来验证)。

© www.soinside.com 2019 - 2024. All rights reserved.