如何用CSS实现包含两种及以上字体的单行滚动文本？

核心优化思路：将所有需要滚动的标题元素放入同一个容器，给容器应用滚动动画，这样内部所有元素会同步跟随容器滚动，同时可以自由为每个标题设置不同字体样式，无需重复定义动画。

具体实现步骤 #

• 将h1、h2等标题放入同一个滚动容器内，确保它们能在同一行排列
• 修改标题元素的显示方式为inline-block，消除默认的块级换行行为
• 把动画逻辑统一应用到容器上，删除重复的@keyframes定义，只保留一套动画规则

完整代码示例 #

HTML

<!DOCTYPE html>
<title>Example</title>

<style>
/* 滚动容器样式 */
.scroll-container {
  white-space: nowrap; /* 确保内部元素不换行 */
  position: relative;
  overflow: hidden; /* 隐藏容器外的内容 */
}

/* 动画定义（仅需一套） */
@keyframes scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 给容器应用动画 */
.scroll-container {
  animation: scroll 15s linear infinite;
}

/* 自定义h1的字体和样式 */
.scroll-container h1 {
  display: inline-block; /* 让h1在同一行显示 */
  font-family: 'Arial', sans-serif;
  font-size: 3em;
  color: limegreen;
  margin: 0;
  line-height: 50px;
}

/* 自定义h2的字体和样式 */
.scroll-container h2 {
  display: inline-block; /* 让h2在同一行显示 */
  font-family: 'Georgia', serif;
  font-size: 3em;
  color: dodgerblue;
  margin: 0;
  line-height: 50px;
}
</style>

<div class="scroll-container">
  <h1>Scrolling text1...Scrolling text2...</h1>
  <h2>Scrolling text3...Scrolling text4...Scrolling text5...</h2>
</div>

关键说明 #

1. 容器动画：所有滚动逻辑由容器承担，内部的h1、h2会同步跟随滚动，彻底解决不同元素动画不同步的问题
2. 多字体实现：通过给h1、h2分别设置font-family，轻松实现同一行文本的多字体效果
3. 代码精简：删除了重复的@keyframes定义，减少冗余代码，更易维护
4. 换行控制：容器的white-space: nowrap和标题的inline-block确保所有文本在同一行显示

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