html - 如何让每个单词的第一个字母大小不同，其余的大小相同

Question

如何使文本中每个单词的第一个字母与其他单词的大小不同？

例如，我试图让慢跑中的 J 比 ogging 大，让慢跑中的 J 比 og 大。此外，所有内容都必须是大写字母。

慢跑慢跑

到目前为止我有

HTML:

<h1>
    JOGGING JOG
</h1>

h1{
    font-family: amatic sc,cursive;
    color: #FFFFFF;
    font-size: 120px;
}

我查阅了一些资料，但似乎只能在 JavaScript 中完成。我可能是错的，但如果可能的话，这可以只用 HTML 和 CSS 来完成吗？也许使用不同的类来保存信息然后定位字母？

Answer 1

一个简单的跨浏览器解决方案，是这样的:

h1{
  font-family: amatic sc,cursive;
  color: #000;
  font-size: 30px;
}
h1 span { font-size: 40px; }

<h1><span>J</span>OGGING <span>J</span>OG</h1>