CSS:小写字母，首字母大胆一些 [英] CSS: small-caps, the first letter is a bit bolder

问题描述

有没有办法使首字母更细或更副词?请查看提供的图片和CSS.

Is there a way to make the First letter a bit more thinner or vice verca? Please see the image and css provided.

css:

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

如您所见，每个单词的首字母大写都比较黑/糊

As you can see the first letter of each word which is capitalized is a bit more black/bolder

推荐答案

不是每个单词的第一个字母.

For the first letter of each word not.

但是您可以使用td元素中的第一个字母" rel ="nofollow"> :first-letter 伪选择器

But you can for the first letter in the td element using the :first-letter pseudo selector

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

For only enlarging the first letter of each word you could use the text-transform:capitilize

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

Demo with both tricks : http://jsfiddle.net/gaby/8KjT5/1

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

Alternatively if using jquery you could use the 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所示/

you get the desired result as seen at http://jsfiddle.net/gaby/8KjT5/3/

这篇关于CSS:小写字母，首字母大胆一些的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！