在 Open Type 字体中禁用连字和文本图形

Posted 2023-03-15

【中文标题】在 Open Type 字体中禁用连字和文本图形

【英文标题】：Disabling ligatures and text figures in Open Type Font

【发布时间】：2016-10-08 17:50:14

【问题描述】：

我正在使用 Google 的 Raleway Webfont 作为我们网站的标题，但老板注意到由 2 ffs 和 fi 等组成的连字以及文本数字（带有升序和降序的数字），并认为我们最大的供应商可能会对他们的用连字和文字数字写出的名字。我尝试使用以下 CSS 关闭这些功能，但没有成功。

http://codepen.io/rachelreveley/pen/WxQPYQ

我尝试过的 CSS

h1 font-family: Raleway; font-size: 4rem;

  text-rendering: optimizeSpeed;
  font-feature-settings: unset;
  font-variant: normal;

【参考方案1】：

您需要使用letter-spacing 到1px 来实现您要查找的内容。

例如，根据您的代码，

h1 font-family: Raleway; font-size: 4rem;
    letter-spacing: 1px;
    text-rendering: optimizeSpeed;
    font-feature-settings: unset;
    font-variant: normal;
    

Live demo

您也可以查看Comparative demo here

对于数字数字，如 OP 所述，您可以使用 font-feature-settings 的值 lnum 以及 font-variant-numeric 的值 normal。

例如，

h1 font-family: Raleway; font-size: 4rem; letter-spacing: 1px;

  text-rendering: optimizeSpeed;
  font-feature-settings: unset;
  font-variant: normal;
  font-variant-numeric: normal;
  font-feature-settings: 'lnum';

Comparative Live demo - For numeric figures

您可以在以下 W3 指南中阅读更多相关信息。

W3 guidelines on font-variant-numeric

【讨论】：

感谢内森 L。我调整到 0.1px 以防止额外的字距调整。我现在只需要弄清楚图形文本。

我仍然建议使用 1px，因为 0.1 是一个棘手的值，可能无法在某些浏览器版本上呈现。

我找到了解决数字 font-feature-settings: 'lnum';

哦，太好了..感谢更新..确保它是跨浏览器兼容..至少与最新的