📚
note
Blog
  • Initial page
  • JS-notes
    • 使用浏览器书签执行js代码
    • JSON.stringify的小技巧
    • Fisher–Yates shuffle洗牌算法
    • 打印页面
  • Web-notes
    • 在网页中引入在线字体
  • Uniapp-notes
    • swiper-item高度自适应
    • 微信小程序的图片预览兼容性处理
  • VUE-notes
    • vue-note
    • vue3-note
  • VPS-notes
    • CentOs7笔记
    • ssh小记
    • Ubuntu笔记
    • vps安全相关
    • [Google Drive笔记](VPS-notes/Google Drive笔记.md)
  • TypeScript-notes
    • ts热编译项目
    • TypeScript笔记
    • js项目转ts
  • Python-notes
    • Python爬虫笔记
    • Python笔记
  • PHP-notes
    • php笔记
    • php+redis
    • php-codeIgniter
    • php抽奖算法
    • Laravel笔记
  • Mobile-notes
    • 移动端常用样式及兼容相关
  • Linux-notes
    • linux常用指令
  • Game-notes
    • Minecraft-server
  • TelegramBot-notes
    • tg-bot小记
  • Windows-notes
    • window-note
    • node-note
    • WSL-note
  • RaspberryPi-notes
    • RaspberryPi-note
    • 其他玩法
    • Openwrt
    • Ubuntu安装指南
  • Phone-notes
    • ZenFone6-note
  • Cocos-notes
    • Cocos-note
  • Network-notes
    • 单线复用
  • Other-notes
    • 国际化地域标识码
Powered by GitBook
On this page
  • 引入GoogleFont
  • 引入思源字体

Was this helpful?

  1. Web-notes

在网页中引入在线字体

Last updated 2 years ago

Was this helpful?

请注意字体的商用版权问题

引入GoogleFont

进入选择需要的字体,在点选了字体后,页面底部会出现一个菜单,里面提供了引入的链接以及自定义需要用到的字形大小。

引入思源字体

创建项目并引用字体

进入,注册个人账户或使用谷歌登录,然后搜索source,就会出现思源系列字体。

找到要使用的字体,点击Add to web project,然后创建一个web project,选中要使用的字形大小,再点选create或save,然后就会返回一段js代码,将该js代码复制到自己项目里,即可使用该字体。

修改项目字体

点击页面右上角 My Adobe Fonts,选择Web Projects标签页,即可修改字体。

GoogleFont官网
AdobeFont官网