UTF-8编码静态HTML页面在iOS系统无法渲染西班牙语特殊字符

问题概述 #

静态html页面采用UTF-8编码，使用Roboto、Segoe UI等iOS支持字体，但仅在iOS系统上无法渲染西班牙语重音及特殊字符，Windows系统显示正常。已尝试通过JS动态添加UTF-8 meta标签、切换iso-8859-15编码，均未解决问题。

问题截图：

解决方法 #

• 静态添加UTF-8 meta标签，取代JS动态注入
  iOS的WebKit内核可能在JS执行前就开始解析页面编码，动态添加的meta标签生效时机太晚。直接把<meta charset="UTF-8">放在<head>的最顶部，确保是头部第一个标签：

  <head>
    <meta charset="UTF-8">
    <!-- 其他meta、link标签 -->
  </head>
  

• 检查HTML文件的实际保存编码
  即使设置了meta标签，如果文件本身不是以UTF-8无BOM格式保存，iOS仍会识别错误。用VS Code等编辑器打开文件，确认右下角显示的编码为UTF-8，若不是则切换为UTF-8无BOM格式保存。

• 确认字体对特殊字符的支持
  部分iOS版本的Roboto、Segoe UI字体子集可能缺失西班牙语重音字符，试试以下调整：
  在CSS中明确添加兼容字体作为降级选项：

  body {
    font-family: 'Roboto', 'Segoe UI', "Helvetica Neue", Arial, sans-serif;
    font-display: swap;
  }
  

  font-display: swap能确保字体加载前先显示系统默认兼容字体，避免字符丢失。

• 统一编码配置，避免冲突
  不要同时混用UTF-8和iso-8859-15编码。如果有服务器配置权限，确保HTTP响应头的Content-Type设置为text/html; charset=utf-8，和页面meta标签保持一致。

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