【问题标题】:Old-style figures ("onum") not working in Chrome旧式数字(“onum”)在 Chrome 中不起作用
【发布时间】:2020-03-07 10:49:35
【问题描述】:

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

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



这是一个例子:

@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>

【问题讨论】:

    标签: css google-chrome webfonts typography opentype


    【解决方案1】:

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

    要在 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>

    【讨论】:

    猜你喜欢
    • 2016-12-17
    • 1970-01-01
    • 2017-12-09
    • 2017-06-18
    • 1970-01-01
    • 2015-07-03
    • 1970-01-01
    • 2013-08-04
    • 1970-01-01
    相关资源
    最近更新 更多