CSS font-variant-numeric斜线零不工作

fruv7luv 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(112)

我试图通过添加以下css属性font-variant-numeric:slashed-zero来区分敏感信息中的零和字母'O'，但它不起作用。我跟着这个turorial：https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric，但没有结果。
Here你可以找到我做了什么，也是结果。
你有什么想法或替代方案来解决这个问题吗？

css

来源：https://stackoverflow.com/questions/66953673/css-font-variant-numeric-slashed-zero-not-working

2条答案

按热度按时间

ct3nt3jp1#

正如前面所述，您需要使用OpenType字体。在下面的示例中，我使用了这里的@font-face设置，并通过<link>标记将Google Fonts CDN更改为jsDelvr CDN。我通过google找到了OpenType css文件：“SourceSansPro-Regular.otf cdn”.
Fiddle

@font-face {
  font-family: 'Source Sans Pro';
  src: url("SourceSansPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

.value3 {
  font-variant-numeric: slashed-zero;
  font-family: 'Source Sans Pro';
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,
                    initial-scale=1.0" />
  <link href="
https://cdn.jsdelivr.net/npm/source-sans-pro@3.6.0/source-sans-pro.min.css" rel="stylesheet">
  <title>Document</title>
</head>

<body>
  <p>
    <span>Slashes-zero: </span>
    <span class="value3">0Oo1lL</span>
  </p>
</body>

</html>

赞(0）回复(0）举报 2023-06-25

ufj5ltwl2#

您的示例在Google Fonts URL中有空格，这是不正确的。URL应为https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,400;1,400&display=swap。不幸的是，Google Fonts似乎并不支持这个功能，大概是因为它提供了woff2文件而不是OTF。
https://practice.typekit.com/lesson/caring-about-opentype-features/有一些很好的工作示例。如果您在CodePen中打开其中一个，并将font-variant-numeric: slashed-zero;添加到相关部分（例如.since在第一个示例中，td在最后一个示例中），您将看到您正在寻找的行为。这些示例使用Adobe TypeKit工作。下面是一个工作示例：

body {
            font-family: "source-sans-pro";
}
.slashed {
            font-variant-numeric: slashed-zero;
}

<script src="//use.typekit.net/ihq4gbu.js"></script><script>try{Typekit.load();}catch(e){}</script>
<p>
    <span>Slashed zero: </span>
    <span class="slashed">0Oo1lL</span>
</p>
<p>
    <span>Unslashed zero: </span>
    <span class="unslashed">0Oo1lL</span>
</p>

赞(0）回复(0）举报 2023-06-25

我来回答

CSS font-variant-numeric斜线零不工作

2条答案

相关问题

热门标签

最新问答