如果您希望跨多个浏览器和平台保持一致，则使用font-variant: small-caps;并不是一个好主意。
当我第一次遇到这个属性的问题时，我遇到了另一个SO成员在这里写过的跨浏览器问题：font-variant: small-caps; shows different font sizes using Chrome or Firefox。要解决这个问题，您需要做的就是将文本放在大写中，将大部分渲染放在远离浏览器的位置，这样它只需要使单词的第一个字母更大。那个案子就解决了。
然后我暂时将我的站点从基于Linux的服务器移动到Windows 7服务器。在Windows 7和Linux服务器上查看的完全相同的站点使用font-variant: small-caps;生成了不同的文本大小。与跨浏览器问题类似，它在第一个字母和单词的其余部分之间的大小只有1-2px的差异，但我并排放置了多个文本元素，最终将我的布局丢了10px。因此，在调整此属性的问题时，浏览器似乎不是唯一的罪魁祸首，但操作系统也是如此。
最后，我取消了这个属性，将文本放在大写字母中，并使用:first-letter伪元素来实现我想要的。
经过长时间的解释，我的问题是......我知道一些渲染部分由操作系统处理，比如表单元素的外观，但为什么文本大小会受到影响？我认为这完全由浏览器处理。