如何让文本中每个单词的第一个字母与其他大小不同？如何获取每个单词的第一个字母是不同的大小，其余大小相同

例如，我试图让J慢跑比ogging更大，J慢跑比og更大。还有一切都必须是大写字母。

慢跑JOG

到目前为止，我已经

HTML：

<h1> 
    JOGGING JOG 
</h1>

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

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

来源

2016-01-22 MadMan

也许这样的事情https://jsfiddle.net/aow3qm9s/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>

来源

2016-01-22 03:26:31

完美的感谢很多× – MadMan

当然，但只需要等待3分钟:) – MadMan

使用值为small-caps的font-variant CSS属性。（“Small caps”是您正在寻找的印刷效果的正确名称。）

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

font-variant会将小写字母显示为较小尺寸的大写字母，并将大写字母显示为正常大小。因此，指定所需的字母更大（“J”）为大写，但你要为小写字母小字母（“ogging”，“OG”）：

<h1>Jogging Jog</h1>

按照spec，font-variant

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

实施例：

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

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

<h1>Jogging Jog</h1>

来源

2016-01-22 03:21:56

无遗憾它没有工作:( – MadMan

对不起，我很困惑，你的意思是在h1的html文件中，我需要把慢跑作业，并链接到CSS？如果是这样，我做了这个，但它没有工作 – MadMan

你对什么感到困惑？例如，您只需将“h1”的内容写为“慢跑慢跑”（而不是“JOGGING JOG “），并将'font-variant'属性规则添加到'h1'的CSS中。 – 2016-01-22 03:32:20

尝试此。

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

希望这有助于。

来源

2016-01-22 03:25:13 Help

但这只能解决元素的第一个字母，而不是每个单词的首字母，因为OP似乎需要。 – 2016-01-22 03:27:28

啊感谢这个工程的第j个慢跑，但不是最后法官在慢跑:( – MadMan

你可以修改你的HTML像

慢跑

工作

– Help

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

回答

慢跑

工作

相关问题