将旧样式图形与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>
我正在为所有对此感到困扰的人发布问答。经过大量的试验和错误,我想出了怎么做。
要在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>