前言
前几天在新建另一个网站在寻找美化教程的时候,看到可以直接通过html代码引入小米的misnas字体,而且不走自己服务器,也就是不需要把字体下载下来,不然每次加载都要跑4MB左右的流量,非常消耗服务器或者cdn的流量。
MiSans介绍
MiSans 不仅服务于数以亿计的小米移动设备用户,所有公众也都可以免费使用这款字体。自 2021 年底字体发布以来,越来越多的个人和企业选择在品牌、系统设计和商业案例中使用 MiSans。同时,我们也在不断完善和更新 MiSans 字体,包括增加更多的语言和文字,覆盖更多的常用汉字,让所有人在使用 MiSans 时都能得到最好的体验。
小米在系统屏显字体深耕多年,小米兰亭Pro 和 MiSans 曾获得 Red Dot Design Award 2019、iF Design Award 2023、HiiiBrand 2023 等国际设计奖项。
引入方法
由于小米misans拿到的链接不直接是woff2等直链接,需要同时设置字重等参数,但是也不麻烦,普通引入可以直接在页头或者页脚放入以下代码就行。
建议放在页脚区域,这样不用等不会对网站加载造成较大影响,缺点就是,可能会先加载出系统字体,等字体加载结束才会显示出MiSans字体。
不生效方法
部分主题并不能直接引入,例如子比主题,原本我刚开始是直接在Argon里设置的,直接就生效。后面复制在子比这边检查,不生效,于是试了以下这个方法。
自定义css样式、
在自定义css样式里插入以下代码,如图。
自定义HTML代码
这个代码放在头部或者脚部都行,我的是放在脚部。
其中,400,600代表字重,我这里只引入了400和600的。
最终效果
可以查看我的网站样式。
微信扫描下方的二维码阅读本文
- 最新
- 最热
只看作者