search

Home  >  Q&A  >  body text

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

<p>font-stretch属性根本不起作用。这是我的代码：</p> <pre class="brush:php;toolbar:false;"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>font-stretch</title> <style> p { font-size: 5em; font-family: 'Myriad Pro'; } </style> </head> <body> <p> <span style="font-stretch: ultra-condensed">P</span> <span style="font-stretch: extra-condensed">P</span> <span style="font-stretch: condensed">P</span> <span style="font-stretch: semi-condensed">P</span> <span style="font-stretch: normal">P</span> <span style="font-stretch: semi-expanded">P</span> <span style="font-stretch: expanded">P</span> <span style="font-stretch: extra-expanded">P</span> <span style="font-stretch: ultra-expanded">P</span> </p> </body> </html></pre> <p>我已经尝试了很多其他字体，问题仍然存在。请帮忙解决</p>
P粉676821490P粉676821490449 days ago505

reply all(2)I'll reply

  • P粉787934476

    P粉7879344762023-08-27 11:21:36

    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.

    reply
    0
  • P粉567112391

    P粉5671123912023-08-27 10:45:57

    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;
}
    <p style="font-family:sans-serif; font-size:12px">Font-stretch: <input type="range" id="fontStretch" value="50" min="50" max="200" step="5"></p>
<p style="font-family:sans-serif; font-size:12px">Font-weight: <input type="range" id="fontWeight" value="200" min="200" max="900" step="10"></p>
<p id="variableTest" style="font-stretch:50%" class="inconsolata variableTest">Hamburgefons</p>

<h2>Variable fonts Example</h2>

<p>
  <span style="font-stretch: ultra-condensed">P</span>
  <span style="font-stretch: extra-condensed">P</span>
  <span style="font-stretch: condensed">P</span>
  <span style="font-stretch: semi-condensed">P</span>
  <span style="font-stretch: normal">P</span>
  <span style="font-stretch: semi-expanded">P</span>
  <span style="font-stretch: expanded">P</span>
  <span style="font-stretch: extra-expanded">P</span>
  <span style="font-stretch: ultra-expanded">P</span>
</p>

<h2>Static fonts Example (custom fonts to widths mapping)</h2>
<p class="customMap">
  <span style="font-stretch: 50%">g</span>
  <span style="font-stretch: 200%">g</span>
</p>


<script>
  fontStretch.addEventListener('change', (e) => {
    variableTest.style.fontStretch = e.currentTarget.value + '%';
  });

  fontWeight.addEventListener('change', (e) => {
    variableTest.style.fontWeight = e.currentTarget.value;
  })
</script>

    reply
    0
  • Cancelreply