尽管谷歌说这个字符确实存在，但网络版的 Noto Serif 字体似乎缺少匕首字符 TL;DR这是什么意思？

问题描述

我在 10 月份使用 LibreOffice 在我的计算机上安装了 Noto Serif 字体。

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');

body {
  font-family: "Noto Serif",sans-serif;
  font-size: 50px;
}

<p>† foo</p>

<p>‡ bar</p>

如果我删除导入行，浏览器将使用字体的本地版本，两个匕首看起来都是正确的。（右图。）

但是，如果我不删除导入行，因此浏览器将使用字体的网络版本，第二个匕首似乎在字体中丢失，因此自动替换为 sans-serif 字体。（左图。）

谷歌自己“说”这两种匕首都包含在字体的网络版本中：

https://fonts.google.com/specimen/Noto+Serif?query=noto+serif&preview.text_type=custom&preview.text=test%20%E2%80%A0%20%E2%80%A1

为什么会这样？

解决方法

解决方案

要解决此符号的问题，您可以使用 Google Font API text query parameter，它只会为提供的符号/字符返回字形：

在这些情况下，您应该考虑在字体请求 URL 中指定 text= 值。这允许 Google Fonts 返回针对您的请求进行优化的字体文件。

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto%20Serif&text=‡');


body {
  font-family: "Noto Serif",sans-serif;
  font-size: 50px;
}

<p>test † ‡</p>

TL;DR

字体只是与 Unicode 符号匹配的字形集合。 Google Fonts 试图为每个特定案例提供优化的字形包。例如，Noto Serif 的默认 URL 将返回所有主要子集的 CSS 代码，例如：latin、latin-ext、西里尔文等。点击下面的链接查看子集的完整列表

https://fonts.googleapis.com/css2?family=Noto%20Serif

Google Fonts API 支持 subset query parameter，因此您可以灵活地为您配置所需的 subset，并且不会加载过多的内容。

‡ Double Dagger 有 U+2021 Unicode 编号，它是 General Punctuation Unicode subset 的一部分，使用范围在 2000-206F 之间。 Google Font 在latin 子集中包含此范围：

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notoserif/v9/ga6Iaw1J5X9T9RW6j9bNfFcWaDq8fMU.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

这是什么意思？

这意味着您所做的一切都正确，因为所有必需的子集都正确请求，但不知何故获取的字体不包含 U+2021 符号的字形。它看起来像是 Google Font 方面的一个错误。作为临时解决方案，您可以使用建议的解决方法，但我认为应该向 Google Font 报告。

相关问题

我正在尝试了解您的问题，我认为 @Riskbreaker 的答案是修补您的问题的好主意。

如果你需要得到这个字符：

您需要使用以下命令设置字体系列：

font-family: 'Noto Serif',serif;

解释无衬线定义：任何字母没有衬线的字体（=小线）

所以你的“问题”只是所有浏览器的默认配置。

我已经在我的 codepen 上尝试了一些测试，如您所见，您可以使用 Google 字体中的推荐行来修补您的问题：

font-family: 'Noto Serif',serif;

对你来说不是一个好的解决方案，但这个技巧可以解释你的问题。实际上，字体“Noto Serif”默认不存在字符“‡”，因此，如果您应用第二个属性“serif”，则不会发生任何变化，因为它是默认样式。但是，如果您添加“sans-serif”属性，浏览器可以解释此值并将字符设置为“sans-serif”值。

但是，由于很少有时间，谷歌添加了第二个链接以使用 CDN ：

<link rel="preconnect" href="https://fonts.gstatic.com">

这个链接对你没有任何改变，但我建议用它来更新。

我的第二个建议是不要在本地安装字体或禁用它，因为这样会更容易调试您的问题，而且安装的本地字体可能会产生一些错误或冲突。

您还可以在此链接中查看 serif 和 sans-serif 之间的区别：https://about.easil.com/support/serif-vs-sans-serif/

希望我的回答对您有所帮助，您可以在此链接上查看我的 codepen 测试： https://codepen.io/ZellRDesign/pen/eYBvxPV

fonts fonts typography