Python 导入自定义字体和Tailwind CSS_Python_Html_Flask_Jinja2_Tailwind Css

Python 导入自定义字体和Tailwind CSS

python html flask

Python 导入自定义字体和Tailwind CSS,python,html,flask,jinja2,tailwind-css,Python,Html,Flask,Jinja2,Tailwind Css,我正在使用Flask和Tailwind CSS开发一个web应用程序，无法导入自定义字体。我可以构建CSS文件，但是HTML模板没有显示字体。如何导入自定义字体我的CSS构建文件中有以下内容： @tailwind base; @tailwind components; @tailwind utilities; @font-face { font-family: 'Grifter'; src: url(../../static/Skyer-Regular.otf); } 以下

我正在使用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>


示例文本

我不久前就遇到了这个问题，并且有了一个有效的解决方案。最后，我不得不将一个单独的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') }}"/>

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

为什么不直接使用href=“name”？我已经尝试了href=“name”，但没有成功。它是Flask，所以你必须使用url\u，因为你必须正确地获取路径名。如果它有效，它也有效，但这不是很乏味吗？为什么不使用通用css呢？因为顺风css使设计变得非常简单。我还使用tailwind启动了应用程序，但不知道会遇到这个问题。赫比很可能也有同样的问题，这是有效的！谢谢

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

body {
    font-family: 'reg';
}