Использование font-variant: small-caps; не очень хорошая идея, если вам нужна согласованность между несколькими браузерами и платформами.
Когда я впервые столкнулся с проблемами с этим свойством, я столкнулся с кросс-браузерной проблемой, о которой другой член SO написал здесь: font-многозащитный: small-caps; показывает разные размеры шрифтов, используя Chrome или Firefox . Чтобы обойти это, все, что вам нужно сделать, это поместить текст в верхний регистр, забрав большую часть рендеринга из браузера, так что нужно всего лишь увеличить первую букву слова. Это дело было раскрыто.
Затем я временно переместил свой сайт с сервера на базе Linux на сервер под управлением Windows 7. Один и тот же сайт, просматриваемый на серверах Windows 7 и Linux, выдает текст разного размера с font-variant: small-caps;. Подобно кросс-браузерной проблеме, разница между первой буквой и остальной частью слова составляет всего 1-2 пикселя, но у меня было несколько текстовых элементов рядом, что в итоге отбросило мой макет на 10 пикселей. Таким образом, кажется, что браузер - не единственный виновник, когда дело касается определения размеров проблем с этим свойством, но также и операционной системы.
В конце концов я покончил с этим свойством, поместил текст заглавными буквами и использовал псевдоэлемент :first-letter для достижения желаемого.
После этого длинного объяснения мой вопрос ... Я знаю, что некоторая визуализация частично обрабатывается операционной системой, например, появление элементов формы, но почему это повлияет на размер текста? Я думал, что это было полностью обработано браузером.