CSS:小型大写字母,第一个字母有点大胆

问题描述 投票:4回答:4

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

CSS:

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

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

html css fonts
4个回答
2
投票

因为每个单词的第一个字母不是。

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

只是为了扩大每个单词的第一个字母,你可以使用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/看到的理想结果


0
投票

考虑使用不同的(更薄)字体,然后使用: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;
    }

0
投票

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


0
投票

你需要将每个单词的首字母大写,然后font-variant: small-caps会给你你想要的结果。幸运的是,我们也可以使用CSS来做到这一点:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.