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