Icomoon字体在最新版Safari显示异常，填充区域出现孔洞

Hey there! Welcome to Stack Overflow—super glad you’re here asking this question, it’s a tricky but fixable issue with modern Safari and custom icon fonts. Let’s walk through some practical steps to diagnose and resolve those unexpected holes in your IcoMoon icon fills:

• Re-export your IcoMoon font files
  Sometimes font files can get corrupted during export, or newer Safari versions are stricter about format support. Head back to the IcoMoon editor, select all your icons, and re-export with all standard formats (WOFF2, WOFF, TTF) enabled. Replace your existing font files with the fresh export—this fixes a surprising number of Safari-specific rendering glitches.

• Audit your icon paths in IcoMoon
  Old Safari versions were more forgiving of messy icon paths, but the latest builds enforce stricter rendering rules. Open the problematic icon in IcoMoon’s edit mode and check for:

  • Unclosed path nodes (use the "Close Path" tool to fix these)
  • Overlapping or intersecting path segments
  • Inconsistent path directions (this can mess up fill rules like even-odd vs non-zero)
    Fix any issues you find, then re-export the font.

• Tweak CSS rendering properties for Safari
  Add these CSS rules to your icon selector to optimize rendering for Safari:

  .your-icon-class {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    font-feature-settings: "liga" 0; /* Disable ligatures which can cause fill errors */
  }
  

  These properties help Safari render the font’s contours more accurately, reducing the chance of fill holes.

• Adjust hardware acceleration settings
  Newer Safari relies heavily on hardware acceleration, which can sometimes glitch with custom fonts. Try adding this rule to your icons to adjust the rendering layer:

  .your-icon-class {
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  

  This forces Safari to handle the icon’s rendering in a separate layer, which often fixes odd fill issues.

• Verify your Safari and macOS versions
  If you’re using a beta version of Safari or an older macOS release, there might be a known rendering bug. Update to the latest stable Safari and macOS version—Apple frequently patches font rendering issues in system updates.

• Test with a different icon font as a control
  To rule out broader Safari font issues, swap one of your problematic IcoMoon icons with a similar icon from another library. If the alternative icon displays correctly, the problem is definitely with your IcoMoon font or icon paths, not Safari itself.

Content of the question comes from Stack Exchange, question author: Antonius