如何在Python Dash框架中使用本地.otf格式字体文件

该方案完全可行，具体操作步骤如下：

步骤1：确认项目目录结构 #

确保你的文件存放路径符合以下结构：

项目根目录
├── app.py   # 你的Dash启动代码文件
└── assets
    ├── custom-font.css  # 后续要创建的字体样式文件
    └── fonts
        └── 你的自定义字体文件.otf

步骤2：创建CSS样式文件声明字体 #

在assets目录下新建custom-font.css文件，写入以下内容：

/* 声明自定义字体 */
@font-face {
  font-family: '你自定义的字体名称'; /* 自行命名，后续代码调用时使用该名称 */
  src: url('./fonts/你的字体文件名.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* 如果需要全局应用该字体，添加以下规则，不需要可以删除 */
body {
  font-family: '你自定义的字体名称', sans-serif;
}

注意：文件名大小写要和实际完全匹配，Linux/macOS环境下大小写敏感，路径错误会导致字体加载404。

步骤3：Dash代码中调用字体 #

Dash默认会自动加载assets目录下的所有CSS文件，不需要手动将css添加到external_stylesheets参数中。
如果没有配置全局生效，只需给指定组件添加style参数指定字体即可，修改后的示例代码如下：

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', style={'font-family': '你自定义的字体名称'}),
            ])

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

常见问题排查 #

• 如果字体不生效，打开浏览器开发者工具的「网络」面板，刷新页面查看字体文件是否加载成功，若出现404检查文件路径和名称是否正确
• 如果有粗体、斜体等不同字重的字体文件，可以新增多条@font-face规则，分别对应不同的font-weight、font-style属性值

内容的提问来源于stack exchange，提问作者Jasper1989