如何在JavaScript中获取渲染的字体? [英] How to get the rendered font in JavaScript?

问题描述

Google Chrome浏览器在DevTools中显示渲染的字体.

Google Chrome displays the rendered font in the DevTools.

例如，给定:

font-family: Montserrat, Helvetica, sans-serif;

并且Montserrat字体丢失/被禁用，Chrome告诉我们正在渲染Helvetica:

and the Montserrat font is missing/disabled, Chrome tells us that Helvetica is being rendered:

有没有办法在JavaScript中获取渲染的字体? (即使它仅适用于Chrome浏览器)

Is there a way to get the rendered font in JavaScript? (even if it just works in Chrome)

注释:

1. 此解决方案建议使用getComputedStyle(...).fontFamily，但它会返回CSS声明"Montserrat, Helvetica, sans-serif"，而不是实际呈现的字体.
2. 此解决方案使用puppeteer，但我无法弄清楚如何仅在DevTools中实现相同的功能(没有puppeteer ).

1. This solution suggests getComputedStyle(...).fontFamily, but it returns the CSS declaration "Montserrat, Helvetica, sans-serif", not the actual rendered font.
2. This solution uses puppeteer, but I couldn't figure out how to achieve the same purely in DevTools (without puppeteer).

推荐答案

仍然无法从Web-API访问此信息.

It is still not possible to access this information from Web-APIs.

Houdini小组正在进行有关是否包含 font-metrics API ，它应该包含类似的内容，但它甚至还没有被建议作为规范草案，这将给您带来很多负担.

There is an ongoing discussion in the Houdini group about including a font-metrics API, that is supposed to include something like that, but it's still not even proposed as a spec draft and there will be a lot of burden on the road.

正在使用什么字体?这很复杂，因为每个段落，每行，每个单词甚至每个字形都可以使用多种字体.字体应以带有完整字体信息的句柄形式(对于Web字体)和原始字体数据的句柄形式公开.达巴龙eae将拥有这个领域并提出一个API.

What font(s) are being used? This is complicated because multiple fonts can be used per paragraph, per line, per word, and even per glyph. The fonts should be exposed in the form of handles with complete font information, and (for web fonts) a handle to the raw font data. dbaron & eae are going to own this area and propose an API.

实际上，一个字形̂(U + 0302)可以有一种字体，而字形a(U + 0061)可以有另一种字体，这会使组合的字形â实际上使用两种不同的字体字体.

Indeed, one could have one font for the glyph ̂ (U+0302), and another one for the glyph a (U+0061) which would make the combined glyph â would actually use two different fonts.

当前的讨论似乎指向document.measureElement和document.measureText方法获得的nofollow noreferrer>字体界面.此接口将公开两个属性:DOMString name和数字glyphsRendered. 但是，这些仍然是讨论中的一个，尚未提出作为草案，仍然有很多讨论，我不会屏住呼吸等待它很快在任何地方实现.

Current discussions seem to point to a Font interface available from document.measureElement and document.measureText methods. This interface would expose two properties: a DOMString name, and a number glyphsRendered. However, once again these are still discussion and still not yet proposed as drafts, a lot of discussion is still to be made and I wouldn't hold my breath waiting for it to be implemented anywhere any time soon.

现在，有一些黑客，例如

Now, there are hacks, like numerous other Q/A already told _{^{don't stick to the accepted answer there}}, implying looking at the size of the rendering for the simplest, and looking at the rendered pixels for the more advanced ones, but being hacks, they won't work in every cases.
For instance, I could have a custom font on my system that would render only some characters borrowed from a well-known font, no such hack would be able to tell if the browser did fallback to that font or the actual well-known one.

唯一可以确定的方法就是保留控件并使用网络字体.

The only way to know for sure is to keep the control and use web-fonts.

这篇关于如何在JavaScript中获取渲染的字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！