导入自定义字体 Flask 和 Tailwind CSS答案

【问题标题】：Importing Custom Fonts Flask and Tailwind CSS导入自定义字体 Flask 和 Tailwind CSS
【发布时间】：2021-07-11 22:35:53
【问题描述】：

我正在使用 Flask 和 Tailwind CSS 开发 Web 应用程序，但无法导入自定义字体。我可以构建 CSS 文件，但 HTML 模板没有显示字体。如何让我的自定义字体导入？

我的 CSS 构建文件中有这个：

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Grifter';
    src: url(../../static/Skyer-Regular.otf);
}

这是我尝试使用导入字体时的示例：

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

<body class = 'bg-black'>      
<div class = "font-pri text-3xl text-center text-white">
Sample Text
</div>
</body>

【问题讨论】：

你为什么不直接使用 href="name"？
我已经尝试过 href="name" 但没有奏效。它是 Flask，所以你必须使用 url_for
您必须正确获取路径名。

标签： python html flask jinja2 tailwind-css

【解决方案1】：

不久前我遇到了这个确切的问题，并且有一个可行的解决方案。我最终不得不将一个单独的 CSS 文件链接到每个 HTML 模板。这是我所做的一个例子。我的静态文件夹中有自定义字体和 CSS 文件。 gameStyles.css 是我的 Tailwind CSS 文件。

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

这是我将在 styles2.css 中放入的示例：

@font-face {
    font-family: 'reg';
    src: url(../static/ObjectSans-Regular.otf);
}

body {
    font-family: 'reg';
}

我尝试了所有方法，这是唯一对我有用的方法。希望这会有所帮助！

【讨论】：

如果它有效，它就有效，但这不是很乏味吗？为什么不使用通用 css？
因为顺风 CSS 让设计变得非常简单。我还使用 tailwind 启动了应用程序，但并不知道我会遇到这个问题。赫比可能有同样的问题