显示上标数字时字体错误

Question

我正在尝试使用自定义字体呈现一些像这样的上标数字：¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁰，但只有前 3 个数字使用当前的 font-family 显示。其他的以默认页面字体显示。

这是一个工作示例：

@font-face {
  font-family: "verveine";
  src: url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.eot");
  src: url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.eot?#iefix")
      format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.woff2")
      format("woff2"),
    url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.woff")
      format("woff"),
    url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.ttf")
      format("truetype"),
    url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.svg#VerveineW01-Regular")
      format("svg");
}

body {
  font-family: verveine;  
}

Test 1 2 3 4 5 6 7 8 9 0<br/>
Test ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁰

但是当我访问 Adob​​e 网站上的 Verveine font page 并输入这些上标数字时，它们会正确显示：

我该如何解决这个问题？

编辑：

现在我将采用这种相当笨拙的解决方案来解析文本并将每个上标数字包装在 sup 标记中

function fixSuperNumbers(input: string): ReactNode[] {
  const supers: Record<string, string> = {
    "¹": "1",
    "²": "2",
    "³": "3",
    "⁴": "4",
    "⁵": "5",
    "⁶": "6",
    "⁷": "7",
    "⁸": "8",
    "⁹": "9",
    "⁰": "0",
  };
  let results: ReactNode[] = [""];

  for (let c of input.split("")) {
    if (supers.hasOwnProperty(c)) {
      results.push(<sup>{supers[c]}</sup>, "");
    } else {
      results[results.length - 1] += c;
    }
  }

  return results.map((result, i) => <Fragment key={i}>{result}</Fragment>);
}

Answer 1

某些字体不支持所有 Unicode 字符。在这种情况下，此类字符将使用备用/系统字体。

当您在 Adobe 的网站上测试时，您还没有激活您提到的字体。

激活字体后，您会看到该字体不支持 unicode 字符。

您的代码的 Unicode 值是

%B9
%B2
%B3
%u2074
%u2075
%u2076
%u2077
%u2078
%u2079
%u2070

1,2和3属于Bx组，其余属于207x组。

我使用FontDrop 来检查字形，它确实支持Bx 组，但不支持207x 组。

这就是为什么您看到 1-3 OK 而 4-0 Not OK。