Html CSS：大写，第一个字母有点粗体

有没有办法让第一个字母更薄一点？请参阅提供的图像和css

css:

---

正如您所看到的，每个大写单词的第一个字母更黑/更粗

考虑使用不同（更薄）的字体，然后使用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;
    }

---

我认为在css中是不可能做到的。您必须将每个单词的第一个字母包装在一个额外的元素中，然后为每个单词的第一个字母设置样式

但是，您可以使用伪选择器为

td

元素中的第一个字母

只需放大每个单词的第一个字母，就可以使用

演示两种技巧：

---

或者，如果使用jquery，可以使用

用

$(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;
}

---

您将获得所需的结果，如

所示。您需要将每个单词的第一个字母大写，然后

字体变体：小写

将给出您想要的结果。幸运的是，我们也可以使用CSS实现这一点：

{
字体变体：小大写字母；
文本转换：大写；
}

---

这适用于MacOS上的Chrome73。没有在其他浏览器上进行测试。

这适用于元素的第一个字母，而不是每个单词的第一个字母。这如何解决主要问题，使第一个字母变薄？@JukkaK.Korpela“or vice verca”和附带的屏幕截图。。我的理解是，最基本的问题是如何针对每个单词的第一个字母进行特殊的样式设计。不清楚你是想让第一个字母变细还是变粗。问题似乎在于您使用的是

字体变体：小写

，这会产生“假小写”，实际上只是缩小大小的大写字母，因此笔划宽度比普通大写字母小。而被接受的答案涉及其他方面，因此问题是什么仍然不得而知。

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