HTML Unicode 以不同的字体显示

Question

我正在使用 unicode 在 HTML 中为国际象棋应用显示棋子♟，即 ♟ = ♟

<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>

但是它们在某些设备上显示的并不相同，我不确定如何修复它。这是它的样子与它应该的样子： vs

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，在现代浏览器的所有设备上保持一致。

Answer 1

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

如果您希望设备以相同的字体显示，即使它们没有安装在他们的系统上，您需要通过在 [=20] 中指定 @font-face 规则将其提供给他们的浏览器进行下载=]，然后指定 src 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.

中加载并引用它

HTML Unicode 以不同的字体显示

HTML Unicode displaying in different font

html

css

browser

unicode

fonts