如何构造“小写数字”(即文本数字)?

平面设计 排版 文本 调整大小 线高
2021-12-31 04:37:52

是否有一种可接受的方式来调整字体字形以模拟文本图形

在此处输入图像描述

背景

文本数字是“小写”数字。您通常在使用小写文本的地方使用小写数字(例如在句子中间)。

键盘从未使用大写和小写数字创建;并且 Unicode 并没有专门对它们进行编码,因为“它们不被视为与衬里数字分开的字符,只是写相同字符的不同方式。”

这让我想到了我的问题;从字体的标准“大写字母”创建小写字母的公认方法是什么?

维基百科通常提到

  • 012x-身高
  • 68有上升者
  • 34579有后代

在此处输入图像描述

我的第一次尝试(在 Photoshop 中)是:

  • 糊涂012
  • 向下轻推34579
  • 离开68他们在哪里:

在此处输入图像描述

在此处输入图像描述

但是倾斜的数字(0、1、2)看起来明显不愉快。

如果 Unicode 联盟建议“小写数字”可以简单地从“大写”数字构建 - 他们建议我做什么?

理想情况下是 HTML

我的最终目标是在浏览器中显示小写文本。我知道一些字体(例如格鲁吉亚)已经将所有数字显示为小写:

在此处输入图像描述

但我不是在问如何切换到使用Georgia我在问如何用非衬里数字构造衬里数字。

而且由于这是为了在网络上显示,我意识到我可能最终不得不应用每个字符的格式:

<!doctype html">
<html>
<head>
    <style type="text/css">
        body {
            font-family: "Segoe UI", "Calibri", sans-serif;
            font-size: larger;
        }

        .xheight {
            font-size: 1.5ex;
        }

        .descender {
            position: relative;
            bottom: -0.4ex;
        }
    </style>
</head>
<body>
    <p>In the year <span class="xheight">21</span><span class="descender">5</span><span>6</span> the Romulan war...
</body>
</html>

渲染为:

在此处输入图像描述

再一次,这看起来并不像我认为的那样令人愉快。

嘿,看,一分钱!

在此处输入图像描述

2个回答

非常简短的回答是“不”。

旧式数字(“小写”)是专门以这种方式绘制的。Legacy Postscript 和 TrueType 字体在大多数情况下只包含表格图形,根据字体的设计方式,它们是衬里或旧式。

Unicode 联盟并不建议衬里数字可以扭曲为老式数字,只是数字 0-9 只有一组 Unicode 值,无论每个数字是否有多个字形。

许多 OpenType 字体同时包含衬里和旧式图形,包括表格宽度和比例宽度,表格衬里图形是通常的默认值。这些都可用于支持 OpenType 的应用程序,通常通过字符或段落样式中的首选项设置。它们共享 Unicode 值,但它们是单独绘制的替代字形,在字体软件中作为轮廓存在(或不存在)。(在您的 CSS 中的字体系列中,Calibri 有老式图形,但 Segoe UI 没有。)

从排版的角度来看,不仅没有可接受的方式来做你所要求的,我想说也没有可接受的方式。正如您所发现的,试图通过改变基线和扭曲衬里数字来达到目标​​看起来很可怕。

呈现小写数字/数字或“旧式数字”的正确方法是使用 CSS 选择合适的字体功能。显然,使用的字体首先应该支持此字体功能。现实世界对 webfonts 的支持似乎不太强。

您正在寻找的 CSS 设置是

font-feature-settings: "onum";

和文档:

OpenType 特性的文档,onum特别是特性的文档,可以在Microsoft 的 OpenType 布局标记注册表中找到。

有关字体功能的替代文档,请参阅如何在 CSS 中编写 OpenType 功能一文。

正式来说,你应该使用

font-variant-numeric: oldstyle-nums;

但根据Mozilla 的浏览器兼容性参考,对此的支持似乎更弱

理论上这更好,因为它不直接引用 OpenType 功能,因此它也应该适用于非 OpenType 字体。以同样的方式你应该使用:

font-variant: small-caps; 

启用小型股不要使用OpenType 功能设置,例如

font-feature-settings: "smcp";

达到这个效果,因为font-variant属性已经得到很好的支持。