分享给大家一个免费使用网络字体的方法
如题,给各位朋友分享一个免费使用字体的方法,因为现在网上的字体大部分都需要付费使用,而我们有时候只需要字体中的一两个字,如果为这一两个字花十几块,还是有点肉疼的,尊重版权的另说;
好了,话不多说,分享开始;
效果演示
下面这个网站是我用这个方法添加的字体,效果还不错,大家可以看看;
读书声资源网http://book.usejs.cn
这个方法有点限制,就是不能下载整个字体,一次只能使用部分文字,如果你的网站只使用整个字体中一两个字体或者十几个,可以参考下这个方法;
下载方法
- 打开谷歌浏览器进入到下面这个网页字体超市https://www.font.cn/
- 进入网站后,点击
找字体
,看能不能找到你想要的字体,如果在这个网站上没有找到你的字体,就可以关闭文章或者到别的字体网站试一下这个方法;
- 这次我就拿
米开飘逸行楷
这个字体举例子,进入到字体详情页后在预览出输入你想要下载的问题
- 然后按下
f12
打开浏览器的调试模式,然后点击一下我红色框框住了的两个图标,按顺序点哟!
- 鼠标移动到生成的预览文字上,点击一下鼠标左键,就能看到右边的元素上有一个类似
fonts303
的文字,不同字体后面的数字不一样,记住这个数字
- 然后点击谷歌调试工具的
network
标签,再点下方的all
,如果像图片中一样只有一行,可以不关调试工具刷新一下页面,刷新后记得重新输入预览文字哟~
- 然后往下滑,找到包含之前数字的那个请求,
好了,到这就成功了,接下来就可以复制这个请求,到你的项目上使用了
使用方法
下面给大家说下使用方法 先复制之前找到的连接地址,复制方法,点击连接然后点击headers
;
复制 Request URL
到浏览器地址框回车就可以下在你之前输入的字体文件了,下载后字体格式是woff
,如果其他格式的字体到网上找转换工具转换一下就可以了;
字体下载后 复制字体到项目目录,可以修改下名字,这里我改成了303
;
然后就可以在代码里使用了,具体演示代码如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示</title><style>@font-face {font-family: "303";src: url("./303.woff");}.font-303{font-family: "303";font-size: 40px;}</style>
</head>
<body><div class="font-303">怒发冲冠,凭阑处、潇潇雨歇。</div>
</body>
</html>
最后的效果
分享结束,这个方法适合做开发或者设计的朋友,因为不能下载整个字体的原因,也减少了字体包的大小,也算意外之喜吧。
喜欢的朋友记得点赞;
如果遇到版权问题,可别说方法是我教的啊!
分享给大家一个免费使用网络字体的方法相关推荐
- 分享20款漂亮免费英文LOGO字体
这篇文章向大家分享20款英文LOGO字体,可以免费下载使用.这些免费英文LOGO字体特别适合网页设计师和平面设计师用于制作LOGO.如果你正在寻找漂亮的免费英文LOGO字体,那么这份清单正是为你准备的 ...
- 介绍一个免费的网络空间,恒爱网络。
介绍个免费的网络空间,恒爱网络,在该网站创建一个用户即可申请,最大150m的免费空间. 详细步骤: ①给他们发1个有关恒爱网络的宣传,如 "恒爱网络的免费空间好用,国外免认证的域名也好用&q ...
- 分享一波CSS免费可商用字体(一)
有用,打个赏?
- 推荐一个免费获得Q币的方法!
1.点击以下链接注册后,积分满300后,可申请获得1Q 币: http://www.pceggs.com/PgQCoinRush.aspx?pcd=7697589&cd=a4594f74 2. ...
- 向设计师分享最新30款免费英文字体
字体在设计中扮演这重要角色,设计师经常要花很多的时间去挑选字体.如果你正在寻找好看的免费英文字体,那么下面收集的30款免费英文字体正是为你准备的,赶紧下载吧. Homestead Font 点击下载 ...
- 迅雷显示服务器未连接,迅雷看看网络连接不上怎么回事 迅雷看看连接不上网络的解决方法...
当我们在使用迅雷下载视频,很多用户都会使用迅雷中的边播边放功能,一般情况下只要网速正常是可以正常播放的,但是很多用户在显示出迅雷看看之后就出现网络连接不上的问题,这是怎么回事呢?如何解决?相信有很多的 ...
- 楚乔传手游 服务器维护,楚乔传手游网络异常进不去游戏怎么办?楚乔传网络异常解决方法...
随着楚乔传的大热,手游楚乔传也应运而生,上线后的楚乔传手游版虽然好玩但也出现了许多的BUG和问题,最近有小伙伴说楚乔传手游下载后,打不开一直显示网络异常,但是网都好的,那么楚乔传手游网络异常怎么办?楚 ...
- 想做好网络营销?这四步网络营销推广方法至关重要
不管是传统营销,还是网络营销,最终目标都是销售产品.随着电子商务越发重要,网络营销推广方法也日渐白热化,一站式网络营销可概括为策划.编辑.推广. 那么,企业用什么网络营销推广方法怎么才能够与网络营销有 ...
- html盒子产生阴影,css给一个盒子加盒阴影的方法
css给一个盒子加盒阴影的方法 发布时间:2020-11-16 10:57:56 来源:亿速云 阅读:171 作者:小新 这篇文章主要介绍了css给一个盒子加盒阴影的方法,具有一定借鉴价值,需要的朋友 ...
最新文章
- Anaconda各版本安装包存档
- Dnn's Event Logging API
- @data注解_SpringBoot入门实践(七)-Spring-Data-JPA实现数据访问
- 用OpenStack构建中国人寿数据中心生产云
- 《java就业培训教程》读书笔记
- 互联网潜规则:如何进行敏感词屏蔽
- 支付宝小程序平台的IM聊天插件
- 程序员常用字体(vs字体修改方案)
- JESD204B 协议解析和参数理解
- Linux学习笔记——~/.bash_profile文件
- [转]基于POI的功能区划分()
- eclipse新建类auther自填充
- 【Flutter】【path_provider】path_provider文件系统
- form-data和x-www-form-urlencoded的区别和延伸
- java中的Dao类是什么意思
- 我的第一个Chrome小插件-基于vue开发的flexbox布局CSS拷贝工具
- 零基础学Python之二集成开发环境(IDE)
- 攻防兼备:中国蚁剑使用指南及特征流量
- CSS中的BFC详解:定义、触发方式及应用场景
- P1 无符号整数二进制补码