将Google字体添加到Flask

Question

所以我知道在Flask中可以用以下方式添加CSS:

<link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />

但是如果我要添加一个谷歌字体，通常在HTML中看起来像这样：

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>

我需要编辑/添加什么才能使它与Flask配合使用？

- qasimalbaqali

Answer 1

将Google字体链接添加到您的index.html或任何需要的页面，可以按照以下方式进行：

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename= 'mystyle.css') }}">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
{% endblock %}

然后，将CSS字体声明添加到您的自定义CSS文件中（我的是static / mystyle.css）：

body {
    font-family: 'Open Sans Condensed', sans-serif;`
}

- Topaz

---

我之前在没有添加{% block styles %}的情况下就让它工作了，但我想这是更好的方式，所以谢谢！ - qasimalbaqali

Answer 2

在这里，您不能像通常在Web服务器上链接到资源那样使用static。您的链接仍然基本上是静态的，但与您提供的任何内容无关。因此，您可以将Google字体链接直接放在HTML模板中，或将其作为变量扩展为完整链接（如果您不在所有地方都使用相同的标题模板并可能稍后更改字体，则这将很方便）。

- aneroid

---

你能给我一个例子吗？因为我在整个网站上都在使用它。我是一个新手，对此感到抱歉。 - qasimalbaqali

在你的模板中加入<link ... href="{{ font_url }}" />。当你使用该模板时，在render函数中提供值：render_template('home_page.html', font_url='http://fonts.g...')。 - aneroid