webfont前端使用帮助-css字体单独调用

释放双眼,带上耳机,听听看~!

前言

全站更换字体确实很酷,但是字体文件太大了,影响网站加载速度,得不偿失。

这里我分享一个方法,只调整重要的几个导航文字的字体,字体文件非常小。秒开。

打开阿里巴巴在线字体生成

https://www.iconfont.cn/webfont

1645281139-a111

点击网页中的【点此添加字体】添加一个思源宋体

然后在输入框中把你导航用到的中文字全打出来,点生成字体

1645281314-a222

往下拉到思源宋体生成的文字处

1645281378-a333

点击引用线上地址,点击复制得到代码

@font-face {
font-family: 'webfont';
font-display: swap;
src: url('//at.alicdn.com/t/webfont_ifcdqmimc9m.eot'); /* IE9*/
src: url('//at.alicdn.com/t/webfont_ifcdqmimc9m.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/webfont_ifcdqmimc9m.woff2') format('woff2'),
url('//at.alicdn.com/t/webfont_ifcdqmimc9m.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/webfont_ifcdqmimc9m.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/webfont_ifcdqmimc9m.svg#after') format('svg'); /* iOS 4.1- */
}

把这段代码放到子主题style.css里面,再放一段下方样式代码放进去style.css里

.web-font{
font-family:"webfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

外观-菜单,为导航菜单添加样式

<i class="web-font">你之前准备好的文字</i>
1645281634-a444
温馨提示:本文最后更新于 2022-04-13 22:20 ,某些文章具有时效性,若有错误或已失效,请在下方留言或联系逆念

给TA打赏
共{{data.count}}人
人已打赏
网络技术

通过小翼管家获取电信光猫telecomadmin超级管理员密码,理论支持电信各版本光猫

2022-4-12 17:44:23

网络技术

【B2主题美化】之等级自定义颜色

2022-4-14 0:42:55

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,QQ508044570 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索