微信小程序加载第三方字体
1、加载本地字体
做小程序项目时,有时为了提升页面展示效果,会引入一些第三方字体,引入方式如下代码片段
/*每个页面公共css */
@font-face {font-family: "alifont"; // 是你封装的名字src: url('/static/css/subset-AlibabaPuHuiTiR.ttf') format('truetype'); // 你字体包的位置
}
而常规字体文件比较大(例如以上阿里巴巴普惠字体--Alibaba-PuHuiTi-Regular.otf,字体文件大小6.9M),小程序的包大小又有2M的限制,引入本地字体会超包。
2、加载外部字体
为了解决以上问题,会使用加载外部字体,如下代码片段所示:
@font-face {font-family:'alifont';src:url('https://www.jiandatech.com/test/vape/Alibaba-PuHuiTi-Regular.otf') format('opentype');
}
或者
wx.loadFontFace({family: 'alifont',source: 'url("https://www.jiandatech.com/test/vape/Alibaba-PuHuiTi-Regular.otf")',success: function (e) {console.log(e, '动态加载字体成功')},fail: function (e) {console.log(e, '动态加载字体失败')}
})
缺点:加载会很慢,会有明显的默认字体切换到外部字体的过程,体验教差,特别是字体文件越大,加载的速度越慢,有些小程序页面甚至无法加载成功
3、简化字体文件后再本地引入
针对1和2的问题,我们可以对字体进行抽取,抽出页面中需要用到的字,文字抽取工具Online @font-face generator — Transfonter,如下图所示操作
抽取后字体文件就从原来的6.9M变成了9k,然后就可以采用本地文件引入的方式加载第三方字体,有比较好的交互体验。
附录:@font-face的format属性
format :字体的格式,主要用于浏览器识别,一般有以下几种——truetype,opentype,truetype-aat,embedded-opentype,avg等。
对于@font-face而言,兼容性问题就是各浏览器所能识别的字体格式不尽相同。
TrueType格式(.ttf)
Windows和Mac上常见的字体格式,是一种原始格式,因此它并没有为网页进行优化处理。
浏览器支持:IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+
OpenType格式(.otf)
以TrueType为基础,也是一种原始格式,但提供更多的功能。
浏览器支持:FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+
Web Open Font格式(.woff)
针对网页进行特殊优化,因此是Web字体中最佳格式,它是一个开放的TrueType/OpenType的压缩版,同时支持元数据包的分离。
浏览器支持:IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+
Embedded Open Type格式(.eot)
IE专用字体格式,可以从TrueType格式创建此格式字体。
浏览器支持:IE4+
SVG格式(.svg)
基于SVG字体渲染的格式。
浏览器支持:Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+
为解决兼容性问题,一般引入字体如下代码片段所示:
@font-face {font-family: ‘YourWebFontName’;src: url(‘YourWebFontName.eot’); /* IE9 Compat Modes */src: url(‘YourWebFontName.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */url(‘YourWebFontName.woff’) format(‘woff’), /* Modern Browsers */url(‘YourWebFontName.ttf’) format(‘truetype’), /* Safari, Android, iOS */url(‘YourWebFontName.svg#YourWebFontName’) format(‘svg’); /* Legacy iOS */
}
微信小程序加载第三方字体相关推荐
- 微信小程序 加载外部字体
文章目录 下载字体 加载字体 使用 下载字体 阿里巴巴普惠体 加载字体 ...wx.login({success: (res) => {this.loadBabaFont() // 必须登录后, ...
- php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
- HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法 发布时间:2020-12-31 11:01:19 来源:亿速云 阅读:126 作者:小新 这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
- 微信小程序加载 FengMap地图
实现微信小程序加载FengMap地图,主要通过小程序<web-view>组件的src属性的外链方式加载,如<web-view src="https://fengmap.co ...
- 微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容 一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
- 微信小程序加载百度地图
1:申请百度地图服务的ak,(个人感觉浏览器和小程序类型没区别,甚至浏览器比小程序更好) 2:配置地图服务,微信小程序开发平台,设置开发设置 3:小程序里添加地图服务的js文件bmap-wx.min. ...
- 有效解决微信小程序加载视频[渲染层网络层错误] Failed to load media
问题1,小程序的视频一般都是放在网络上的,没谁能把视频放本地把,所以在小程序视频插件在加载视频的时候,就会出现如下错误:[渲染层网络层错误] Failed to load media wxml加载视频 ...
- 微信小程序 加载中 动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 效果图: 代码: <view class="line"><image s ...
- 微信小游戏加载外部字体
开发微信小游戏的时候,经常会用自定义的字体,而字体库也比较大,如果放在包体里,会占用仅有的20M包体,总启动时间也会变慢.通过外部加载的方式是首先想到的思路.我们用的是LAYA引擎,引擎原生的字体加载 ...
最新文章
- 坑你没商量!盘点Java中最常见的事故现场,你都中过哪些招?
- 如何快速创建程序组_如何快速开发小程序
- MySQL中的时间函数用法集合
- IT项目管理的十六个字心得体会
- dart初始化项目的分析
- xtrabackup备份还原MySQL数据库
- java.net.BindException: Address already in use解决方法
- 论文及文献资料的搜集好去处---子午学术论坛
- 【Codeforces549F】Yura and Developers [单调栈][二分]
- Web存储——Web SQL的使用(一)
- 数学建模大赛考什么计算机基础知识,华为杯数学建模竞赛
- cad二次开发之无法验证该可执行文件的发布者解决方案
- (大数据方向)分布式实验七:HBase数据库搭建以及常用命令
- 卷积神经网络原理简介
- 应广单片机 c语言,应广单片机 MINI-C编程指南.pdf
- RingAllreduce和NCCL
- 从招聘信息来看,小米、爱奇艺、360甚至芒果TV都要做VR了
- 因果卷积(causal)与扩展卷积(dilated)
- 利用Python绘制一朵太阳花
- aspen稳态导出动态_Aspen Dynamic 针对精馏塔的模拟设计过程详解 | APP技术稿第1期...