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

Question

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

例如，我试图使慢跑中的J大于慢跑，慢跑中的J大于og。一切都必须是大写字母。

JOGGING JOG

到目前为止我已经

了

HTML：

<h1>
    JOGGING JOG
</h1>

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

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

Answer 1

一个简单的跨浏览器解决方案，是：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用font-variant CSS属性，其值为small-caps。 （＆＃34;小型大写＆＃34;是您正在寻找的印刷效果的正确名称。）

CSS设计人员已经预见到了您的需求，并且仔细地提供了解决方案，因此我们所要做的就是指定单个CSS属性font-variant。

font-variant会将小写字母渲染为较小尺寸的大写字母，将大写字母渲染为正常大小。因此，请将您想要更大的字母（＆＃34; J＆＃34;）指定为大写字母，但将小字母指定为小写字母（＆＃34;＆＃34;，＆＃34; og＆＃34;） ：

<h1>Jogging Jog</h1>

根据spec，font-variant

  

启用小型大写字母显示。小型字母字形通常使用大写字母的形式，但缩小为小写字母的大小。

示例：

＆＃13;

＆＃13;

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

  /* MAGIC HERE */
  font-variant: small-caps;
}

＆＃13;

<h1>Jogging Jog</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 3

试试这个。

<强> CSS

h1:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

如需参考，请查看this

希望这有帮助。