首次使用HTML5搭建的网站移动端字体不匹配如何修复

• 第一步：添加移动端视口配置
  移动端浏览器默认会对PC端页面做缩放适配，容易导致字体渲染变形，你需要在HTML的<head>标签内添加如下元标签：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  该配置会让页面宽度匹配设备屏幕宽度，禁止默认缩放，保证基础渲染逻辑一致。
• 第二步：显式声明全局字体规则
  不同设备的默认系统字体差异极大，如果你没有指定字体，PC和移动端显示效果会完全不符合预期。你可以在<head>标签内添加<style>标签，配置全局字体栈：

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  

  这个字体栈会优先调用各系统原生的标准无衬线字体，跨设备显示的一致性最高。如果你想使用特定字体，需要确认该字体是所有目标设备都预装的通用字体，否则浏览器找不到字体时会自动回退到默认字体，依然会出现显示异常。
• 第三步：统一字体单位配置
  如果你在HTML里用内联样式设置了固定px单位的字体大小，移动端高DPI屏幕下容易出现字体过大/过小、被浏览器强制放大的问题。建议优先使用相对单位，你可以先给根元素设置基准字号：

  html {
    font-size: 16px;
  }
  

  后续其他元素的字体大小用rem做单位，比如正文设置为font-size: 1rem，标题设置为font-size: 1.5rem，适配性会更好。
• 第四步：校验HTML语法
  检查你的HTML代码是否存在标签未闭合、属性拼写错误、style标签位置错误等问题，语法错误会导致浏览器进入怪异渲染模式，出现字体、布局错乱的问题。

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