CSS：small-caps，第一个字母加粗一点答案

【问题标题】：CSS: small-caps, the first letter is a bit bolderCSS：small-caps，第一个字母加粗一点
【发布时间】：2019-03-27 04:20:26
【问题描述】：

有没有办法让第一个字母更细一点或vice verca？请查看提供的图片和 css。

css:

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

如您所见，每个大写单词的首字母更黑/更粗

【问题讨论】：

不清楚你是想让第一个字母更细还是更粗。问题似乎是您正在使用font-variant: small-caps，它会产生“假小型大写字母”，实际上只是缩小了大小的大写字母，因此笔画宽度比正常大写字母小。并且接受的答案涉及其他事情，所以仍然不知道问题是什么。

标签： html css fonts

【解决方案1】：

对于每个单词的第一个字母不是。

但您可以使用:first-letter 伪选择器为td 元素中的第一个字母

对于仅放大每个单词的第一个字母，您可以使用text-transform:capitilize

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

或者，如果使用 jquery，您可以使用 Lettering.js plugin

调用它

$(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/ 所示

【讨论】：

这如何解决主要问题，使第一个字母变薄？
@JukkaK.Korpela "orvice verca" 和随附的屏幕截图.. 我的理解是，基本问题是如何针对每个单词的第一个字母进行特殊样式设置..

【解决方案2】：

考虑使用不同的（更细的）字体，然后使用:first-letter CSS3 选择器将第一个字母变大。有许多 Open-Type 字体与您发布的字体相似。

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

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

【讨论】：

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

【解决方案3】：

我认为你无法在 css 中做到这一点。您必须将每个单词的第一个字母包装在一个额外的元素中，然后设置它的样式

【讨论】：

【解决方案4】：

您需要将每个单词的第一个字母大写，然后font-variant: small-caps 会为您提供您想要的结果。幸运的是，我们也可以使用 CSS 做到这一点：

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

这适用于 MacOS 上的 Chrome 73。没有在其他浏览器上测试。

【讨论】：