Mac端Chrome v102访问网站文本乱码（已配置UTF-8）求助

两个浏览器渲染表现不一致，且你已经确认文件保存为UTF-8、添加了meta编码声明的前提下，按以下优先级排查：

• 检查<meta charset="UTF-8">的放置位置
  Chrome要求编码声明必须出现在页面前1024字节内，且要放在<head>标签的最开头，优先级高于<title>、样式标签、内联脚本、注释等所有其他head内内容。如果声明位置靠后，Chrome会在解析到编码规则前就用默认编码完成首次渲染，后续不会重新解析已加载的文本，直接导致乱码。正确的head开头写法参考：

  <head>
    <meta charset="UTF-8">
    <!-- 后续再放置title、其他meta、样式、脚本等内容 -->
    <title>站点标题</title>
  </head>
  

• 校验服务器返回的HTTP响应头编码配置
  浏览器会优先采信HTTP响应头里的编码声明，直接忽略页面内的meta标签，这是Safari和Chrome表现不一致的最常见原因：Safari部分版本会用页面meta编码覆盖HTTP头的错误配置，Chrome严格遵循HTTP头优先级。
  排查方法：打开Chrome开发者工具，切换到Network面板，刷新页面后选中主文档请求，查看Response Headers里的Content-Type字段，确认值为text/html; charset=UTF-8。如果显示其他编码，对应修改服务端配置即可：
  • Apache服务：在站点根目录.htaccess文件中添加AddDefaultCharset UTF-8
  • Nginx服务：在对应站点的server配置块中添加charset utf-8;
  • 静态托管平台：在平台控制台的响应头配置项中，将Content-Type的charset参数修改为UTF-8
• 确认文件实际编码符合预期
  不要完全信任编辑器的保存选项，打开Mac自带终端，进入站点文件目录执行file -I index.html（把index.html替换为你要检查的文件名），查看输出结果里的charset值是否为utf-8。如果输出为iso-8859-1、utf-16等其他编码，说明文件实际保存格式有误，用VS Code等编辑器打开文件后，点击右下角的编码标识，选择「以UTF-8编码保存」覆盖原文件即可。
• 排查自定义字体异常问题
  如果站点全局使用了第三方web字体，打开开发者工具Console面板查看是否有字体加载失败、字体文件损坏的报错。部分损坏的字体文件在Chrome下无法正常渲染会显示为乱码/方块，Safari则会自动降级到系统字体显示。临时注释掉全局自定义字体样式后刷新页面，如果文本恢复正常，重新导出字体文件、修正字体加载路径即可。
• 验证Chrome本地编码配置
  你当前使用的102.0.5005.61版本Chrome存在少量自动编码检测误判的已知问题，可以在页面右键选择「更多工具-编码」，手动选择UTF-8，如果此时乱码消失，说明是浏览器自动检测误判，修复完前面提到的HTTP头、meta位置问题后，浏览器自动检测就可以正确识别编码，不需要手动修改本地设置。

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