使用Google Fonts的网站文本像素化，求有效解决方法

核心问题排查：字体引入链接语法错误 #

你当前的Google Fonts @import链接里，css2和family之间少了关键的问号?，这会导致字体文件无法正确加载，浏览器只能 fallback 到系统自带字体，进而出现严重像素化。

修正后的@import代码： #

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,600;1,700;1,800;1,900;1,1000&family=Oswald:wght@200;300;400;500;600;700&display=swap');

补充修复步骤 #

• 确认字体应用生效：检查目标元素的CSS，确保已正确设置字体族，比如：

  body {
    font-family: 'Nunito', sans-serif;
  }
  h1, h2 {
    font-family: 'Oswald', sans-serif;
  }
  

• 优化Chrome字体渲染：打开chrome://flags，搜索“LCD text antialiasing”，设置为Enabled后重启浏览器。
• 添加全面的字体平滑属性：在全局样式里补充这些属性，提升渲染质量：

  * {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  

• 改用标签引入字体：@import可能存在加载顺序问题，改用标签能更稳定加载字体：

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,600;1,700;1,800;1,900;1,1000&family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
  

• 排查干扰样式：检查是否有transform: scale()、overflow: hidden或特殊定位属性（如position: fixed）影响文本渲染，这类属性可能触发浏览器硬件加速，导致字体模糊像素化。

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