Google 字体在前端开发中的使用

本文介绍了如何在Google字体API受限时,通过修改CSS链接解决字体引用问题,提供备用链接和字体选择方法。即使主页不可用,也能灵活切换字体系列和粗细。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

        对于Google 字体,在前端开发中,我们只需要引入一段字体的相关CSS文件,就可以美化我们的字体,而Google 开源的字体库就非常的方便。

 

        在使用过程当中我们会遇到网络无法访问的问题,但google字体的引用API,目前的情况来看所有的地区都可以进行访问,但是没法访问主页。

https://fonts.googleapis.com

  后面也就多了个apis

https://fonts.google.com/

上面两个地址,只有第一个是可以访问的,也就是说,我们可以通过第一个地址来进行字体的引用。

        虽然网络受阻,但是,对于无法使用科学网络的朋友其实,在知道常用的字体情况下只需要对已知的CSS 文件链接进行修改就可以随意切换想要引用的字体了。

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

        分析这两段代码就会发现,family= 后面是字体的系列,比如 Rubik ,300+500 宽度的字体,我们可以这样写:

        

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

只需要更改需要的字体 系列 + 粗细大小就可以达到响应的CSS 文件。

         所有说Google 开源字体库的引用还是非常方便的即使主页没办法访问。当然科学的人们,当我没说。

        记录Google api 的事。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值