Streamlit中st.button字体修改可行性及替代方案咨询

阿华AIGC实验室

2026-4-2

嘿，我来帮你搞定这个Streamlit按钮字体的问题！先给你吃个定心丸：直接修改st.button的字体是完全可行的，你之前的代码可能只是几个小细节没调对，另外如果原生按钮的样式注入实在不生效，还有稳定的替代方案能实现自定义字体的按钮组件。

一、原生st.button字体修改的正确姿势

你之前代码的小问题

字体族顺序有误："Courier New"属于等宽字体，回退字体应该用monospace而非sans-serif，这样系统找不到Courier New时会显示适配的等宽替代字体
偶尔会遇到浏览器缓存干扰，硬刷新页面（Ctrl+F5）就能解决

修正后的可运行代码

import streamlit as st

# 注入高优先级的CSS样式
st.markdown("""
<style>
/* 精准定位所有st.button元素 */
div.stButton > button {
    font-family: "Courier New", monospace !important;
    font-size: 20px !important;
    /* 可选：加个粗体让字体效果更明显 */
    font-weight: 600;
}
</style>
""", unsafe_allow_html=True)

if st.button("Click me", use_container_width=True):
    st.success("Clicked!")

如果还是没生效，建议检查下你的Streamlit版本——某些非常旧的版本（1.10以下）按钮的DOM结构和现在不同，升级到最新稳定版就能解决这个问题。

二、原生按钮不生效？试试自定义HTML按钮替代

要是上面的方法还是达不到你的预期，完全可以用自定义HTML按钮模拟原生st.button的功能，同时100%控制字体和样式。这里给你两种实用的实现方式：

方法1：兼容全Streamlit版本的实现

通过前端消息传递和Streamlit的session_state处理点击逻辑，和原生按钮体验完全一致：

import streamlit as st

# 初始化会话状态，记录按钮点击状态
if "btn_clicked" not in st.session_state:
    st.session_state.btn_clicked = False

# 注入自定义按钮的HTML和样式
st.markdown("""
<style>
.custom-btn {
    font-family: "Courier New", monospace !important;
    font-size: 20px;
    padding: 10px 24px;
    width: 100%;
    border: none;
    border-radius: 4px;
    background-color: #0066cc;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}
.custom-btn:hover {
    background-color: #0052a3;
}
</style>
<!-- 点击时向Streamlit发送触发消息 -->
<button class="custom-btn" onclick="parent.postMessage({type: 'streamlit:setComponentValue', key: 'custom_trigger', value: true}, '*')">
    Click me
</button>
""", unsafe_allow_html=True)

# 响应按钮点击事件
if st.session_state.get("custom_trigger"):
    st.session_state.btn_clicked = True
    # 重置触发状态，避免重复执行
    st.session_state.custom_trigger = False

# 显示点击反馈
if st.session_state.btn_clicked:
    st.success("Clicked!")

方法2：Streamlit 1.25+推荐的简洁实现

如果你用的是1.25及以上版本的Streamlit，st.html组件能让自定义按钮的代码更简洁：

import streamlit as st

if "clicked" not in st.session_state:
    st.session_state.clicked = False

def handle_click():
    st.session_state.clicked = True

# 直接渲染自定义HTML按钮
st.html("""
<style>
.custom-btn {
    font-family: "Courier New", monospace;
    font-size: 20px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background: #0f766e;
    color: white;
    cursor: pointer;
}
.custom-btn:hover {
    background: #115e59;
}
</style>
<button class="custom-btn" onclick="Streamlit.setComponentValue('my_btn', true)">Click me</button>
""")

# 处理点击事件
if st.session_state.get("my_btn"):
    handle_click()
    st.session_state.my_btn = False

if st.session_state.clicked:
    st.success("Clicked!")