应使用CSS的font-family替代废弃的标签，通过body或:root统一设置根级字体规则，并提供至少两个后备字体；表格内文字需用类精准控制，自定义字体须用@font-face配合font-display:swap防止FOIT。

直接换字体，别碰 标签——它在 HTML5 里已被废弃，浏览器不保证渲染，且无法响应式、不可维护。

用 CSS 的 font-family 控制全局字体

仪表盘通常需要统一视觉节奏，推荐在 里用 或外部 CSS 设置根级字体规则：

• body 或 :root 上设 font-family，所有继承文本自动生效，包括 、
  、

  务必提供至少两个后备字体，例如：font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;。iOS 和 Linux 环境下没有 Inter 时会顺延到系统默认无衬线体

  避免只写单个字体名（如 font-family: Helvetica;），没 fallback 会导致某些设备显示为 Times New Roman 或方块

  仪表盘数字类文本（如温度值、状态码）建议额外加 font-variant-numeric: tabular-nums;，让等宽数字对齐更稳

  表格内文字字体单独调整的实操要点

  仪表盘常含实时数据表格，但

  默认继承 body 字体，若需差异化（比如表头加粗、数值右对齐+等宽），得精准控制：
  • 给
  ，再配 .num { font-family: 'IBM Plex Mono', monospace; } —— 等宽字体让小数点垂直对齐
  不要在每个

  单独设 font-weight: 600; 和 text-transform: uppercase;，增强可读性 给数值列单元格加类，例如	24.7	上写内联 style="font-family: ..."，DOM 节点多时维护成本爆炸 如果表格由 JS 动态生成（如通过 innerHTML 插入），确保 CSS 类已提前加载，否则首屏可能闪回默认字体 引入自定义字体（如品牌字体或图标字体）的关键动作 用 @font-face 加载本地字体文件最可控，尤其适合离线仪表盘（如树莓派部署场景）： DeepBI DHTML 页面生成器 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur 下载 优先用 .woff2 格式，体积比 .ttf 小 30%~50%，且现代浏览器全支持 @font-face 声明中必须写 font-display: swap;，否则字体加载完成前文本会空白（FOIT），仪表盘关键数据可能延迟数秒才出现 路径要相对准确：若字体放在 /assets/fonts/roboto-bold.woff2，src: url('/assets/fonts/roboto-bold.woff2') 才能命中；用 ./fonts/... 容易因入口 HTML 路径不同而 404 图标字体（如 Font Awesome）建议改用 SVG Sprite 或 inline SVG，@font-face 加载图标字体在高 DPI 屏上易模糊，且无法用 CSS 控制颜色粒度 真正容易被忽略的是字体加载时机与内容可见性的耦合——仪表盘数据常依赖 fetch 后渲染，但字体还没加载完，font-display: swap 虽能防白屏，却可能导致初始文字用系统字体、数据更新后突然“跳变”成品牌字体。解决办法是监听 document.fonts.load()，等关键字体就绪后再触发首次数据拉取或 DOM 渲染。