以不同字体显示的 HTML Unicode答案

【问题标题】：HTML Unicode displaying in different font以不同字体显示的 HTML Unicode
【发布时间】：2021-06-12 19:51:35
【问题描述】：

我正在使用 unicode 显示国际象棋应用程序的 HTML 中的棋子 ♟，即 &#9823; = ♟

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles/style.css">
</head>
<body>
  <p class="pawn">&#9823;</p>
</body>

但是，它们在某些设备上的显示不一样，我不知道如何修复它。这是它的样子和它应该是什么样子：与

wikipedia 建议这是基于所使用的字体，但我在 CSS 中更改它没有任何成功

@font-face {
  font-family: "Dejavu Sans";
  src: local("Dejavu Sans");
  unicode-range: U+26;
}

.pawn {
  font-family: "Dejavu Sans";
}

整个@font-face/unicode-range 位是因为我能找到的唯一其他答案说我需要使用它，但我不确定如何使用。

总而言之：我需要让我的网站以特定字体显示 unicode，在现代浏览器的所有设备上保持一致。

【问题讨论】：

这不是解决方案，而是你的棋子看起来不同的原因。您在 Windows 上，字体 Segoe UI Symbol 具有您所获得的样式。由于某种原因，该字体未应用。您能否检查您的网络选项卡以确保正确加载了 Dejavu Sans 字体？
stackoverflow.com/questions/66623400/…
@Keimeno 我的网络选项卡的字体部分没有显示任何内容，不知道为什么。我还需要在 CSS 中添加什么来使其加载吗？
如果你想指定一个精确的可视化，你必须指定字体（一个网络字体，用户可能没有你命名的字体），所以一个URL。注意：用户可能更喜欢自己的系统映像（因为它与所有应用程序/网页一致）。
您应该使用url 和带有webfonts 的URL 而不是local。您可能需要寻找 Google 字体或其他网络字体提供商（和托管）

标签： html css browser unicode fonts

【解决方案1】：

当设备在本地安装了不同的默认字体时，它们会以不同的方式显示 unicode。 (Cr: Keimeno)

如果您希望设备即使没有安装在系统上也能以相同的字体显示，您需要通过在 CSS 中指定 @font-face 规则，然后指定 @ 987654323@ 存储字体的 URL。 (Cr: Glacomo Catenazzi)

@font-face {
  font-family: "Dejavu Sans";
  src: url(dejavu-sans/DejaVuSans.ttf);
}

.pawn{
  font-family: "Dejavu Sans";
}

这解决了我的问题。我下载了 DejaVu Sans 字体，将其存储在我保存 CSS 文件的文件夹中，然后在 CSS 中加载并引用它。

【讨论】：