仅从指定字体渲染字形答案

【问题标题】：Render glyphs only from specified font仅从指定字体渲染字形
【发布时间】：2016-08-10 03:46:39
【问题描述】：

我有这个 HTML

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

&#32768; 是一个 CJK 表意文字，我的 Arial 字体不包含它的字形。但是 Chrome 会渲染它。

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

Arial — 1 glyph
Droid Sans Japanese — 1 glyph

Chrome 使用 Droid 作为象形文字。

我需要的是这个：

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

返回Arial。

【问题讨论】：

我已经重新格式化了你的问题。我希望我没有搞砸任何事情。干杯！
如果字体不包含要渲染的字形，它将自动落在 CSS 中设置的元素 font-family 中设置的下一个字体上，然后落在 os 上。然后，您可以将所需字体设置为 font-family 声明的第二个字体，或者创建一种字体，如果您根本不希望它呈现该字形，则该字体将其视为空（但是为什么将其包含在您的标记中呢？ )。但是，我不确定如何获取每个字符的保留字体...
土豆皮，凯伊多，谢谢！

【解决方案1】：

您可以将Adobe Blank 放在您要查看的字体之后的字体系列中，然后不会呈现任何不在该字体中的字形。

例如：

font-family: Arial, 'Adobe Blank';

如果您想在 JS 中对其进行测试，您可以使用包括 Adobe Blank 在内的字体系列渲染单个字形并测量它们的宽度以查看它是否为零，但是您必须遍历每个字形和您想要的每种字体测试。

据我所知，没有 JS 方法可以判断元素字体堆栈中的哪种字体正在呈现哪些字形（即堆栈中的字体不止一种。例如“Arial”、“Segoe UI Symbol”） “Adobe 空白”）。不过我很想被证明是错误的。

如果您正在寻找的只是一种查看特定字体的字形的方法：

【讨论】：