如何正确嵌入包含全部变体的Google可变字体Rubik？

问题出在Google Fonts多可变轴的URL语法错误，导致返回400 "missing font family" 错误。

• 错误原因：同时指定ital（斜体轴）和wght（字重轴）时，你错误地将两个轴的取值范围用逗号直接拼接，正确语法需要用分号分隔不同的轴状态组合。
• 正确URL写法：

  https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400..900;1,400..900&display=swap
  

• 语法解析：
  • ital,wght：声明要启用的两个可变字体轴
  • 0,400..900：对应非斜体（ital=0）状态下，字重范围400-900
  • ;1,400..900：对应斜体（ital=1）状态下，字重范围400-900
  • 分号是分隔不同轴组合的核心，确保Google Fonts能识别所有需要加载的变体

如果需要覆盖Rubik更完整的字重范围（官方支持300-900），可将字重部分改为300..900，URL如下：

https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap

内容的提问来源于stack exchange，提问作者Tiziano Volpe