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

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，但我不确定该怎么做，即使它会起作用。

无论如何，先谢谢了！

Answer 1

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

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

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

1 directory, 3 files

我在 .assets/ 文件夹下有一个要使用的本地 .otf 字体文件。以下是 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 代码中使用 in 使用任何 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') 时，给出：

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

How to use a local font (.otf file) in Dash Python

python

css

fonts

plotly-dash