有没有办法确定何时实际渲染字体系列

【问题标题】：有没有办法确定何时实际渲染字体系列(Is there a way to determine when font family being actually rendered)
【发布时间】：2022-07-11 03:33:55
【问题描述】：

有没有办法确定字体样式何时实际呈现？ Is there a way to determine when font family being actually rendered

在早期阶段（在创建 DOM 之后）有断点表明该段落的字体系列值是通过 @font-face css 添加的字体“Montserrat-Bold”，但实际呈现的显示显示为默认字体.

Is there a way to determine when font family being actually rendered

这里，一段时间后的断点表明段落元素的样式实际上是预期的（使用字体系列）。

我假设浏览器有一个实际呈现（或应用）字体样式的过程。有没有办法知道或检测何时发生这种情况？

这能回答你的问题吗？ How to be notified once a web font has loaded
@Dorad 遗憾的是没有:( document.fonts 方式可以让我们知道正在加载字体，但我的问题是关于它何时实际被“使用”（“渲染”，“应用”）

【解决方案1】：

不幸的是，没有直接的方法（例如通过 CSS 字体加载 API）来获取实际呈现的 font-family 。

解决方法

通过 getComputedStyle(el).fontFamily 检查应用的字体系列
检查字体是否通过 FontFaceSet.check() 加载

示例：

let info = document.querySelector('.info');
let textEls = document.querySelectorAll('h1, p, pre');
// check fonts - Monserrat is not yet available
let usedFonts = checkAppliedFont(textEls);

function checkAppliedFont(textEls){
  let usedFonts = [];
  textEls.forEach(function(el,i){
    let nodeType = el.nodeName.toLowerCase();
    let fontFamily = getComputedStyle(el).fontFamily;
    let familyArr = fontFamily.split(',');
    let fontApplied = false;
    let renderedFont = '';
    for(let i=0; i


      h1{
  font-family:"Montserrat", Georgia;
  font-weight:400;
}

p{
  font-family:"Montserrat", Arial
}

pre{
  font-family:"Montserrat", monospace, sans-serif;
  background:#eee;
}
      

Should be Monserrat 1234
Paragraph text.
Pre text.


    
     上面的例子将遍历所有在 css 规则中指定的字体系列（通过
     
      getComputedStyle()
     
     检索）。
     

     例如
     
      font-family:"Montserrat", monospace, sans-serif
     
     

     将跳过不可用的字体。
第一个可用字体是
     
      可能
     
     呈现的字体。
    
    
     根据您的操作系统或浏览器，此解决方法可能无法获得实际应用/渲染的字体。

分享于2022年07月17日 css fonts html javascript 问答

解决方法

示例：

Should be Monserrat 1234