微信小程序可以加服务器上的字体,微信小程序中自定义字体

微信小程序支持自定义字体开放出来也有段时间，这边整理下使用自定义字体中，容易忽略的一些问题，和简便的全局自定义方式。如果是同时加载两种字体包，先下载下来的会被后下载下来的字体包给覆盖。

官网接口文档

因此字体包有却只能用一种

加载字体

加载字体分两种，一种是局部的字体，比如说是某个页面值需要引入的自定义的字体，只有这个页面才需要用到，那就直接官方提供的例子。

wx.loadFontFace({

family: 'Bitstream Vera Serif Bold',

source: 'url("https://sungd.github.io/Pacifico.ttf")',

success: (res) => { console.log(' load font success ', res); },

fail: (res) => { console.log(' load font fail ', res); },

})

加载全局字体，要在app.js的onLaunch方法里面，记得global需要设置为true，这些注意看下官方文档，应该是不难。

wx.loadFontFace({

global: true,

family: 'HYSSEJ',

source: 'url("https://sungd.github.io/Pacifico.ttf")',

success: (res) => { console.log(' load font success ', res); },

fail: (res) => { console.log(' load font fail ', res); },

});

设置安全下载域名地址

进入小程序微信后->开发->开发设置。讲服务器的下载地址配置到后台里面，不然下载会失败。(TIPS 如果只是单纯自己做测试的话，把小程序的debug模式开起来，就可以忽略安全域名的事情)

image.png

设置全局样式

在app.wxss 里面，设置全局的命名。

page {

--Nomal-Font-: 'HYSSEJ';

background: white;

}

.container {

font-family: var(--Nomal-Font-) !important;

overflow: hidden;

}

组件需要用的字体的地方，用如下两种方法都可以。

font-family: 'HYSSEJ' !important;

font-family: var(--Nomal-Font-) !important;

项目中其实很多时候我们并不需要用到所有的字体，可以单独做下字体包。自定义字体包

微信小程序可以加服务器上的字体,微信小程序中自定义字体相关推荐

微信发照片怎么在服务器上删除,为什么微信里面有的照片，相册里面没有，怎么删除...-卓优商学问答...
推荐回答不会,朋友圈里面的人是看不见的了.朋友圈发的消息是保存在微信服务器上面的.只有发的人才能删除.删除之后,好友里朋友圈也看不到的,包括几天前甚至更早前的,也会从好友的朋友圈中删除.多张图片上传 ...
程序布置到服务器上速度慢_百战程序员python面试题总结---高级语法（4）
4.1 简述 TCP 和 UDP 的区别以及优缺点? UDP 是面向无连接的通讯协议,UDP 数据包括目的端口号和源端口号信息. 优点:UDP 速度快.操作简单.要求系统资源较少,由于通讯不需要连接, ...
微信朋友圈会在服务器上保留多久,微信朋友圈设置多久可见，暴露了你的为人...
随着社会的逐渐发展,如今人与人的交往,早已从线下发展到了线上.而线上我们接触最多的平台,便是微信朋友圈. 对于微信朋友圈,曾有人这么说道,一个人的微信就是一个人的镜子,一个人的朋友圈就是一个人的内在反 ...
微信小程序同一个登录按钮上触发获取微信用户信息和电话号码
微信小程序同一个登录按钮上触发获取微信用户信息和电话号码因为微信小程序获取用户信息getuserinfo方法和获取电话号码open-type="getPhoneNumber" @ ...
您试图在此 Web 服务器上访问的 Web 应用程序当前不可用。
您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的"刷新"按钮重试您的请求.管理员注意事项: 详述此特定请求失败原因的错误信息可在 Web ...
服务器应用程序不可用,试图在此 Web 服务器上访问的 Web 应用程序当前不可用
1.遇到这种情况请首先确认你的程序是否放在C盘下,如果是请放到其他盘.因为C盘一般是不允许访问的,所以会出现这种没有权限的情况.不过也可以改变文件夹的权限为everyone权限. 2.如果还未好,请再 ...
服务器应用程序不可用您试图在此 Web 服务器上访问的 Web 应用程序当前不可用。请点击 Web 浏览器中的“刷...
错误提示: 服务器应用程序不可用您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的"刷新"按钮重试您的请求. 管理员注意事项:详述此特定请求 ...
您试图在此 Web 服务器上访问的 Web 应用程序当前不可用
错误提示: 服务器应用程序不可用您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的"刷新"按钮重试您的请求. 管理员注意事项: 详述此特定 ...
如何将C 项目部署到云服务器上,如何将C 应用程序放在云服务器上
如何将C 应用程序放在云服务器上内容精选换一换 ServiceStage是一个应用托管和微服务管理平台,可以帮助企业简化部署.监控.运维和治理等应用生命周期管理工作.面向企业提供微服务.移动和We ...

微信小程序可以加服务器上的字体,微信小程序中自定义字体

微信小程序可以加服务器上的字体,微信小程序中自定义字体相关推荐

最新文章

热门文章