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

Question

有没有办法确定字体样式何时实际渲染？

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

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

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

Answer 1

不幸的是，没有直接的方法（例如通过 CSS Font Loading API）来获取实际渲染的font-family.

解决方法

1. 通过检查应用的字体系列getComputedStyle(el).fontFamily
2. 检查字体是否通过加载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<familyArr.length && !fontApplied; i++){
      let currentFamily = familyArr[i];
      fontApplied = document.fonts.check(`12px ${currentFamily}`);
      if(fontApplied){
        //font is loaded - return family name
        renderedFont = currentFamily;
      }
    }
    usedFonts.push({ type:nodeType, font: renderedFont});
  })
  info.innerText = JSON.stringify(usedFonts)
  return usedFonts;
}


let fontUrl =  "https://fonts.gstatic.com/s/montserrat/v24/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2";
let fontFamily = "Montserrat";
let fontOptions = {
  weight: 400,
  style: "normal"
};

let webfont = '';
async function loadFonts() {
  const font = new FontFace(fontFamily, `url(${fontUrl})`);
  font.weight = fontOptions.weight ? fontOptions.weight : 400;
  font.style = fontOptions.style ? fontOptions.style : "normal";
  // wait for font to be loaded
  await font.load();
  webfont = font;
  document.fonts.add(font);
  checkAppliedFont(textEls);
}

function unloadFonts(font) {
  document.fonts.delete(font);
  checkAppliedFont(textEls);
}

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

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

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

<button onclick="loadFonts()" type="button">Load font</button>
<button onclick="unloadFonts(webfont)" type="button">Delete font</button>
<h1>Should be Monserrat 1234</h1>
<p>Paragraph text.</p>
<pre>Pre text.</pre>
<p class="info"></p>

上面的示例将循环遍历 css 规则中指定的所有字体系列（通过 检索getComputedStyle()）。
例如，font-family:"Montserrat", monospace, sans-serif
不可用的字体将被跳过。第一个可用的字体可能是渲染的字体。

根据您的操作系统或浏览器，此解决方法可能无法获取实际应用/渲染的字体。