font-stretch

Antworte allen (2)

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

您可以使用font-stretch来选择这些字体中的紧缩或扩展字体。如果您使用的字体没有提供紧缩或扩展字体，则此属性无效。

Wie+0

Antwort hinzufügen

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

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

Wie+0

Antwort hinzufügen