我正在尝试在我的 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;
}
加载网页后,字体不会改变。其他事项:
我查看了以下现有问题并尝试实施答案中建议的内容,但似乎没有帮助。我错过了什么?
谢谢。
字体的 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/...
(您可以通过查看浏览器的开发人员工具中的网络检查器来验证)。