DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元免费额度！
font-variant 属性允许您将目标文本更改为小型大写字母。此属性在 CSS3 中得到扩展。
p:first-line {
font-variant: small-caps; /* default is `normal` */
}在 CSS3 之前，此属性接受两种可能的取值之一：normal（默认情况下文本的呈现方式）和 small-caps。
small-caps 取值将以比普通大写字母更小的尺寸呈现文本中的大写字母。这不会覆盖在标记中设置的大写字母，例如
在上面的演示中，两段文本都设置为 font-variant: small-caps。第一段文本仅在标记中将第一个字母设置为大写，因此它按预期显示（第一个字母大写，其余为小型大写字母）。
第二行在标记中以全大写形式编写，这会覆盖 small-caps 取值，将所有内容设置为普通大写字母。
更进一步，如果将这些段落设置为 font-variant: small-caps 和 text-transform: lowercase，则它们将以全小型大写字母显示。类似地，如果将这些段落设置为 font-variant: small-caps 和 text-transform: uppercase，则它们将以全普通大写字母显示。
font-variant 可以作为 font 简写声明的一部分。
CSS3 中的新增内容
在 CSS3 中，font-variant 成为一个简写属性，可以接受多个取值，包括 all-small-caps、petite-caps、all-petite-caps、titling-caps 和 unicase 等。
其他资源
浏览器支持
在 IE6/7 中，将 font-variant: small-caps 设置为 text-transform: uppercase 或 text-transform: lowercase 将导致任何文本看起来像 text-transform: none。
相关
font
font-family
font-size
font-stretch
.element { font-stretch: ultra-condensed; }
font-style
font-synthesis
.intro { font-synthesis: weight style; }
font-variant-numeric
.fraction { font-variant-numeric: diagonal-fractions; }
font-weight
span { font-weight: 800; }
line-height
.element { line-height: 1.35; }
Chris,
需要注意的是，目前存在一个 Webkit 错误，它会阻止 font-variant 在非系统字体上正常工作。我相信他们正在努力修复这个问题，但是发布两年后，Google 字体在 Chrome 中仍然看起来很糟糕。;)
Josh,
你是否有一个指向错误报告或描述此问题的文章的链接？我无法通过 Google 找到有关 font-variant 的任何内容，并且以前从未听说过这个错误。
我正在帮助 Chris 完成这些年鉴条目，如果您有具体的链接，甚至只是用于与其他浏览器进行比较的演示，我很乐意更新它。
谢谢！
Louis,
很高兴你正在编写这本年鉴。它非常有用！我现在意识到我将这个错误和其他错误弄混了，我的思路混乱了。
实际上它存在于 Webkit 中，使用 text-rendering: optimizeLegibility…
https://code.google.com/p/chromium/issues/detail?id=51973
抱歉造成混淆。不确定是否需要专门记录这个问题。今天它给我带来了一些困扰。
啊，好吧，没问题。很有趣，因为我对这个属性不太了解。而且现在我查看了它
https://mdn.org.cn/en-US/docs/Web/CSS/text-rendering
它说
“text-rendering 属性是一个 SVG 属性，在任何 CSS 标准中都没有定义”，但它在常规 HTML 中仍然有效。
根本**不是**真的。也许是微软的员工？:)
Josh,
感谢您提供有关 Webkit 中 optimizeLegibility 错误的信息。我一直不明白为什么 font-variant 无法正常工作，它让我很抓狂。
font-variant 属性不是跨浏览器的。在 Webkit 中，字母比其他浏览器小。有没有办法解决它？
我的意思是小写字母当然。
没有，可能不行。CodePen 中的示例应该使用 Normalize.css，所以如果有办法解决这个问题，我相信它会包含在里面。我认为这只是一个你需要处理的小的浏览器差异。
Chris/Louis，我怀疑
font-variant比这更糟糕。我只在 Chrome 上做了些快速测试，但font-variant不会产生“正确”的小写字母（在不同字形的意义上），而是只会产生小写大写字形；这并不是小写字母的真正意义所在。我写了一篇快速文章，它突出了这个问题和一个可能的解决方案。它不是严格的浏览器调查，但希望它能带来一些启发。我认为 font-variant: small-caps 不会应用于大写字母文本有点奇怪。我喜欢尽可能地保留原始文本的意义，所以每当我将首字母缩略词写成 HTML 时，我喜欢将其保留为大写，但通过 CSS 以小写字母显示它。但是根据我的逻辑，它不起作用，如上所述，它只适用于小写字母。有没有办法解决这个问题？也许只在首字母缩略词上使用一个类，并设置一个较小的字体大小？:-S
解决方法在文章中提到：“text-transform: lowercase”。你可以在 HTML 源代码中以大写字母写首字母缩略词，当 CSS 应用后，它会在转换为小写字母之前被转换为小写字母。
这种字体变体工具可以用于 Adobe Photoshop CC 来减小将以“.png”或“gif 格式保存的 logo 的文件大小，因为 Google 对 G Suite 应用程序中的 logo 大小有限制（30kb）？
和平！
感谢您的信息！