已下载字体Gilroy的font-weight属性无法生效问题求助

Ah, I see the core issue here! You've only loaded the extrabold variant of the Gilroy font, but you're trying to apply a font-weight: 300 (light weight) to your .h element. Browsers can't automatically convert an extrabold font to a lighter weight—they'll either fall back to your serif fallback font or use a simulated weight (which usually looks blurry and inconsistent).

Here's how to resolve this properly:

Step 1: Get the Correct Font Files #

First, make sure you have the Gilroy font file that corresponds to the 300 weight (this is typically named something like gilroy-light.otf or Gilroy-Light.otf). If you don't have it, you'll need to download the full Gilroy font package that includes multiple weights.

Step 2: Declare Each Font Weight Separately with @font-face #

You need to create a separate @font-face rule for every font weight you want to use. Each rule should specify the correct font-weight value that matches the actual font file, and point to the corresponding font file path.

Example corrected CSS:

/* Gilroy Light (300 weight) */
@font-face {
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: 300;
  src: local('Gilroy Light'), url('../../vendor/fonts/gilroy-light.otf') format('opentype');
}

/* Gilroy Extrabold (800 weight - your original font) */
@font-face {
  font-family: 'Gilroy';
  font-style: normal;
  font-weight: 800;
  src: local('Gilroy Extrabold'), url('../../vendor/fonts/gilroy-extrabold.otf') format('opentype');
}

/* Your existing .h class - no changes needed here! */
.h {
  font-family: 'Gilroy', serif;
  font-size: 48px;
  font-weight: 300; /* Now this will match the 300 weight we declared above */
}

Key Notes to Keep in Mind #

• Match font-weight values correctly: Extrabold fonts typically map to font-weight: 800 (not the default normal 400), while light weights are 300. Double-check the font's documentation if you're unsure about the exact weight number.
• Fix the format type: Your original code uses format('truetype'), but you're loading an .otf file (OpenType). Change this to format('opentype') to ensure the browser recognizes the font format correctly.
• Verify file paths: Make sure the url() path to each font file is accurate relative to your CSS file. If the path is wrong, the font won't load at all.
• Local font fallback: The local() value lets the browser use the user's locally installed version of the font if available, which can speed up loading.

Once you set up the @font-face rules for each weight you need, your font-weight: 300 will apply the actual Gilroy Light font instead of falling back or simulating the weight.

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