小程序引入字体注意点

小程序引入字体有2种方式，
第一种是通过 @font-face ，第二种是通过小程序提供的方法 loadFontFace。

引入的方式不同但是需要注意的地方大致形同：

官方提出了以下的注意事项
字体文件返回的 contet-type 参考 font，格式不正确时会解析失败。
字体链接必须是https（ios不支持http)
字体链接必须是同源下的，或开启了cors支持，小程序的域名是servicewechat.com
canvas等原生组件不支持使用接口添加的字体
工具里提示 Faild to load font可以忽略
‘2.10.0’ 以前仅在调用页面生效。

总的来说

微信小程序端只支持网络字体，字体链接必须是https，所以本地引入的方法是行不通的。（想想也是。字体包动不动几个M，很难编译）
引入中文字体，体积过大时会发生错误
工具里提示 Faild to load font可以忽略（不要看到开发者工具里提示就以为有问题）

这里记录几种解决字体引入的几种方式：

1. 字体转base64

打开字体在线转换工具 https://transfonter.org/
将下载解压后的css 文件打开，复制黏贴就好了
需要注意的是，这里的字体最大可以上传 10M

2. 第二种就是官方提供的一种方法，抽离出部分中文，减少体积，或者用图片代替。
图片代替我们都知道，这里记录一下抽离文字，对于抽离文字，我们需要利用一个工具
Fontmin

下载安装包后解压软件
在左侧输入我们能够使用到的文字，点击生成，就会得到一个新的字体库，这里面包括新的ttf 文件和 css引入文件。
最后只要看需要，不管是引入base64 还是引入新的 ttf 字体都是可以的。

3. 考虑插件
因为我使用的uni-app 这种多端开发，所以插件库里会有各种插件，这里官方推荐了一种字体引入的插件https://ext.dcloud.net.cn/plugin?id=954
（因为我还没有使用过这个插件，所以就不记录了，有兴趣的可以去看看）

以上

小程序引入字体注意点相关推荐

uniapp微信小程序引入字体
案例演示小程序有些字体不支持,我们如何引入,步骤如下: 第一步:下载需要的字体第二步:如果只是用其中的数字,则需要使用工具单独再摘出来,这样文件会很小. 生成新的字体文件,此文件大小很小. 第三步 ...
微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
小程序引入字体集方式
一般情况下为了页面好看,有些会设计会采用一些特殊的字体进行设计,这时候直接设置font-family:"该字体类型"; 就会出现没有效果,因为css里面没有这些字体,这时就要我们自 ...
基于uni-app的微信小程序引入字体文件
上传字体文件至服务器或者oss(也可以引入第三方,需支持nginx跨域) 引入字体文件(两种方法) css引入 @font-face {font-family: 'fontFamily';src: u ...
微信小程序引入外部字体
微信小程序引入外部字体前言 wx.loadFontFace Base64 尾巴前言微信小程序由于打包体积限制,不支持直接引入字体文件.但是如果我们想引入自定义的字体该怎么操作了?接下来我们介绍两 ...
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
小程序引入icon的三种方式
小程序引入icon的三种方式(原生图标.WeUI图标组件.iconfont图标) 原生图标小程序里原生图标是通过icon标签来引入的: <icon type="success&quo ...
微信小程序设置字体无效_微信小程序自定义字体及自定义图标问题说明
自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关讨论: Q:小程序开发时能否使用我们自定义 ...
小程序引入百度地图与uni.getLocation的使用
一.小程序引入百度地图 1.当你不需要引入整个地图展示,只需要引入某些功能的时候,可以直接调用服务端api. 2.访问百度地图的任何api都需要密钥. 流程: 3.在小程序端配置请求合法域名:http ...

小程序引入字体注意点

以上

小程序引入字体注意点相关推荐

最新文章

热门文章