字体变体：仅在 Firefox 中为 Roboto Condensed 呈现错误的小型大写字母答案

【问题标题】：Font-variant: small-caps rendered wrong for Roboto Condensed in Firefox only字体变体：仅在 Firefox 中为 Roboto Condensed 呈现错误的小型大写字母
【发布时间】：2022-04-06 03:32:32
【问题描述】：

我正试图在我公司的网站上强制使用小型股效果，除了 Firefox（没关系版本）之外，一切都很好。

Firefox 可以正确呈现 Roboto 和任何其他字体 - 只要字体包含字符集，特定语言的字符就没有问题，但是一旦我使用 Roboto Condensed - Firefox 会呈现所有字符，就好像它们很小一样 - 甚至大的字符也会被转动变成小型大写字母，语言特定的字符被弄乱了 - 没有转换，或者将小到大...

网站本身没有问题，任何现场 HTML/CSS 测试器都可以提供相同的效果：

<body> Lorem Ipsum dołor sił Łamet Lorem Ipsum dołor sił Łamet Lorem Ipsum dołor sił Łamet </body>

https://jsfiddle.net/12ks6xd8/

Chrome 和许多 IE 都能正常工作。

【问题讨论】：

好吧，我放弃了，把字体改成了 Open Sans。

标签： firefox text-rendering roboto

【解决方案1】：

这里有一个 demo 似乎有效：

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

p {
    font-variant: small-caps;
}

.Roboto{
    font-family: 'roboto', sans-serif;
}

.RobotoCondensed{
    font-family: 'Roboto Condensed', sans-serif;
}

<p>Tested on Firefox 99.0 (64 bit).</p>
<p class="Roboto">Lorem Ipsum dołor sił Łamet</p>
<p class="RobotoCondensed">Lorem Ipsum dołor sił Łamet</p>

【讨论】：