应使用CSS的font-family替代废弃的标签，通过body或:root统一设置根级字体规则，并提供至少两个后备字体；表格内文字需用类精准控制，自定义字体须用@font-face配合font-display:swap防止FOIT。
直接换字体，别碰 <font></font> 标签——它在 HTML5 里已被废弃，浏览器不保证渲染，且无法响应式、不可维护。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
用 CSS 的 font-family 控制全局字体
仪表盘通常需要统一视觉节奏，推荐在 里用 <style></style> 或外部 CSS 设置根级字体规则：
-
body或:root上设font-family，所有继承文本自动生效，包括<table>、<code><div class="card">、<code><span class="value"></span> - 务必提供至少两个后备字体，例如：
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;，让等宽数字对齐更稳 - 给数值列单元格加类，例如
<td class="num">24.7</td>，再配.num { font-family: 'IBM Plex Mono', monospace; }—— 等宽字体让小数点垂直对齐 - 不要在每个
<td> 上写内联 <code>style="font-family: ..."，DOM 节点多时维护成本爆炸 - 如果表格由 JS 动态生成（如通过
innerHTML插入），确保 CSS 类已提前加载，否则首屏可能闪回默认字体 - 优先用
.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 控制颜色粒度
表格内文字字体单独调整的实操要点
仪表盘常含实时数据表格，但 <table> 默认继承 body 字体，若需差异化（比如表头加粗、数值右对齐+等宽），得精准控制：
<ul><li>给 <code><th> 单独设 <code>font-weight: 600; 和 text-transform: uppercase;，增强可读性
引入自定义字体（如品牌字体或图标字体）的关键动作
用 @font-face 加载本地字体文件最可控，尤其适合离线仪表盘（如树莓派部署场景）：
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是字体加载时机与内容可见性的耦合——仪表盘数据常依赖 fetch 后渲染，但字体还没加载完，font-display: swap 虽能防白屏，却可能导致初始文字用系统字体、数据更新后突然“跳变”成品牌字体。解决办法是监听 document.fonts.load()，等关键字体就绪后再触发首次数据拉取或 DOM 渲染。
