Nunito字体600/700权重下ší字母间距异常问题求助

Let’s break down why you’re wonky spacing for "ší" only on your workstation—especially since it looks fine directly on Google Fonts. Here are the most likely culprits and actionable fixes to try:

1. Confirm Font Subset & Proper Loading #

First, double-check that your Google Fonts import includes the Latin Extended subset. Characters like "í" and "š" live here, and skipping this subset can force fallback system fonts that mess up spacing.

• Your import should include the subset parameter, like this:

  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@600;700&subset=latin-ext" rel="stylesheet">
  

• Verify the font loads correctly: Open your browser’s DevTools > Network tab > Filter by "Fonts". You should see Nunito files for 600/700 weights with the Latin Extended subset. If not, your import might be blocked or malformed.

2. Check Workstation/Browser Rendering Settings #

Since this issue is isolated to your machine, local browser/OS settings are a prime suspect:

• Zoom Level: Accidental zoom (even 105%) can distort character spacing. Reset to 100% with Ctrl/Command + 0.
• Custom Browser Flags: Some browsers let you tweak font rendering (e.g., Chrome’s chrome://flags/#enable-font-antialiasing). Reset any modified flags to default.
• Extensions: Ad blockers, font modifiers, or accessibility tools might override your site’s font styles. Disable all extensions temporarily to test.
• OS Font Settings: On Windows, check ClearType configuration; on macOS, look at "Font Smoothing" in System Preferences. Misconfigured system-level rendering can bleed into browser output.

3. Rule Out Vue Text Processing Quirks #

Even with simple HTML, Vue might introduce unintended text handling:

• Avoid using v-text or {{ }} interpolation if it’s adding extra whitespace around "ší". Try using raw HTML like <span>ší</span> directly to isolate the issue.
• Scan global CSS for rules that might target special characters—like custom letter-spacing or ::first-letter styles that accidentally apply to "š" or "í".

4. Test with a Static HTML File #

To confirm it’s not Vue-related, create a bare-bones HTML file with just the Google Fonts import and a <p> tag with "ší" styled to Nunito 600/700. If the spacing is still off, the problem is definitely local to your workstation. If it looks normal, dig into Vue component styles or text interpolation logic.

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