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

Question

我目前正在做一个项目，我必须在 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 中，但我不确定如何执行此操作，即使它会起作用。

无论如何，提前谢谢！

标签： pythoncssfontsplotly-dash

Answer 1

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

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

.
|-- 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-faceCSS3 功能正确导入字体以供使用，方法是为其提供参考名称“FreeSerif-Italic”。我将body我的应用程序的元素定义为默认为所有文本使用此字体（您不必为 body 元素使用字体，您可以将它用于您想要的任何 html 元素！；您也可以在您的app.py 使用style任何dash.html组件的参数破折号代码）。

在这里，我有一个非常简单的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') 时，给出：