如何在HTML单个单词及标题中实现两种不同字体显示？

核心实现思路 #

用<span>标签单独包裹需要更换字体的字符，通过CSS指定不同字体即可。你之前失败大概率是CSS优先级不足、字体未正确加载或选择器写错导致的。

示例代码 #

HTML结构

<h1>
  Stack<span>O</span>verflow
</h1>

CSS样式

/* 标题基础字体设置 */
h1 {
  font-family: "Arial", sans-serif;
  font-size: 3rem;
}

/* 单独指定span内字符的字体 */
h1 span {
  font-family: "Georgia", serif;
  color: #f48024; /* 可选：搭配颜色强化视觉区分 */
  font-weight: bold;
}

常见排查点 #

• 确认字体已正确引入：本地字体需用@font-face声明，Web字体要确保加载完成
• 检查CSS优先级：若有其他样式覆盖span字体，可提升选择器权重（比如用h1 > span或给span加类名.special-font）
• 避免span被多层嵌套：确保span直接包裹目标字符，不被其他元素隔离导致样式失效

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