;
<頭>
<元字符集=“utf-8”>
<標(biāo)題>字體拉伸
<風(fēng)格>
p {
字體大?。?em；
字體系列：'Myriad Pro'；
}
</風(fēng)格>
</頭>
<正文>
<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: 正常”>P</span>
<span style=“font-stretch: 半展開”>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>
</正文>
</html></pre>
<p>我已經(jīng)嘗試了很多其他字體，問題仍然存在。請(qǐng)幫忙解決</p> 
2
0
0
您可以使用font-stretch來選擇這些字體中的緊縮或擴(kuò)展字體。如果您使用的字體沒有提供緊縮或擴(kuò)展字體，則此屬性無效。
Google字體的用戶界面目前仍然更喜歡靜態(tài)/單重的CSS輸出。
但是您可以手動(dòng)強(qiáng)制API輸出可變字體的@font-face規(guī)則：
https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@50..200,200..900
重要的是使用'..'作為范圍分隔符 - 否則您將得到一個(gè)包含多個(gè)靜態(tài)woff2文件URL的CSS。
此外，Google的API使用一些用戶代理檢測(cè)（也稱為瀏覽器嗅探）來提供向后兼容性（對(duì)于不支持可變字體的瀏覽器）。 這是很有道理的...不幸的是，這并不是很好用：一些像Opera（完美支持VF）這樣的瀏覽器也會(huì)接收到靜態(tài)字體。 （這可能也適用于其他基于Chromium/Blink的瀏覽器）
作為解決方法，我建議在Firefox中打開上面的CSS URL。結(jié)果應(yīng)該類似于：
@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');
}
注意font-weight和font-stretch屬性值包含2個(gè)值，表示權(quán)重/寬度的范圍。這是一個(gè)很好的指示器，您已經(jīng)獲取了正確（可變）的規(guī)則。
@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>
