将所有字母大写第一个更大的字母

Question

在CSS中最有效的方法是什么？ 基本上它看起来像这样：{F} IRST {L} ETTER，括号中的字母比其他字母大一点，但它们都是大写字母。

有什么建议吗？

Answer 1

使用CSS的font-variant属性

h1 {
  font-variant: small-caps;
}

<h1>Main Heading</h1>

Answer 2

p {
  text-transform: uppercase
}

p::first-letter {
  font-size: 200%;
}

<p>Example text</p>

JS Bin

Browser support

Answer 3

.simplyCapFirstBigger
{
    font-variant: small-caps;
}

Answer 4

看看它是不是动态数据我有一个很好的建议是： 将您想要的字母包裹在一个跨度中稍大一些，并为此跨度创建一个类，其字体大小大于h1字体大小，例如，如果h1字体大小为16px，则跨度为18px

h1 {
  font-size: 16px;
}

span {
  font-size: 18px;
}

<h1><span>M</span>ain <span>H</span>eading</h1>

这样可以轻松解决您的问题，但使用css font-variant不会占用大小。