关于font-face声明中!important对font-display属性的作用及多文件优先级的疑问

嘿，我来一步步帮你理清这些问题，毕竟做前端这么久，我也踩过不少CSS优先级和字体加载的坑😂

• 能不能给font-display加!important？
  答案是肯定的！CSS字体模块的最新规范允许把!important标记用在@font-face的描述符上，目前Chrome、Firefox、Edge这些主流浏览器都完美支持这个用法，所以你这么写语法上完全合法，不会出现浏览器不识别的情况。

• 加了!important到底有没有实际作用？
  这得分场景看：如果你的页面里只有这一个针对目标字体的@font-face声明，那加不加!important其实没区别，浏览器都会乖乖用这个font-display的值。但如果页面里存在多个针对同一个字体族的@font-face声明（比如主题自带的默认声明和你自己新增的），这时候!important就会发挥作用——它会强制让带标记的这个font-display生效，直接忽略其他不带!important的同属性声明。

• 多CSS文件下，带!important的声明和加载顺序谁优先级更高？
  这里的核心规则是：!important的优先级远高于普通声明，跟文件加载顺序无关。哪怕不带!important的声明在最后加载的文件里，只要你的声明带了!important，浏览器就会优先采用你的font-display值。
  举个实际例子：主题的CSS文件里写了

  @font-face {
    font-family: 'MyCustomFont';
    font-display: fallback;
    /* 其他字体属性 */
  }
  

  你自己新增的CSS文件里写了

  @font-face {
    font-family: 'MyCustomFont';
    font-display: swap !important;
    /* 其他字体属性 */
  }
  

  不管你的文件是在主题文件之前还是之后加载，浏览器都会用swap这个font-display值。
  唯一的例外是：如果有多个带!important的@font-face声明针对同一个字体族，这时候才会看加载顺序，最后加载的那个带!important的声明会生效。

内容来源于stack exchange