W3C CSS校验器对@font-face的unicode-range属性报错如何处理

• 首先明确问题本质：多范围并列的unicode-range写法是CSS Fonts Level 3及更高版本标准的合法语法，本次报错是W3C CSS校验器近期规则更新引入的bug，并非代码写法错误。包括Google Fonts在内的大量公开服务的@font-face代码均采用该写法，且所有主流浏览器均完全兼容，不影响实际线上运行效果。
• 方案1：无需修改代码，忽略校验报错
  如果你不需要强制通过CSS校验，可直接忽略该错误。该写法不会导致任何浏览器兼容性问题，也不会影响unicode-range控制字体下载、节省带宽的效果，等待W3C校验器后续修复规则即可。
• 方案2：添加校验忽略标记，临时跳过该规则校验
  可在对应@font-face代码块前后添加W3C校验器的忽略注释，即可通过校验：

  /* validator ignore */
  @font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url("fonts/XRXV3I6Li01BKofIOuaBXso.woff2") format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
    font-display: fallback;
  }
  /* validator end ignore */
  

  部分版本的校验器支持更精准的忽略规则：/* w3cvalidator:ignore=Too many values or values are not recognized */
• 方案3：拆分@font-face规则，完全适配当前校验规则
  如果需要100%符合当前校验器的规则要求，可将每个unicode范围拆分为独立的@font-face块，其余属性完全保持一致即可。拆分后浏览器仍会将其识别为同一款字体的不同字符范围，功能效果和原写法完全一致。
  示例拆分写法：

  /* vietnamese - 范围1 */
  @font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url("fonts/XRXV3I6Li01BKofIOuaBXso.woff2") format('woff2');
    unicode-range: U+0102-0103;
    font-display: fallback;
  }
  /* vietnamese - 范围2 */
  @font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url("fonts/XRXV3I6Li01BKofIOuaBXso.woff2") format('woff2');
    unicode-range: U+0110-0111;
    font-display: fallback;
  }
  /* 其余范围以此类推拆分即可 */
  

内容的提问来源于stack exchange，提问作者João Pimentel Ferreira