如何在 Dash Python 中使用本地字体（.otf 文件）答案

【问题标题】：How to use a local font (.otf file) in Dash Python如何在 Dash Python 中使用本地字体（.otf 文件）
【发布时间】：2021-12-08 05:29:23
【问题描述】：

我目前正在进行一个项目，我必须在 Dash 应用程序中包含自定义字体。我收到了 .otf 文件，但我不知道如何使用它。在安静的搜索了一段时间后，我希望你们能帮助我。

import dash
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app             = dash.Dash(__name__, prevent_initial_callbacks=True, external_stylesheets=external_stylesheets)

app.layout = html.Div([
                html.P('Hello world'),
            ])

if __name__ == "__main__":
    app.run_server(debug=True,port=8050)

.otf 文件位于文件夹“/assets/fonts”中。我看过一些关于这个主题的帖子，我应该在其中创建一个 .css 文件并将其添加到 external_stylesheets 中，但我不确定该怎么做，即使它会起作用。

无论如何，提前谢谢！

【问题讨论】：

标签： python css fonts plotly-dash

【解决方案1】：

这真的很简单！你在正确的轨道上。正如您所说，您所要做的就是使用位于本地（相对于您的 app.py 文件；即同一目录）“assets”目录中的 .css 文件。

下面我设置了以下基本的应用文件结构：

.
|-- app.py
`-- assets
    |-- FreeSerifItalic-KErA.otf
    `-- custom.css

1 directory, 3 files

我有一个本地的.otf 字体文件，我想在.assets/ 文件夹下使用。以下是custom.css 文件的内容，也位于我的 assets/ 文件夹下：

@font-face {
    font-family: 'FreeSerif-Italic'; 
    src: url('FreeSerifItalic-KErA.otf');
}

body {
    margin: 10%;
    overflow-x: hidden;
    text-align: center;
    font-family: "FreeSerif-Italic";
    font-size: 2.5rem;
}

我使用@font-face CSS3 功能正确导入字体以供使用，方法是为其提供参考名称“FreeSerif-Italic”。我将我的应用程序的 body 元素定义为默认为所有文本使用此字体（您不必为 body 元素使用该字体，您可以将它用于您想要的任何 html 元素！；您也可以使用在你的 app.py Dash 代码中使用任何dash.html 组件的style 参数）。

这里我有一个非常简单的app.py 文件，（几乎）就像你的例子一样：

import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div([html.P("Hello world")])

if __name__ == "__main__":
    app.run_server(debug=True, dev_tools_hot_reload=True)

当运行 ('$ python app.py') 时，给出：

【讨论】：

非常感谢！