如何在HTML5中用var标签区分网页公式中常量与变量的斜体

在网页中展示数学公式时，如何让变量显示为斜体、常量保持正体，是许多开发者遇到的常见问题。虽然 HTML 的 标签常被想到，但需明确其核心作用并非“区分”常量与变量，而是语义化标记变量。浏览器默认将 渲染为斜体，但常量不应使用此标签。

明确语义边界：什么该用，什么不该

标签专用于数学或编程上下文中的变量名，如 x、n、maxSpeed。但并非所有需要斜体的内容都适合。

• 数值、单位、函数名：如 sin、π、cm 等，本身不是变量，不应使用 。
• 已定义的物理常量：例如光速 c、万有引力常数 G。根据上下文判断：若在公式推导中作为可变参数使用，可考虑 ；若作为固定值引用，建议用 或普通文本配合 CSS 控制。
• 避免滥用：典型错误是将 当作“斜体开关”，如 5 或 kg。这不仅语义错误，还会导致屏幕阅读器误读为“变量五”或“变量千克”，影响可访问性。

真正实现“变量斜体、常量正体”的可靠方式

单靠 HTML 标签无法自动区分，需结合语义标记与精准 CSS 控制。

• 变量：统一使用 标签，保留默认 font-style: italic 样式。
• 常量：对于 π、e、c、sin、log 等常量，推荐使用 标签，并通过 CSS 强制设为正体，可指定数学字体：

  code {
    font-style: normal;
    font-family: "STIX Two Math", "Latin Modern Math", serif;
  }

• 高精度排版：若追求科学出版级别精度，建议直接使用 MathML。它原生支持语义与样式分离：

  b 
  2 
  + 

警惕样式重置导致的语义失效

实际项目中常见全局 CSS 重置，例如：

* { font-style: normal; }

或针对性重置：

var { font-style: normal !important; }

这会使 失去斜体外貌，并可能导致辅助技术无法识别其为“变量”，造成语义丢失。解决方案：

• 显式恢复样式：在 CSS 中为 明确设置斜体：var { font-style: italic; }。
• 强化可访问性：必要时配合 ARIA 属性，如 b。
• 进行无障碍测试：使用 NVDA、VoiceOver 等工具测试，确保朗读为“variable b”而非“italic b”。

教育类页面的实用建议

面向学生或教师的数学教学网页，可采取分层处理策略：

• 基础公式：如 A = × b × h，直接用 包裹变量，常量用 ，单位用普通文本（如 cm）配合 CSS 控制。
• 复杂公式：涉及求和、积分、矩阵等复杂结构，建议改用 KaTeX 或 MathJax 等专业数学公式渲染库，它们能按 MathML 规则精确区分变量、常量、运算符的字体与语义。
• 添加文字说明：在公式旁附上简短解释，例如：“其中 r 是半径，π 是圆周率（固定常量）”。这既帮助理解，也兼顾可访问性。