两阶段字体优化加载时Roboto常规文本显示为斜体问题咨询

• 你通过FontFace接口注册字体时，未为常规、斜体字体显式指定font-style、font-weight描述符，触发了浏览器同字体族的匹配覆盖逻辑：
  浏览器创建FontFace实例时，未显式传入的字体描述符会使用默认值：font-weight: 400、font-style: normal。你注册的italic字体实例没有指定style: italic，会被识别为「Roboto 400 normal」字体，和你提前注册的、以及后续注册的常规Roboto字体优先级完全一致，后注册的italic字体会覆盖前者，导致所有常规字重、普通样式的文本都调用了斜体的字体文件，显示为斜体。
• 粗体字体注册时显式指定了weight: 700，和<strong>标签默认的700字重匹配，没有被覆盖，因此显示正常。
• 额外注意：代码中存在部分中文全角引号“，会导致资源路径解析失败，需要替换为半角引号"。

修改JS部分的字体注册逻辑，为每个字体显式指定对应的描述符即可：

if("fonts" in document) {
  // 常规字体：400字重 普通样式
  let regular = new FontFace("Roboto", "url(./Roboto-Regular.woff2) format('woff2')", { 
    weight: 400, 
    style: 'normal' 
  })
  // 粗体：700字重 普通样式
  let bold = new FontFace("Roboto", "url(./Roboto-Bold.woff2) format('woff2')", { 
    weight: 700, 
    style: 'normal' 
  })      
  // 斜体：400字重 斜体样式
  let italic = new FontFace("Roboto", "url(./Roboto-Italic.woff2) format('woff2')", { 
    weight: 400, 
    style: 'italic' 
  })     
  Promise.all([regular.load(), bold.load(), italic.load()]).then(fonts => {
    fonts.forEach(font =>{
     document.fonts.add(font)
    })
  }) 
}

内容的提问来源于stack exchange，提问作者jjwright