我可以成为一个有用的助手,为您进行翻译。以下是需要翻译的内容:
有没有办法使首字母变得更细一些或者{{link1:反之亦然}}?请查看所提供的图像和CSS。
CSS:
table.form td {
padding: 10px;
font-family: "Open Sans";
font-variant: small-caps;
font-size: 15px;
}
正如您所看到的,每个单词的首字母都被大写并加粗了一些。
对于每个单词的首字母,不能用此方法。
但是您可以使用:first-letter
伪选择器来设置td
元素的首字母。
如果只想要放大每个单词的第一个字母,您可以使用text-transform:capitalize
属性。
两种技巧的演示:http://jsfiddle.net/gaby/8KjT5/1
或者,如果使用jQuery,可以使用Lettering.js
插件
调用方式如下:
$(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;
}
考虑使用不同(更细)的字体,然后使用{{link1::first-letter
}} 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中无法实现这一点。您需要将每个单词的第一个字母包装在额外的元素中,然后进行样式设置。
您需要将每个单词的首字母大写,然后使用font-variant: small-caps
即可得到您想要的结果。幸运的是,我们也可以使用CSS来实现:
{
font-variant: small-caps;
text-transform: capitalize;
}
这在MacOS上的Chrome 73上运行良好。没有在其他浏览器上测试。
font-variant: small-caps
,这会产生“假小型大写字母”,实际上只是缩小了大小写字母,因此比普通的大写字母具有更小的笔画宽度。而且被接受的答案涉及其他事情,因此仍然不知道问题所在。 - Jukka K. Korpela