·设为首页收藏本站📧邮箱修改🎁免费下载专区💎积分✅卡密📒收藏夹👽聊天室
返回列表 发布新帖

@font-face自定义一套字体可以实现font-weight切换不同粗细的字体

113 1
发表于 2024-8-3 21:32:39 | 查看全部 阅读模式

马上注册,免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
网页需要自定义一套字体,需要有正常,细,粗不同的效果,中文字体一般比较大,我比较常用的是使用Forntmin对字体进行压缩,最近在修改一个网页的时候,发现自定义字体情况下,使用blod可以加粗,可是使用lighter无法实现字体变细,找了下问题,发现是在定义字体的时候,不能使用字符串,应该是数值去定义font-weight的原因。比如下面以小米的字体为例,有需要三个字体,正常,加粗,加细的,应该使用下面的方式定义
  1. ​@font-face {        font-family: "MiSans";        src: url('../fonts/min/MiSans-Light.woff') format('woff'),        url('../fonts/min/MiSans-Light.ttf') format('truetype');        font-weight: 300;        font-style: normal;}@font-face {        font-family: "MiSans";        src:url('../fonts/min/MiSans-Normal.woff') format('woff'),        url('../fonts/min/MiSans-Normal.ttf') format('truetype');        font-weight: 400;        font-style: normal;}@font-face {        font-family: "MiSans";        src: url('../fonts/min/MiSans-Medium.woff') format('woff'),        url('../fonts/min/MiSans-Medium.ttf') format('truetype');        font-weight: 700; /*不要用 blod*/        font-style: normal;}​
复制代码
三个font-family的名称要一致,才是一套的,最主要的,font-weight这里不能使用light,normal,blod代替,使用字符串的形式会发现,blod有效,而light会无效,如果用数值,就可以正常显示三种粗细的字体,后期使用不同的字体,只需要定义好font-weight
  1. ​       .light-text {            font-family: 'MiSans';            font-weight: 300;        }        .normal-text {            font-family: 'MiSans';            font-weight: 400;        }        .bold-text {            font-family: 'MiSans';            font-weight: 700;        }​
复制代码
我要说一句 收起回复
创宇盾启航版免费网站防御网站加速服务

评论1

拾光Lv.8 发表于 2024-8-3 21:33:30 | 查看全部
好贴 带走了。
我要说一句 收起回复

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

创宇盾启航版免费网站防御网站加速服务
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:18.221.147.236,GMT+8, 2024-11-13 06:37 , Processed in 0.376566 second(s), 85 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2024 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表