网页前端使用阿里巴巴普惠字体的方法

网极科技4个月前代码笔记1071

《阿里巴巴普惠体》是一款由中国企业首次发布的可面向全场景使用的免费商用正文字体。可永久免费正版商用的阿里巴巴普惠体,中文字体多采用现代简洁的笔画,造型上偏瘦长,并将字的重心提高。字体笔画上也做了一些简化,如较粗的标题字省略出脚部分,更显简洁。

在原有的1.0版本基础上,《阿里巴巴普惠体2.0》的中文字体优化了部分字体结构、新增4个字重(字体粗细),从5个增为9个字重。字库共囊括222,841个字符,覆盖全球175个语种。

使用方法,前端CSS内最顶部增加以下代码:

<style>
/* 在线链接服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "阿里巴巴普惠体 2.0 45 Light";font-weight: 300;src: url("//at.alicdn.com/wf/webfont/BS8eMjpZgCgZ/jsrXUgCCCIuh.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/BS8eMjpZgCgZ/huCIfapS0xx1.woff") format("woff");
  font-display: swap;
}
</style>

说明文档:https://www.iconfont.cn/fonts/detail?spm=a313x.fonts_index.i1.d9df05512.278f3a81t9OFoR&cnid=adI1E7HF7yme

更多阿里官方免费字体:https://www.iconfont.cn/fonts/index?spm=a313x.fonts_index.i1.2.1d223a81PkEFcg&type=3&page=1

相关文章

宝塔面板Nginx设置任意路径301重定向

宝塔面板Nginx设置任意路径301重定向

接到一个客户的诉求,需要将指定路径进行301重定向,由于宝塔设置重定向只有域名(即根目录),无法对子目录或其他任意路径进行重定向,所以需要手写Nginx的重定向规则。 301重定向和伪静态有...

PHP7.1+ 7.2 7.4 json_encode 造成float数据精度异常情况

PHP7.1+ 7.2 7.4 json_encode 造成float数据精度异常情况

php7.1+版本进行json处理时,精度异常到很长的数值如下图本来原数据是没有这么大的精度的,小数点后面2-4位而已,而经过json_encode处理后就成这样的了。解决办法,给php文件开头加下如...

如何避免数据库被黑客入侵或者被误删除?

如何避免数据库被黑客入侵或者被误删除?

经常遇到火急火燎的客户,因为数据库被黑或者被误删,找到我们要求修复数据库。但是修复数据库没有那么容易,费用动辄上万元,还有很复杂的必须人工操作的过程。平均恢复周期在1-2周,数据量越大会恢复的越久...

支付风控方案:基于支付宝实名认证拦截黑产充值

支付风控方案:基于支付宝实名认证拦截黑产充值

核心目标 通过支付宝官方身份认证接口+实名校验双重机制,阻断虚假账号、盗号、洗钱等黑产行为,同时平衡用户体验与安全性。一、技术实现流程1. 支付宝身份认证接入接口文档调用支付宝官方认证服务:...

windows软件多开工具_微信多开工具

windows软件多开工具_微信多开工具

[GuestBuy] 下载地址 链接: https://pan.baidu.com/s/16kQr2VYtL0ERFsW8NDTZIw?pwd=rvnj 提取码: rvnj [/Gues...

不懂技术也能将网页制作成Windows桌面exe文件

不懂技术也能将网页制作成Windows桌面exe文件

基于electron将网页制作成Windows桌面exe文件,使用开源的nativefier可以简单将网页打包成Windows桌面exe文件效果如下图:nativefier开源地址: https:/...