为何Google Chrome中HTML文档字体大小显示不一致？

问题根源 #

1. HTML结构违规：<h2>标签内嵌套<h1>标签违反了HTML语义规范，浏览器自动修正该错误时会导致字体渲染异常。
2. 浏览器默认样式差异：不同HTML元素（如<p>、<ol>、<li>、标题标签）自带不同的默认字体大小，未统一设置时必然出现大小不均。
3. CSS属性干扰：<p>的display: inline-block打乱了文本流排版；.float的过度transform偏移可能间接压缩文本显示空间。

解决步骤 #

1. 修复HTML结构错误

拆分嵌套的标题标签，保证语义合规：

<td class="boxofwel">
  <h2>Hello you welcome to</h2>
  <h1 class="wel">Eddy's Programming verse</h1>
</td>

2. 统一基础字体样式

在body中设置基准字体，让所有元素继承该值，再按需调整相对大小：

body {
  background-image: url(white.jpg);
  background-size: cover;
  color: black;
  font-weight: bold;
  /* 基准字体大小，可按需调整 */
  font-size: 16px;
  /* 统一字体族，增强跨浏览器一致性 */
  font-family: Arial, sans-serif;
}

/* 统一标题尺寸 */
h1 {
  font-size: 2.5em;
  margin: 0.5em 0;
}

h2 {
  font-size: 1.8em;
  text-align: left;
  margin: 0.5em 0;
}

/* 统一段落和列表字体 */
p, ol, li {
  font-size: 1.1em;
  line-height: 1.6; /* 提升可读性 */
}

3. 调整干扰布局的CSS属性

• 恢复<p>的正常块级显示：

p {
  /* 移除inline-block，恢复文本流 */
  position: relative;
  z-index: 3;
  margin: 1em 0; /* 添加间距优化排版 */
}

• 优化.float的偏移值，避免文本过度压缩：

.float {
  transform: translateY(-20%) translateX(10%);
  display: block;
}

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- 修复viewport标签写法，分开定义更规范 -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>programming tutorials Website</title>
  <style type="text/css">
    body {
      background-image: url(white.jpg);
      background-size: cover;
      color: black;
      font-weight: bold;
      font-size: 16px;
      font-family: Arial, sans-serif;
    }
    
    p {
      position: relative;
      z-index: 3;
      margin: 1em 0;
    }
    
    h1 {
      font-size: 2.5em;
      margin: 0.5em 0;
    }
    
    h2 {
      font-size: 1.8em;
      text-align: left;
      margin: 0.5em 0;
    }
    
    .hello {
      width: 110%;
      height: 100%;
    }
    
    .wel {
      color: purple;
    }
    
    table {
      margin-bottom: 10%;
    }
    
    ol {
      text-transform: uppercase;
      font-size: 1.1em;
      line-height: 1.6;
    }
    
    .float {
      transform: translateY(-20%) translateX(10%);
      display: block;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td class="boxofwel">
        <h2>Hello you welcome to</h2>
        <h1 class="wel">Eddy's Programming verse</h1>
      </td>
      <td class="smile"><img src="hello.jpg" class="hello"></td>
    </tr>
  </table>

  <p>
    Mostly i will be offering tutorials on web development which include programming languages like
    <ol>
      <li><b>HTML</b></li>
      <li><b>CSS</b></li>
      <li><b>javascript</b></li>
      <li><b>PHP</b></li>
    </ol>
  </p>

  <p>
    <img src="you.jpg" class="you">
    <div class="float">
      In that order So what are waiting for get on board this and become a web developer
      <div><img src="time.jpg" width="70%"></div>
      I want you to know that ill be fully committed one helping you be the baddest programmer around
    </div>
  </p>
</body>
</html>

额外提示 #

• 推荐用rem替代em单位：在<html>中设置font-size: 62.5%，此时1rem=10px，尺寸计算更直观。
• 可添加极简重置代码消除浏览器默认边距差异：* { margin: 0; padding: 0; box-sizing: border-box; }

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