谷歌字体特殊字符在 PC 上正确显示但在 HTML 中不正确？答案

【问题标题】：Google font special character displayed correctly on PC but not in HTML?谷歌字体特殊字符在 PC 上正确显示但在 HTML 中不正确？
【发布时间】：2018-06-02 11:08:30
【问题描述】：

我使用的是 Google 字体“Kameron”。我是从fonts.google.com下载的

它可以在 Photoshop 中以及在浏览器中查看的 .PDF 文件中正确显示特殊字符，例如“š”。所以，字体显然支持这些字符并且浏览器能够呈现它们。

但是，当在 HTML 网页中使用并在浏览器（Firefox、Chrome、Edge）中查看时，它不会显示特殊字符，而是将字符替换为默认的“衬线”字体。

我在本地运行网站。我使用 Google 的标准 <link> 嵌入包含了字体。我也尝试过下载它，将其转换为网络字体，在本地托管并在 CSS 中使用 @font-face 导入它，但这并没有帮助。

我已尝试搜索，但找不到与此特定情况相关的任何内容。很抱歉，如果答案很明显或其他什么，但我没有看到。你能帮忙吗？

h2, p { font-family: 'Kameron', serif;}

<link href="https://fonts.googleapis.com/css?family=Kameron:400,700|Open+Sans:400,600" rel="stylesheet">
 
 <h2>Tešting</h2>

【问题讨论】：

你试过设置html编码为utf-8吗？
是的，它的集合：<meta charset="utf-8">
TTF 文件不包含š 字形。 i.stack.imgur.com/kwT8i.png 不知道 Photoshop 是如何显示的；也许它选择了一种比浏览器选择的字体更类似于 Kameron 的字体？
@MrLister 不，请参阅：https://i.imgur.com/r5L9vwu.jpg

标签： html css fonts google-font-api google-fonts

【解决方案1】：

由于 TTF 文件不包含 š 字形，您可以使用 NFD 形式，组合字形 s 和 ̌，或 š。
我的猜测是 Photoshop 就是这样做的。
要查看 NFC 和 NFD 表单之间的区别，请参见此处：

   div {font:72px 'Kameron';}

 <link href="https://fonts.googleapis.com/css?family=Kameron:400,700|Open+Sans:400,600" rel="stylesheet">
   
<div>NFC: smje&#x0161;ten</div>
<div>NFD: smje&#x0073;&#x030C;ten</div>

免责声明：在所有浏览器中都无法正常工作。这就是我想要的：

【讨论】：

有趣且不错的尝试，但是，它在大多数浏览器中似乎都不能很好地工作。
我与Cinzel Decorative 有类似的问题，您的选项看起来不太好，但在preview on Google Fonts 中效果很好。
好吧，也许字体没有字符，有些软件可以组合不同的字形来获得一个。但我对无穷大符号∞ 有疑问。 “Noto Serif”字体显然确实有它，因为 Google 字体预览可以正确显示该符号（尽管字体系列在 CSS 中设置为 Noto Serif script=latin rev=2）。但是，如果我将字符添加到简单的 HTML 中并在浏览器中打开它（在 Linux 上尝试了 Chrome 和 Firefox，在远程服务器上的页面），浏览器会选择本地替代字体（默认为 DejaVu Serif，或者说， Arial，如果我在 CSS 中将其设置为后备）。
我也下载了“Noto Serif”字体，在gucharmap打开，字符显示正常，字形应该有。