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


12

有没有一种可以调整字体字形以模拟文本图形的方法

在此处输入图片说明

背景

文本数字是“小写”数字。通常使用小写数字,也使用小写文本(例如,句子中间)。

从来没有使用大写和小写数字创建键盘。Unicode并没有专门对它们进行编码,因为“它们不被视为与衬砌图形分开的字符,只是书写相同字符的另一种方式。”

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

维基百科通常提到:

  • 012x-height
  • 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>

渲染为:

在此处输入图片说明

同样,这看起来并不像我想的那样令人愉悦。

嘿,一分钱!

在此处输入图片说明

Answers:


11

简短的答案是“不”。

旧式图形(“小写”)是用这种方式专门绘制的。传统Postscript和TrueType字体在大多数情况下仅包含表格形式的图形,根据字体的设计方式,这些图形是衬砌的还是旧式的。

Unicode Consortium并不建议将衬砌图变形为旧式图,仅是数字0-9仅存在一组Unicode值,而不管每个数字是否有多个字形。

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

从印刷的角度来看,不仅没有接受的方式来完成您要问的事情,而且我想也没有接受的方式。正如您所发现的那样,试图通过移动基准线和扭曲衬砌数字来达到目标​​似乎很可怕。


这是一个很好的答案,但是似乎引出了一个问题,即浏览器将完全支持OpenType,就可以在CSS中指定当字体包含两种字体时使用哪种数字风格。
e100 2012年

1
还有一个重要的要点是,没有办法保证“ Segoe UI”,“ Calibri”甚至是sans-serif都不是显示的实际字体。在用户已安装的任意旧式样式中,使用的确切基线和x高度值可能看起来更加糟糕。
horatio 2012年

为什么Unicode协会没有编码为大写字母,小写数字分开的字形,但任何见解确实编码独立字形大写AU+0041),小写aU+0061),甚至sᴍᴀʟʟcᴀᴘɪᴛᴀʟ U+1D00)?即,排除单独的大写和小写数字,但包括单独的大写和小写字母的原因可能是什么?
伊恩·博伊德

最后,您能否命名同时包含“大写”“小写”数字的OpenType字体?
伊恩·博伊德

1
@IanBoyd:常规的大写和小写字符在含义上是不同的,因此,它们之间的切换不仅仅是样式选择。但是,大写和小写数字的含义是相同的,因此Unicode根本不想编码任何内容–出于同样的原因,对于斜体,小写字母,小写和类似字符没有特定的编码。您找到的小写字符仅被编码,因为它们在语音中具有不同的含义,并且不应用于强调(为此,您应使用OpenType功能或类似功能)。
Wrzlprmft

5

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

您正在寻找的CSS设置是

font-feature-settings: "onum";

和文档:

的OpenType功能的文档,以及onum功能特别,可以发现微软的OpenType布局标签注册表

如何在CSS中编码OpenType功能中提供了有关字体功能的替代文档。

正式来说,您应该使用

font-variant-numeric: oldstyle-nums;

但是根据Mozilla的浏览器兼容性参考,对该功能的支持似乎更加薄弱。

从理论上讲,这是更好的方法,因为它不直接引用OpenType功能,因此它也应与非OpenType字体一起使用。同样,您应该使用:

font-variant: small-caps; 

使小盘。千万不能使用OpenType功能设置,如

font-feature-settings: "smcp";

实现此效果的原因font-variant是已经很好地支持了属性。


不,您永远都不想使用它,font-variant: small-caps;因为这会造成FAKE小写字母。始终使用另一种字体,并始终使用OpenType字体。简单而解决。
tchrist

根据定义(w3.org/TR/CSS21/fonts.html#propdef-font-variant)是acceptable,如果small-caps功能是伪造的。这不是必需的,高质量的用户代理将做正确的事情(将其映射到OpenType功能)。我同意,如果您宁愿没有更改而不是伪造的小写字母,则应该使用font-feature-settings。通常,假冒的小型股总比根本没有效果要好。
Mikko Rantalainen
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.