卡特琳娜字体中的数字答案

【问题标题】：Numbers in katerina font卡特琳娜字体中的数字
【发布时间】：2013-03-31 20:34:18
【问题描述】：

您好，我在 Web 应用程序中使用的 katerina 字体有问题。我需要使用 mPDF 将一些文本从 html/css 转换为 pdf。问题是，这个数字看起来很别扭。

http://prntscr.com/zv9rl

但是当我在 Photoshop 中使用 ALL CAPS 功能时，它们看起来不错。

http://prntscr.com/zv9xw

我只需要它们在同一行。有什么办法可以在 php 或 css 中将它们转换为 Photoshop 中的样子（全部大写）？

【问题讨论】：

p { text-transform: uppercase; } ???
我看不出你截图中的数字有什么问题。我也是第一次看到数字的大写字形:)
只是在黑暗中拍摄，但在 PS 中你有一些字距调整或其他东西，所以它使字体看起来像是在同一行。在其他地方你没有那种程度的控制，所以字体显示了作者的意图。您可能必须使用另一种字体

标签： php html css fonts mpdf

【解决方案1】：

试试font-size: 24px; line-height: 26px; vertical-align: baseline;

如果baseline 不起作用，请尝试text-top、bottom 或text-bottom

希望其中一个能成功...

【讨论】：

text-transform:uppercase 不起作用，我知道这看起来很疯狂，但我需要这些数字在同一行，我只是想如果它可以用 photoshop all caps 功能解决，比它将在 css 或 php 中实现。

【解决方案2】：

从图片来看，字体似乎包含“旧式”（或“小写”）数字和“衬里”（或“大写”）数字。然后它们将是字形变体，而不是单独的字符（如“a”和“A”），旧式数字是默认值。大概 Photoshop 中的 ALL CAPS 选择了衬里数字；这有点奇怪，但有可能——毕竟，从印刷上讲，衬数字应该用在由大写字母和数字组成的表达式中。 – 我无法真正确认这一点，因为我没有字体，而且网络上称为 Katerina 的字体看起来非常不同。

在 HTML 中，过去不可能选择字形变体，但情况正在发生变化。查看我的demo page 字体功能。如果您的系统中安装了 Katerina，请在现代浏览器上打开页面，在其中输入字体名称，然后查看带有“lnum”的行；它应该显示衬里数字。如果是这样，当使用的字体支持时，您可以使用以下 CSS 声明来请求此类数字：

-webkit-font-feature-settings: "lnum";
-moz-font-feature-settings: "lnum";
font-feature-settings: "lnum";

这种样式是否转移到生成的 PDF 是另一回事。我不是 PDF 方面的专家，但我希望它能够对OpenType 功能提供一些支持（这就是它的意义所在）。

【讨论】：

谢谢，你的方法在浏览器中有效，但在 mpdf 中无效，但现在没关系，我在字形编辑器中打开字体并自己修改。