Javascript 使用render_模板在烧瓶中无法正确显示阿姆哈拉语字体
某些字体在python FLASK应用程序中显示不正确。我使用的是Windows10，并尝试在Firefox和Chrome上运行，结果相同。IDE是PyCharm。我已经在FLASK应用程序中创建了一个视图和模板，以显示多达7种不同语言的文本。我使用jinja2变量在模板（html）上显示文本 对于这个模型，我使用一个JSON文件和语言对象列表。这就是模型初稿的样子（请注意，“native_name”值正确显示在PyCharm和Firefox浏览器中的文件中，但不会显示在web应用程序中）： data.jsonJavascript 使用render_模板在烧瓶中无法正确显示阿姆哈拉语字体,javascript,html,css,flask,jinja2,Javascript,Html,Css,Flask,Jinja2,某些字体在python FLASK应用程序中显示不正确。我使用的是Windows10，并尝试在Firefox和Chrome上运行，结果相同。IDE是PyCharm。我已经在FLASK应用程序中创建了一个视图和模板，以显示多达7种不同语言的文本。我使用jinja2变量在模板（html）上显示文本 对于这个模型，我使用一个JSON文件和语言对象列表。这就是模型初稿的样子（请注意，“native_name”值正确显示在PyCharm和Firefox浏览器中的文件中，但不会显示在web应用程序中）： d
[
{
"name": "Amharic",
"native_name": "አማርኛ",
"index": 1
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Encode Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='styles/styling.css') }}" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Language Selection</title>
<style>
h1 {
font-family: Encode Sans;
font-style: normal;
font-weight: normal;
}
h3 {
font-family: Encode Sans;
font-style: normal;
font-weight: normal;
}
/* Style the navigation bar links a */
.langnavbar a {
display: block;
color: black;
text-align: center;
padding: 10px 30px;
margin: 5px 5px;
text-decoration: none;
background-color: lightgray;
<!-- width: 33.33%;-->
height: 20%;
font-size: 20px;
font-family: Encode Sans;
font-style: normal;
font-weight: normal;
}
.column {
float: left;
margin: auto;
width: 33.33%;
padding: 10px;
box-sizing: border-box;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
/* Change color on hover */
.langnavbar a:hover {
background-color: #ddd;
color: black;
}
.crop {
width: 90%;
height: 90%;
overflow: visible;
margin: -20px 0 0 0;
}
.crop img {
width: 499px;
height: 420px;
margin: -60px 0 0 0;
}
@font-face {
font-family: 'abyssinica_silregular';
src: url('abyssinicasil-r.eot');
src: url('abyssinicasil-r.eot?#iefix') format('embedded-opentype'),
url('abyssinicasil-r.woff') format('woff'),
url('abyssinicasil-r.ttf') format('truetype'),
url('abyssinicasil-r.svg#abyssinica_silregular') format('svg');
font-weight: normal;
font-style: normal;
}
.am1 {
font-family: abyssinica_silregular;
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<center>
<div class="container">
<h3>Please Select your Language</h3>
</div>
<div id = "button_layout" class="d-flex justify-content-center align-items-center" style="height:100px;">
<div class="langnavbar">
<div class="column">
<a href="/screening/0" class="am1">
{{language[0].native_name}}
</a>
</div>
</div>
</div>
</center>
</body>
</html>
from flask import Flask, render_template
from model import db
app = Flask(__name__)
@app.route("/languages")
def languages():
languages = db
return render_template("languages.html", language=languages)
import json
def load_db():
with open("data.json") as f:
return json.load(f)
db = load_db()
from flask import Flask, render_template
from model import db
app = Flask(__name__)
@app.route("/languages")
def languages():
languages = db
return render_template("languages.html", language=languages)
import json
def load_db():
with open("data.json") as f:
return json.load(f)
db = load_db()
<div class="column">
{{language[0]}}
</div>
{{语言[0]}
data.jsonlanguages（）languages.html