css 如何在Google Fonts中使用可变字体？

rm5edbpk 于 4个月前发布在 Go

关注(0)|答案(3)|浏览(77)

不像传统的字体，需要一个文件的每一个重量（300，400，500等），可变字体允许您通过单个（更小）字体文件访问字体的权重和样式的每种组合。这对网络有明显的好处，我正在尝试使用Google Fonts的Inter字体，Google和设计师的网站都声称这是一种可变字体。
然而，当在Google Fonts中选择字体时，我仍然需要选择我想要使用的各个权重，并且生成的<link>标记也指定了各个权重，这表明它正在下载这些文件中的每一个：

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&display=swap" rel="stylesheet">

字符串
我还注意到它似乎没有斜体，当我尝试渲染斜体时，它用仿斜体来模拟它们，我通过添加CSS规则font-synthesis:none来确认：

font-style: italic;
font-synthesis: none ; /* Disables faux italics and other simulated styles: 
                          if no italic style is installed, defaults to normal

型
为什么会这样，我如何通过Google字体使用 Inter 的可变版本，包括斜体？

css

来源：https://stackoverflow.com/questions/70475065/how-do-i-use-variable-fonts-with-google-fonts

3条答案

按热度按时间

de90aj5v1#

可变字体查询元组

您需要使用适当的query tuples来检索变量字体版本-否则google fonts将返回静态字体文件URL。

https://fonts.googleapis.com/css2?family=Inter:slnt,[email protected],100..900

字符串
请注意定义轴范围的“..”分隔符。
你可以通过打开CSS链接来检查结果。如果一切都是正确的，你应该看到这样的东西：

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
}

型
(Most值得注意的是，权重和样式属性具有多个值，如font-weight: 100 900）。

Inter真正的斜体与斜/斜

变量间提供了一个倾斜轴-允许您使用中间倾斜Angular 。
此外，还有“国际紧密”（使用更紧密的跟踪/字母间距）也提供了斜体。
虽然，可能有更微妙的差异之间的两个“兄弟”-当添加一些字母间距的国际间紧它是很难区分的标准国际间。
这同样适用于Inter中的倾斜/倾斜风格与Inter Tight中的斜体风格相比-你可以争论这种斜体是否可以被视为“真正的”斜体。

/* latin */

@font-face {
  font-family: 'Inter';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v13/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/intertight/v7/NGSwv5HMAFg6IuGlBNMjxLsH8ag.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */

@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/intertight/v7/NGSyv5HMAFg6IuGlBNMjxLsCwapkRA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: 'Inter';
  font-size: 5vmin;
}

.slant {
  font-variation-settings: "slnt" -10;
}

.tight {
  font-family: 'Inter Tight';
  letter-spacing: 0.055em
}

.italic {
  font-style: italic
}

<p class="">Hamburgefonstiv 1234 (Inter)</p>
<p class="tight">Hamburgefonstiv 1234 (Inter tight)</p>
<p class="slant">Hamburgefonstiv 1234 (Inter slanted/oblique)</p>
<p class="tight italic">Hamburgefonstiv 1234 (Inter tight italic)</p>

的字符串
更多关于谷歌字体用户界面的怪癖：“谷歌字体-可变字体在Windows浏览器中不工作”

赞(0）回复(0）举报 4个月前

u5i3ibmn2#

Google Fonts允许您在Variable axes部分选择非标准值，但您仍然需要输入值，因为Google提供较小和特定的文件以避免大的请求，它也近似于它们。
例如，通过选择401和410，您将获得与响应完全相同的文件（唯一的区别是样式中的font-weight）。
检查它们：

Inter似乎无法在斜体btw中使用。

赞(0）回复(0）举报 4个月前

jvidinwx3#

Google Fonts允许您在网站中加载可变字体，而不是特定的权重。有关详细信息，请参阅：
https://fonts.google.com/knowledge/using_type/loading_variable_fonts_on_the_web

赞(0）回复(0）举报 4个月前