当前位置: 首页 > news >正文

前端如何导入谷歌字体库

#谷歌字体库内容丰富,涵盖上千种多语言支持的字体,学习导入谷歌字体库来增加网站的阅读性,是必不可少的一项技能#

1,前往谷歌字体网站

要会魔法,裸连很卡

2, 寻找心仪字体

Googles Fonts下面的filters可以筛选文字,字体库同族字体会支持不同的语言,如果不确定是否支持自己想要的多语言,可以在筛选栏中打入多国语言,对照右侧字体是否正常显示即可。无法显示的字体会呈现问号。这里拿Noto Sans教学

3,进去后 点击右上角的Get font按钮

4,点击会进入自己的字体库

这里会存在所有你点击来过的字体,后续的引用也会全部引入,如果不想引入,需在此删除。点击右侧的使用方法 Get embed code获取代码

5, 选择<link>引入

  • 复制’Embed code in the <head> of your html‘的代码 直接塞到index.html中就行了
  • 第二个’Noto Sans SC: CSS class for a variable style‘是自定义字体的相关css案例,基本用不到
  • 如果想方便可以在左侧选择One Value,只会导入一种粗细的字体

6,然后在你的主css中定义全局字体族即可

 // main.css
*{
    font-family: "Noto Sans SC", sans-serif;
}

相关文章:

  • arm_mat_init_f32用法 dsp库
  • ansible-playbook 执行剧本报错: libselinux-python) aren‘t installed!
  • 智慧管理 | 共享茶室:可远程实时查看的物联网框架要怎么选?
  • Mysql-数据库、安装、登录
  • 使用string和string_view(四)——练习
  • 位置编码汇总 # 持续更新
  • AI提示词:自然景区智能客服
  • 计算机网络知识点汇总与复习——(二)物理层
  • # 深度学习基础算法:NN、RNN、CNN
  • 机器学习-04-分类算法-04-支持向量机SVM-案例
  • 保姆级教程:synchronized 同步方法 vs 同步代码块,看完彻底懂锁!
  • QML-项目实战二
  • Ubuntu Live USB 如何使用
  • 《深度洞察:MySQL与Oracle中游标的性能分野》
  • 重新排序--区间问题--差分求频率,全开ll
  • 静态路由复习实验
  • MyBatis-Plus逆向工程
  • ORM框架
  • SQL Server安装后 SSMS 无法连接:身份验证模式错误
  • 可编辑36页PPT | “新基建”在数字化智慧高速公路中的支撑应用方案智慧高速解决方案智慧交通方案
  • 网站建设与管理的未来规划/seo诊断
  • 如何免费建一个网站/论坛优化seo
  • 自助云商城/seo技术培训山东
  • 奉贤区做网站/关键词抓取工具都有哪些
  • 线上兼职/seo优化步骤
  • 大连手机自适应网站建设公司/网络营销师报名入口