时间戳

首页 > 解决方案 > 旧式数字（“onum”）在 Chrome 中不起作用

css - 旧式数字（“onum”）在 Chrome 中不起作用

问题描述

使用旧式图形OpenType 功能font-feature-settings: "onum"在 Chrome 中不起作用。它适用于所有其他主要浏览器，例如 Mac 和 iOS 的 Safari 以及 Firefox。

如何以一种也可以在 Chrome 中使用的网络字体激活旧式图形？

OpenType 人物

这是一个例子：

@font-face {
  font-family: "Garamond Premier Pro Display";
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "onum"; /* Activate oldstyle figures */
  src: url("https://use.typekit.net/af/6abdec/00000000000000003b9ade3b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2")
}

html, body { height: 100% }

body {
  display: grid;
  place-items: center
}

h1 { font: 700 calc(9rem / 2)/1 "Garamond Premier Pro Display" }
<h1>1776</h1>

标签： cssgoogle-chromewebfontstypographyopentype

解决方案

我正在为任何为此苦苦挣扎的人发布问答。经过大量的试验和错误，我想出了如何去做。

要在 Chrome 中激活旧式图形，需要使用：

font-variant-numeric: oldstyle-nums


@font-face {
  font-family: "Garamond Premier Pro Display";
  font-weight: 700;
  font-style: normal;
  font-feature-settings: "onum"; /* Activate oldstyle figures */
  src: url("https://use.typekit.net/af/6abdec/00000000000000003b9ade3b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2")
}

html, body { height: 100% }

body {
  display: grid;
  place-items: center
}

h1 {
  font: 700 4.5rem/1 "Garamond Premier Pro Display";
  font-variant-numeric: oldstyle-nums /* Activate oldstyle figures in Chrome */
}
<h1>1776</h1>

推荐阅读