微信小程序中使用自定义字体的实现与体验优化

目录
  • 前言
  • 技术难点
    • 1.微信限制
    • 2.机型兼容
  • 文档说明
  • 体验优化
  • 附微信小程序设置全局字体
  • 结尾

前言

前段时间，甲方爸爸提出一个比较个性化的需要：要在他们的小程序中使用他们购买过版权的特殊字体。好家伙，我瞬间万马奔腾，我三十米的大刀呢？奈何甲方爸爸就是上帝，甲方爸爸想到的我们要尽量是实现，甲方爸爸没有想到的我们要提前实现。

怎么实现呢？

开撸之前，先研究一下，探索一下技术方案。

技术难点

1. 微信限制

大家开发过微信小程序的应该都知道，微信平台对小程序的体积大小有限制：

  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M

出于这个限制，字体肯定没有办法放到本地资源中了，那就只有一条出路，将资源放到第三方cdn资源中。但是使用cdn资源有一点需要注意：需要配置合法域名。

2. 机型兼容

经过初步测试，发现使用自定义字体在不同的机型上的兼容性有所出入，尤其是安卓手机。经过一定数量的测试得出一个粗浅的结论：ttf字体在iOS手机上兼容性比较好，在安卓机上会出现特殊机型失效的问题。

说到这里，我就忍不住吐槽两句，这段时间进行机型适配的时候，华为鸿蒙和苹果xs真的是折磨的我死去活来的，经常出现一些跟大众机型与众不同的问题。

经过一番查找，发现了两种解决方案：

  • 使用 css 样式，引入多种字体类型，包含.ttf 和 .woff 类型
  • 使用微信官方api —— wx.loadFontFace

经过慎重考虑，我们最终采用了第二种方案。

文档说明

字体文件返回的 contet-type 参考 font，格式不正确时会解析失败。

字体链接必须是https（ios不支持http)

字体链接必须是同源下的，或开启了cors支持，小程序的域名是servicewechat.com

工具里提示 Faild to load font可以忽略

'2.10.0' 以前仅在调用页面生效。

重要的事情再三强调：字体链接必须是同源下的，或开启了cors支持。

我当时就是由于使用第三方cdn资源，但是没有配置cors支持，导致安卓手机上一直不生效。而且比较难排查的另一个原因是，模拟器上和苹果手机上没有配置cors支持，但是依然生效，很奇怪。

体验优化

虽然 wx.loadFontFace 是官方提供的api，但是有个体验问题很是折磨：wx.loadFontFace 每次进入页面 都会重新下载，而且会出现字体闪动。

字体闪动的问题相对来说比较容易体验，在字体加载完成之前，添加了loading效果，而且在进入入口的时候第一时间就开始加载字体。

每次都加载的问题，通过惰性模式缓解了一下，但是没有完全解决（由于cdn资源会进行缓存，所以考虑通过判断缓存资源是否存在来判断是否需要加载字体，但是很遗憾，还没有实现），直接上一下现在的搓代码吧。

    let loadStatus = false;
    if (!loadStatus) {
        ```
    wx.loadFontFace({
      family: '...',
      source: 'url("...")',
      success() {
          loadStatus = ture;
      }
    });

附微信小程序设置全局字体

微信小程序设置全局css，需要在app.wxss文件中设置page的样式

page {
  font-family:"PingFangSC-Thin";
   font-size:32rpx;          /*微信小程序中，使用rpx做单位*/
}

结尾

到此这篇关于微信小程序中使用自定义字体的文章就介绍到这了,更多相关微信小程序使用自定义字体内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序使用字体图标的方法

    微信小程序使用字体图标的方法

    项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为: 搜索"购物车"图标--->点击"添加入库"-->点击购物车进入购物车-->点击下载代码按钮. 点击下载代码,将得到名为download.zip的压缩包,解压

  • 在webstorm开发微信小程序之使用阿里自定义字体图标的方法

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. 3.在需要使用到图标的页面导入该wxss文件.例如: 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 微信小程序 如何引入外部字体库iconfont的图标

    如何引入外部字体库iconfont的图标,具体如下 直接使用阿里巴巴的网络路径 选择iconfont图标 官网:阿里巴巴矢量字体库 步骤:阿里巴巴字体库使用方法 全局引入app.wxss @font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot'); src: url('//at.alicdn.com/t/fo

  • 微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

    微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮修改字体颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:k

  • 微信小程序在text文本实现多种字体样式

    微信小程序在text文本实现多种字体样式

    这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 微信小程序比较特别,它的wxml只允许用自己家的标签,像那些span.div什么的统统不可以用,那如何在text文本加入不同的样式呢,在html里面我们可以添加一个span,再给那些span添加不同的class或者style就可以了,但小程序不可以,在text里面只允许在加入text,不可以加view等东西,所以我们可以按照它提供的,再加一

  • 微信小程序中使用自定义字体的实现与体验优化

    微信小程序中使用自定义字体的实现与体验优化

    目录 前言 技术难点 1.微信限制 2.机型兼容 文档说明 体验优化 附微信小程序设置全局字体 结尾 前言 前段时间,甲方爸爸提出一个比较个性化的需要:要在他们的小程序中使用他们购买过版权的特殊字体.好家伙,我瞬间万马奔腾,我三十米的大刀呢?奈何甲方爸爸就是上帝,甲方爸爸想到的我们要尽量是实现,甲方爸爸没有想到的我们要提前实现. 怎么实现呢? 开撸之前,先研究一下,探索一下技术方案. 技术难点 1. 微信限制 大家开发过微信小程序的应该都知道,微信平台对小程序的体积大小有限制: 整个小程序所有分

  • 微信小程序中使用自定义图标（阿里icon）的方法

    微信小程序中使用自定义图标（阿里icon）的方法

    weui提供的图标比较少,有时我们需要更多的图标,可以使用以下方法自定义图标库: 1,到阿里巴巴矢量图标库(http://iconfont.cn/)生成自己的字体图标,下载代码,解压,打开iconfont.css 2,在wxss文件中引用字体 <style type="less"> @font-face { font-family: 'iconfont'; src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAI

  • 微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案

    微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案

    效果图展示: 实现方法: 在video中添加一个cover-view,在cover-view写两个cover-image,一个用来存储封面图.一个用来存放播放按钮,同级写一个cover-view用来完成封面上的文字,设置绝对定位,水平垂直居中,在播放按钮上添加点击事件,点击之后隐藏cover-view,最后在监听视频结束事件,重新填充封面跟播放按钮就可以了. 代码: <video id="myVideo" src="{{videoSrc}}" enable-d

  • 微信小程序中如何实现动态改变SVG颜色和尺寸

    微信小程序中如何实现动态改变SVG颜色和尺寸

    目录 前言 1. 创建一个微信小程序项目,准备好SVG素材 2. 封装修改svg颜色的工厂函数 3. 封装一个自定义组件,方便使用svg图标 4. 注册组件,使用 结语 总结 前言 最近在做项目的时候总是因为组件库的图标无法满足需求而烦恼,而每次需要新的图标又要去找字体图标.生成新的css代码而苦恼. 所以想到用svg来代替,体积也小,主要就是方便一点,不用每次还重新生成代码.但是一个最重要的问题也随之出现,小程序中不支持svg代码....但是也有曲线救国的方式,image可以显示svg,还好没

  • 微信小程序中添加客服按钮contact-button功能

    小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义 大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q

  • 微信小程序实现的自定义分享功能示例

    本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮 用户点击分享按钮的时候会调用 此事件需要 return 一个 Object,用于自定义分享内容 示例代码: Page({ onShareAppMessag

  • 微信小程序中换行空格（多个空格）写法详解

    在小程序中HTML的网页实体无法正常使用,小程序中的写法为:  一.空格,换行 <text>你好!\t七月流火啊!\n我在下一行</text> \t 空格( 多个只会显示一个空格) \n 换行 二.连续空格 <view> <text space="ensp">你好 啊 哈哈哈(空格是中文字符一半大小)</text> </view> <view> <text space="emsp&quo

  • 微信小程序中遇到的iOS兼容性问题小结

    前言 随着小程序的热度不减,更多的电商大佬来时使用小程序,在微信小程序开发中,经常会遇到一些兼容性的问题,下面这篇文章就记录下在微信小程序中遇到的一些兼容性问题,iOS兼容性 1.iOS中input的placeholder属性字体不居中 对placeholder设置line-height及font-size 对input设置高度 2.iOS中滚动卡顿 设置-webkit-overflow-scrolling:touch; 3.微信小程序中解决iOS中new Date() 时间格式不兼容 在实现倒

  • 微信小程序系列之自定义顶部导航功能

    具备基础 vue框架:vue官方文档 mpvue框架:mpvue官方文档 全局配置 •找到全局的app.json文件,在配置中添加如下内容: "navigationStyle": "custom" "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", &q

  • 微信小程序中button去除默认的边框实例代码

    微信小程序中button去除默认的边框的实现方法如下所示: button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:border-box; font-size:18px; text-align:center; text-decoration:none; line-height:2.5555555

随机推荐