如何将自定义字体添加到 Flask？答案

【问题标题】：How to add custom fonts to Flask?如何将自定义字体添加到 Flask？
【发布时间】：2020-07-19 06:02:37
【问题描述】：

我有自己的字体并且我已经创建了他们的 webkit，但是我无法加载它。

我之前在一些安卓和桌面应用程序中使用过该字体，它运行良好。

我尝试了 3 种不同的方式，使用同一个 app.py 文件

app.py

from flask import Flask, render_template

app = Flask(__name__)

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


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

尝试 #1

文件夹结构

-static
--css
---stylesheet.css
---myfont.ttf
-templates
--index.html

样式表.css

@font-face{
font-family: myfont;
src: ('myfont.ttf');
}
p {font-family:myfont; color:blue}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="{{url_for('static', filename='css/stylesheet.css')}}" type="text/css"/>
<body>
<p>test</p>
</body>
</html>

尝试 #2

文件夹结构

-static
--css
---stylesheet.css
---myfont.ttf
---myfont.eot
---myfont.svg
---myfont.woff
-templates
--index.html

样式表.css

@font-face{
font-family: myfont;
src: ('myfont.eot');
src: ('myfont.eot?#iefix') format('embedded-opentype'),
     ('myfont.woff') format('woff'),
     ('myfont.ttf') format('truetype'),
     ('myfont.svg#myfont') format('svg');
}
p {font-family:myfont; color:blue}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="{{url_for('static', filename='css/stylesheet.css')}}" type="text/css" />
<body>
<p>test</p>
</body>
</html>

尝试 #3

文件夹结构

-static
--fonts
---stylesheet.css
---myfont.ttf
---myfont.eot
---myfont.svg
---myfont.woff
-templates
--index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    <style>
    @font-face{
    font-family: myfont;
    src: {{ url_for('static',filename='fonts/myfont.eot') }};
    src: {{ url_for('static',filename='fonts/myfont.eot?#iefix') }} format('embedded-opentype'),
         {{ url_for('static',filename='fonts/myfont.woff') }} format('woff'),
         {{ url_for('static',filename='fonts/myfont.ttf') }} format('truetype'),
         {{ url_for('static',filename='fonts/myfont.svg#myfont') }} format('svg');
    }
    p {font-family:myfont; color:green}

    </style>
<body>
<p>prueba</p>
</body>
</html>

我也检查了这个链接，但结果再次是否定的

How do you upload a font to your webpage (is the server needed)?

How to add custom font in python-flask?

【问题讨论】：

标签： html css flask fonts

【解决方案1】：

<link rel="stylesheet" href="{{url_for('static', filename='../css/stylesheet.css')}}" type="text/css"/>

你为什么使用这种类型的包含？使用这个：

<link rel="stylesheet" href="../css/styesheet.css" type="text/css">

【讨论】：

我尝试了这两个选项，但现在我遇到了以前没有遇到的 404 错误。