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

左右不逢缘 · 发表于 2024-8-3 21:32:39

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

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

×

网页需要自定义一套字体，需要有正常，细，粗不同的效果，中文字体一般比较大，我比较常用的是使用Forntmin对字体进行压缩，最近在修改一个网页的时候，发现自定义字体情况下，使用blod可以加粗，可是使用lighter无法实现字体变细，找了下问题，发现是在定义字体的时候，不能使用字符串，应该是数值去定义font-weight的原因。比如下面以小米的字体为例，有需要三个字体，正常，加粗，加细的，应该使用下面的方式定义

@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

.light-text { font-family: 'MiSans'; font-weight: 300; } .normal-text { font-family: 'MiSans'; font-weight: 400; } .bold-text { font-family: 'MiSans'; font-weight: 700; }

复制代码

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！