CSS：small-caps，首字母加粗

Question

我可以成为一个有用的助手，为您进行翻译。以下是需要翻译的内容：

有没有办法使首字母变得更细一些或者{{link1：反之亦然}}？请查看所提供的图像和CSS。

CSS：

table.form td {
    padding: 10px;
    font-family: "Open Sans";
    font-variant: small-caps;
    font-size: 15px;
}

正如您所看到的，每个单词的首字母都被大写并加粗了一些。

- RnD

---

不清楚您是想让第一个字母变细还是变粗。问题似乎在于您正在使用 font-variant: small-caps，这会产生“假小型大写字母”，实际上只是缩小了大小写字母，因此比普通的大写字母具有更小的笔画宽度。而且被接受的答案涉及其他事情，因此仍然不知道问题所在。 - Jukka K. Korpela

Answer 1

对于每个单词的首字母，不能用此方法。

但是您可以使用:first-letter伪选择器来设置td元素的首字母。

如果只想要放大每个单词的第一个字母，您可以使用text-transform:capitalize属性。

两种技巧的演示：http://jsfiddle.net/gaby/8KjT5/1

---

或者，如果使用jQuery，可以使用Lettering.js插件

调用方式如下：

$(function(){
    $('table.form td').lettering('words');
});

与CSS结合使用

table.form td span[class^="word"]{
    display:inline-block;
}
table.form span[class^="word"]:first-letter {
    font-weight:bold;
    font-size:17px;
}

您可以在此处查看所需结果：http://jsfiddle.net/gaby/8KjT5/3/。这与您想要的结果相同。

- Gabriele Petrioli

---

这如何回答主要问题，使第一个字母变得更细？ - Jukka K. Korpela

@JukkaK.Korpela "或者反之亦然"以及附带的截图。我的理解是基本问题是如何针对每个单词的第一个字母进行特殊样式设计。 - Gabriele Petrioli

Answer 2

考虑使用不同（更细）的字体，然后使用{{link1：：first-letter}} CSS3选择器将第一个字母变大。有许多与您发布的字体类似的开放式字体。

table.form td {
    padding: 10px;
    font-family: "Open Sans";
    font-variant: small-caps;
    font-size: 15px;
}

    table.form td:first-letter {
            font-size: 18px;
    }

- user3141031

---

这适用于元素的第一个字母，而不是每个单词的第一个字母。 - RnD

Answer 3

我认为在CSS中无法实现这一点。您需要将每个单词的第一个字母包装在额外的元素中，然后进行样式设置。

- Felix

Answer 4

您需要将每个单词的首字母大写，然后使用font-variant: small-caps即可得到您想要的结果。幸运的是，我们也可以使用CSS来实现：

{
    font-variant: small-caps;
    text-transform: capitalize;
}

这在MacOS上的Chrome 73上运行良好。没有在其他浏览器上测试。

- Amr Mostafa