显示上标数字时字体错误

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 ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁰

但是当我进入 Adobe 网站的 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 不OK 的原因。

显示上标数字时字体错误

Wrong font when displaying superscript numbers

html

css

font-face