页面使用Google Font出现W3C验证报错该如何修复？

核心报错原因 #

90%以上的Google Font相关W3C红色报错，都来自引入链接的特殊字符未转义问题，剩下的小部分是属性写法、标签位置不符合HTML规范导致。

逐点修复方案 #

• 转义链接内的&符号
  直接从字体平台复制的引入代码，参数之间用&做连接符，但HTML规范要求，HTML文档内的&必须转义为实体字符&，否则会被解析器判定为语法错误。

  错误写法示例（直接复制的未转义版本）：

  <link href="字体服务地址/css2?family=Noto+Sans+SC:wght@300;400;500&family=Roboto&display=swap" rel="stylesheet">
  

  修复后的正确写法：

  <link href="字体服务地址/css2?family=Noto+Sans+SC:wght@300;400;500&amp;family=Roboto&amp;display=swap" rel="stylesheet">
  

  注意：如果你是在独立CSS文件中用@import语法引入字体，不需要做这个转义，直接写原生&即可，该转义规则仅对HTML文档内的标签生效。

• 规范crossorigin属性写法
  预连接字体资源域名的link标签，crossorigin属性不要写自定义错误值，标准写法为直接加属性名即可，也可以显式写crossorigin="anonymous"，两种写法都符合规范，错误赋值会触发跨域属性相关的校验报错。

  <!-- 正确写法1 -->
  <link rel="preconnect" href="字体静态资源域名" crossorigin>
  <!-- 正确写法2 -->
  <link rel="preconnect" href="字体静态资源域名" crossorigin="anonymous">
  

• 确认标签位置正确
  所有和字体引入相关的<link>标签，必须放在HTML文档的<head>标签内部，不能放在<body>区域，也不能出现标签未闭合、嵌套错误的问题，否则会触发HTML结构类校验错误。

校验验证 #

所有修改完成后重新运行W3C校验，和Google Font相关的红色报错会全部清除。如果还有剩余报错，和字体引入逻辑无关，按照校验提示给出的行号定位对应代码，逐行修复结构问题即可。

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