You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Google Fonts中使用Lato字体的light字重?

如何调用Lato字体的Light版本

嘿,我来帮你搞定这个问题!要调用Lato的Light版本,其实只需要两步:确保你加载了对应的字重,然后在CSS里指定它就行。

第一步:确认Google字体链接包含Light字重

Google Fonts默认只会加载字体的Regular(400)字重,所以你需要在引入链接里明确指定要加载Light(对应字重值300)。如果你的链接里没有这个参数,更新成类似这样:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap">

要是之后你还需要用到其他字重(比如Regular 400、Bold 700),可以把多个字重用逗号分隔,比如:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap">

第二步:在CSS中指定font-weight为300

你已经设置了font-family: 'Lato', sans-serif;,现在只需要加上font-weight: 300;就能调用Light版本了。比如给某个元素设置:

.wireframe-text {
  font-family: 'Lato', sans-serif;
  font-weight: 300; /* 这就是触发Light版本的关键 */
}

如果想让整个页面默认使用Lato Light,直接给body设置:

body {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
}

小提示:Lato的字重对应关系是:

  • Light → 300
  • Regular → 400
  • Bold → 700
    只要你在字体链接里包含了对应字重,就能通过设置font-weight来调用它们。

内容的提问来源于stack exchange,提问作者J Seabolt

火山引擎 最新活动