CSS：小型大写字母，第一个字母有点大胆

Question

有没有办法让第一个字母更薄或vice verca？请参阅图片和提供的CSS。

的CSS：

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

正如你所看到的那样，大写的每个单词的第一个字母更黑/更大胆

Answer 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/

看到所需的结果

Answer 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;
    }

Answer 3

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

Answer 4

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

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

这在MacOS的Chrome 73上有效。没有在其他浏览器上进行测试。