Streamlit自定义字体PC端正常渲染，移动端异常求助

问题排查方向 #

• 移动端浏览器对相对路径的解析逻辑和PC端存在差异，Streamlit Cloud部署后，静态字体资源的加载路径在移动端可能出现访问障碍
• 仅提供TTF单一字体格式，部分移动端浏览器的兼容性支持不足
• CSS的字体声明规则不完善，缺少font-display等关键属性，导致浏览器直接 fallback 到系统字体

实用修复步骤 #

1. 补充兼容字体格式 #

把你的TTF字体转成WOFF2、WOFF格式（这两种格式压缩率高，移动端兼容性更好），用免费在线转换工具即可完成，转完将所有格式的字体文件和CSS放在同一目录。

2. 优化CSS字体声明 #

修改style.css里的@font-face规则，补上多格式支持和必要属性：

@font-face {
    font-family: 'YourCustomFont'; /* 替换成你实际的字体名称 */
    src: url('your-font.ttf') format('truetype'),
         url('your-font.woff2') format('woff2'),
         url('your-font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 字体加载完成前先用系统字体占位，避免页面空白 */
}

/* 全局强制应用自定义字体 */
body, [class*="st-"] {
    font-family: 'YourCustomFont', sans-serif !important;
}

3. 用Base64嵌入字体（彻底解决路径问题） #

如果路径问题依然存在，直接把字体转成Base64编码嵌入CSS，彻底绕开文件加载的路径障碍：

@font-face {
    font-family: 'YourCustomFont';
    src: url(data:font/truetype;base64,[替换成你的TTF字体Base64编码]) format('truetype'),
         url(data:font/woff2;base64,[替换成你的WOFF2字体Base64编码]) format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

通过在线Base64转换工具上传字体文件，即可生成对应编码。

4. 确认Streamlit的CSS加载方式 #

确保app.py里的CSS加载代码正确，使用st.markdown开启unsafe_allow_html：

def load_css(file_path):
    with open(file_path, "r") as f:
        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

load_css("resources/css/style.css")

验证方法 #

1. 重新部署到Streamlit Cloud
2. 清空移动端浏览器缓存后访问应用
3. 用浏览器开发者工具（Chrome开启移动端调试模式、Firefox使用远程调试）查看Network面板，确认字体资源是否成功加载

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