4

在 MS Word 上，我们有一个名为“Small Capitals”的文本功能。它将所有字母变为大写，但小写字母变小然后大写。我需要知道在 CSS 中是否可行。

例子：

原文：Hello World
Small Capitals：H ELLO W ORLD

注意：所以 Markdown 不支持font-size标签下的 CSS 样式small，所以我显示为 hack。好吧，大写字母比小写字母大。

在CSS中可能吗？我怎么能这样做？

4

3 回答 3

9

在英文中称为“small capitals”或“small caps”。在排版中，小写字母是（由字体作者）单独设计的字母版本。它们具有大写字母的形状，但它们的高度通常只比字体的 x 高度（小写字母“x”的高度）大一点。它们可能以小型大写字体实现，但更常见的是，它们是字体内部的字形变体。

在 MS Word 直到并包括 Word 2007，以及在 CSS 实现中font-variant: small-caps，“小写字母”实际上只是缩小大小的大写字母。（Word 2010 允许访问 OpenType 功能和真正的小型大写字母。）这通常意味着它们的笔划宽度太小，为了避免这种影响变得太糟糕，字体大小的减少是相当适度的，所以假的“小型大写字母” ”并不比正常的首都小很多。

由于这些原因，网页上最好避免使用“小型大写字母”。

但是，在 CSS 中提供对 OpenType 功能的访问权限的工作正在进行中。目前，支持以CSS3 字体font-feature-settings中提议的属性的浏览器前缀版本的形式存在。例子：

<style>
body { 
  font-family: Calibri, sans-serif;
}
.sc { 
  -moz-font-feature-settings: 'smcp';
  -webkit-font-feature-settings: 'smcp';
  -ms-font-feature-settings: 'smcp';
  font-feature-settings: 'smcp';
}
</style>
<div class=sc>Hello world</div>
<div><span style="font-variant: small-caps">Hello world</span>
  (fake small caps)</div>

这适用于支持的浏览器（Chrome、Firefox、IE 10），前提是字体具有小写字母（例如，Calibri、Cambria、Candara、Constantia、Corbel、Palatino Linotype）。

于 2012-10-28T17:21:48.297 回答
2

是的，你可以用font-variant. 我想你的意思是“大写”

<span style="font-variant:small-caps;">Hello World</span>
于 2012-10-28T15:54:05.890 回答
0

我认为您在谈论小型股，因此请尝试：

字体变体：小型大写；

于 2012-10-28T15:53:37.653 回答