问题：Lato字体100权重下，-webkit-font-smoothing在真实iPhone Safari无效

Let’s break down why your current fix works on desktop/Safari simulator but not real iOS devices, and what you can do to resolve it:

First, the -webkit-font-smoothing: subpixel-antialiased; property is optimized for non-Retina desktop screens. Real iPhone screens use high-density Retina displays, and iOS’s font rendering engine ignores subpixel antialiasing entirely—instead, it uses grayscale antialiasing for better readability on small, high-res screens. That’s why your current fix doesn’t translate to real devices.

Here are actionable solutions to try:

• Add a subtle text stroke to boost visibility:
  A tiny, semi-transparent stroke can make the ultra-thin Lato 100 characters pop without altering the font’s overall look. Add this to your body styles:

  body {
    -webkit-text-stroke: 0.2px rgba(0, 0, 0, 0.1);
    /* Keep your existing font settings */
    font-family: Lato, sans-serif;
    font-weight: 100;
  }
  

  Adjust the stroke width and opacity to match your design—start small to avoid making the font look heavy.

• Use a slightly heavier font weight on mobile:
  Lato 100 is extremely thin, and even on Retina screens, small text can become unreadable. Use a media query to switch to 300 weight for mobile devices:

  @media (max-width: 768px) {
    body {
      font-weight: 300;
    }
  }
  

  This is a reliable fix because 300 is still light enough to match your design, but dense enough to render clearly on iPhone screens.

• Swap to grayscale antialiasing for mobile:
  Replace subpixel-antialiased with antialiased for iOS devices. This aligns with how Safari on real iPhones handles font smoothing:

  @media (max-width: 768px) {
    body {
      -webkit-font-smoothing: antialiased;
    }
  }
  

  For desktop, you can keep subpixel-antialiased to maintain sharpness on non-Retina screens.

• Verify your font asset setup:
  Double-check that your Lato font files include the 100 weight correctly, and that they’re being loaded properly on mobile. Sometimes, missing or corrupted font files can cause iOS to fall back to a system font that renders differently.

Test these changes on a real iPhone—start with the text stroke or font weight swap, as those tend to have the most immediate impact.

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