Inter字体在Safari中失效并导致文本与数字异常间距问题

问题现象 #

Nuxt应用用nuxt/fonts加载Inter字体后，在Safari里出现两个问题：

• 数字和部分文本间距异常
• 红心emoji显示成小黑心，换其他字体就正常

解决步骤 #

1. 确保Inter字体完整加载

在nuxt.config.ts里配置nuxt/fonts时，要指定完整的字重范围，避免Safari fallback到系统字体导致间距错乱：

export default defineNuxtConfig({
  fonts: {
    families: {
      Inter: {
        src: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap',
        // 如果用本地字体，要确保字体文件包含完整字符集（包括数字、emoji相关）
        // src: [{ path: './assets/fonts/Inter-Regular.woff2', weight: 400 }, ...其他字重]
      }
    }
  }
})

2. 调整字体栈顺序，优先加载彩色emoji

把彩色emoji字体移到Inter前面，避免Inter自带的黑白emoji覆盖系统彩色emoji：

// tailwind.config.js
theme: {
    extend: {
        fontFamily: {
            sans: [
                "Apple Color Emoji",
                "Noto Color Emoji",
                "Twemoji Mozilla",
                "Inter",
                "sans-serif"
            ]
        },
    }
},

3. 修复数字间距异常

给Inter字体启用表格数字特性，让数字间距统一：

// tailwind.config.js
theme: {
    extend: {
        fontFamily: {
            sans: [
                "Inter",
                { fontFeatureSettings: "'tnum', 'lnum'" },
                "Apple Color Emoji",
                "Noto Color Emoji",
                "sans-serif"
            ]
        },
    }
},

或者在全局样式里直接设置：

@layer base {
  body {
    font-variant-numeric: tabular-nums lining-nums;
  }
}

4. 强制Safari优化字体渲染

添加CSS属性让Safari的字体渲染更平滑，避免显示异常：

@layer base {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "tnum" 1;
  }
}

问题截图 #

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