解決字體拉伸屬性無法啟動的方法

Question

font-stretch屬性根本不起作用。這是我的程式碼：font-stretch

P粉787934476 · Answer

您可以使用font-stretch來選擇這些字體中的緊縮或擴充字體。如果您使用的字體沒有提供緊縮或擴展字體，則此屬性無效。

P粉567112391 · Answer

Google字體的使用者介面目前仍然更喜歡靜態/單重的CSS輸出。

但是您可以手動強制API輸出可變字體的@font-face規則：

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

重要的是使用'..'作為範圍分隔符號 - 否則您將得到一個包含多個靜態woff2檔案URL的CSS。

此外，Google的API使用一些用戶代理檢測（也稱為瀏覽器嗅探）來提供向後相容性（對於不支援可變字體的瀏覽器）。這是很有道理的...不幸的是，這並不是很好用：一些像Opera（完美支援VF）這樣的瀏覽器也會接收到靜態字體。（這也可能適用於其他基於Chromium/Blink的瀏覽器）

作為解決方法，我建議在Firefox中開啟上面的CSS URL。結果應該類似：

@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個值，表示權重/寬度的範圍。這是一個很好的指示器，您已經獲得了正確（可變）的規則。

範例：Inconsolata可變字體

@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