How to solve the problem that the font stretching attribute cannot be started

Question

The font-stretch property doesn't work at all. This is my code: font-stretch

P粉787934476 · Answer

You can use font-stretch to select a stretched or stretched font among these fonts. This property has no effect if the font you are using does not provide a compressed or expanded font.

P粉567112391 · Answer

Google Fonts' user interface currently still prefers static/single-weight CSS output.

But you can manually force the API to output the @font-face rules for variable fonts:

https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@50..200,200..900

It is important to use '..' as the range separator - otherwise you will end up with a CSS containing multiple static woff2 file URLs.

Additionally, Google's API uses some user-agent detection (also known as browser sniffing) to provide backwards compatibility (for browsers that do not support variable fonts). This makes sense... Unfortunately, this doesn't work very well: some browsers like Opera (which supports VF perfectly) also receive static fonts. (This may also work for other Chromium/Blink based browsers)

As a workaround, I recommend opening the above CSS URL in Firefox. The result should look similar to:

@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 50% 200%;
  src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format('woff2');
}

Note that font-weight and font-stretch attribute values contain 2 values, indicating the range of weight/width. This is a good indicator that you've acquired the correct (variable) rules.

Example: Inconsolata variable font

@font-face {
  font-family: "Inconsolata";
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 50% 200%;
  src: url(https://fonts.gstatic.com/s/inconsolata/v31/QldKNThLqRwH-OJ1UHjlKGlZ5qg.woff2) format("woff2");
}

body {
  font-size: 36px;
  font-family: sans-serif;
}

h2 {
  font-size: 0.5em;
  color: red;
}

p {
  font-family: Inconsolata;
  transition: 0.8s;
}

.customMap {
  font-family: sans-serif;
}

@font-face {
  font-family: "Inconsolata2";
  src: url(https://fonts.gstatic.com/s/robotocondensed/v25/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2) format("woff2");
  font-stretch: 50%;
}

@font-face {
  font-family: "Inconsolata2";
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TLBCc6CsQ.woff2) format('woff2');
  font-stretch: 200%;
  font-style: normal;
  font-weight: normal;
}

.customMap {
  font-family: "Inconsolata2";
  font-style: normal;
}

Font-stretch: 
Font-weight: 
Hamburgefons

Variable fonts Example


  P
  P
  P
  P
  P
  P
  P
  P
  P


Static fonts Example (custom fonts to widths mapping)

  g
  g

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Example: Inconsolata variable font