🚀 CSS如何让网页的字体变细变清晰？

📅 发布于 2025年12月 | 👤 作者：博主 | 🏷️ 标签："font","css", Web开发, 前端, 面试

欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。

总结

font-weight + font-family,-webkit-font-smoothing,text-rendering

🌟 推荐方案：

        
        body {
font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
          font-weight: 300; /* 或 200、100，越小越细（取决于字体是否支持） */
          -webkit-font-smoothing: antialiased;     /* macOS / WebKit 下更清晰 */
          -moz-osx-font-smoothing: grayscale;      /* Firefox on macOS */
          text-rendering: optimizeLegibility;      /* 提升小字号文字的可读性 */
        }

🌟 适配高 DPI（Retina）屏幕：

        
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
          body {
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
          }
        }

❌ 不推荐的做法：

← 返回首页