仅从指定字体渲染字形

Question

我有以下这段HTML代码

<div style="font-family: Arial">&#32768;!</div>

耀是一个CJK汉字，并且我的Arial字体中不包含该字形，但是Chrome可以渲染它。

当我查看Web Inspector > Computed styles > Rendered Fonts时，我看到：

Arial — 1 glyph
Droid Sans Japanese — 1 glyph

Chrome使用Droid字体来显示表意文字。

我需要的是：

1. 如果指定的字体不包含该字形，则不要呈现该符号，或者
2. 让JavaScript获取渲染后的字体（而不是我设置的未使用的字体）。

document.defaultView.getComputedStyle(document.getElementById("my-div"), null).fontFamily;

返回 Arial。

- vasa_c

---

我稍微重新格式化了你的问题。希望我没有搞砸什么。干杯！ - potatopeelings

如果字体不包含要呈现的字形，则会自动落在CSS中设置的元素font-family中的下一个字体集上，然后落在操作系统上。然后，您可以将所需的字体设置为font-family声明的第二个字体，或者创建一个字体，如果您不想呈现此字形，则将其视为空白（但是为什么要在标记中包含它？）。但是，我不确定如何获取每个字符的保留字体... - Kaiido

土豆皮，Kaiido，谢谢！ - vasa_c

Answer 1

在您想要查看的字体后面，可以将Adobe Blank放入font-family中，然后该字体中没有的任何字形都不会被渲染。

e.g.:

font-family: Arial, 'Adobe Blank';

如果您想在JS中进行测试，可以使用包括Adobe Blank的字体系列渲染单个字形，并测量它们的宽度，以查看是否为零，但您必须遍历每个要测试的字形和字体。据我所知，没有JS方法可以告诉您哪些字形由元素的字体堆栈中的哪个字体呈现（即堆栈中的多个字体，例如“Arial”，“Segoe UI Symbol”，“Adobe Blank”）。虽然我很希望被证明是错误的。

---

如果您只是想查看特定字体中的字形，可以使用以下方法：

• 在Windows系统上，您可以使用BabelMap来检查安装在该系统上的字体
• 在线上，您可以上传字体到Opentype的字形检查器进行检查

- Sam Hasler