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

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

官网接口文档

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

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

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

加载字体

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

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模式开起来,就可以忽略安全域名的事情)

f8ae071fba20

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;

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562104.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML+CSS+JS实现 ❤️3D奥运五环图形特效❤️

效果演示: 代码目录: 主要代码实现: CSS样式: /*** debug in progress ***/:root {--metal: #ffffff45;--gold: repeating-conic-gradient(#edc800 0deg, #ffe800 15deg, #f3cf00 30deg, #e3b600 45deg, #edc800 60deg) 10% 10%;…

【CSDN】-官方插件推荐懒人必备神器

前言: 插件(Plug-in,又称addin、add-in、addon或add-on,又译外挂)是一种遵循一定规范的应用程序接口编写出来的程序。其只能运行在程序规定的系统平台下(可能同时支持多个平台),而不能脱离指定的平台单独运行。因为插件需要调用原…

HTML+CSS+JS实现 ❤️3D网状球体动画特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; property --color-position {syntax: <length-percentage>;inherits: false;initial-value: 30%; }body {margin: 0;overflow: hidden;--color-position: 30%;background: rad…

怎么读取can报文_【案例】东风天龙“仪表未收到EECU报文”

来呀&#xff01;来呀&#xff01;关注我吧&#xff01;&#xff01; 车辆信息车型东风天龙发动机ISD270 50ECU型号CM2150E尿素泵依米泰克故障现象卡车司机反馈车子跑起来没有力、爬坡无力、仪表上指示灯亮和仪表未收到EECU报文故障排除&#xff1a;检测仪无法进入系…

HTML+CSS+JS实现 ❤️悬挂摇摆的弹珠动画特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; 部分HTML代码 : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http:…

中如何对一个数取余_如何找到自己在一个城市中的定位?

更多资讯&#xff0c;关注微信公众号&#xff1a;好房U购四川。如何找到自己在一个城市中的定位&#xff1f;最近&#xff0c;各大企业都纷纷启动了校招工作。有条件的&#xff0c;全国都在跑&#xff1b;至少&#xff0c;川内都要跑一跑。而毕业生最迷茫的&#xff0c;不过这两…

HTML+CSS+JS实现 ❤️翻页倒计时ui特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; charset "utf-8"; body {background-color: #f2f1ed; }.wrap {position: absolute;bottom: 0;top: 0;left: 0;right: 0;margin: auto;height: 310px; }a {text-decoration…

HTML+CSS+JS实现 ❤️CSS3图片遮罩高亮显示❤️

效果演示&#xff1a; GIF压缩太大、故显示图片查看吧 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; charset "utf-8"; * {margin: 0;padding: 0;list-style: none; }body {background-color: #1B1B1B }img {border: 0;cursor: pointer; }a …

HTML+CSS+JS实现 ❤️响应式图文卡片滑块展示特效❤️

效果演示&#xff1a; 代码目录&#xff1a; 主要代码实现&#xff1a; CSS样式&#xff1a; import url("https://fonts.googleapis.com/css?familyQuicksand:400,500,700&subsetlatin-ext"); html {position: relative;overflow-x: hidden !important; }body…

代码写好了怎么在php里裕兴_8 行代码用Python画一个中国地图

源 / SegmentFaultJupyter首先&#xff0c;第一神器是Jupyter。如果你是第一次使用&#xff0c;可能搞不清楚它的开发者做这么个鬼东西出来干什么&#xff0c;说它是博客系统也不像&#xff0c;说它是web服务器也不像&#xff0c;但它就是有用。因为我们传统的web开发首先想的就…

❤️六W字《计算机基础知识》(三)(建议收藏)❤️

推荐阅读&#xff1a; ❤️《计算机基础知识》&#xff08;一&#xff09;&#xff08;建议收藏&#xff09;❤️ ❤️《计算机基础知识》&#xff08;二&#xff09;&#xff08;建议收藏&#xff09;❤️ ❤️ java项目精品实战案例 ❤️ 101. Internet上&#xff0c;访问We…

源码 状态机_阿里中间件seata源码剖析七:saga模式实现

saga模式是分布式事务中使用比较多的一种模式&#xff0c;他主要应用在长流程的服务&#xff0c;对一个全局事务&#xff0c;如果某个节点抛出了异常&#xff0c;则从这个节点往前依次回滚或补偿事务。今天我们就来看看它的源码实现。状态机初始化在之前的文章《springcloudeur…

❤️六W字《计算机基础知识》(四)(建议收藏)❤️

151. www.cernet.edu.cn 的网址中&#xff0c;可以明确地看出是属于哪一类机构____。 A、教育界 B、政府单位 C、法人组织 D、公司 152. 在Wed网页中指向其他网页的‘指针“称之为____。 A、超链接 B、超文本 C、超媒体 D、多媒体 153. 下列关于URL的解释错误的是____。…

❤️六W字《计算机基础知识》(五)(建议收藏)❤️

客户/服务器模式的局域网&#xff0c;其网络硬件主要包括服务器、工作站、网卡和____。 A、网络拓扑结构 B、计算机 C、传输介质 D、网络协议 和广域网相比&#xff0c;局域网____。 A、有效性好但可靠性差 B、有效性差但可靠性高 C、有效性好可靠性也高 …

唯有自己变得强大_唯有自己变得强大,才能获得有用人脉!

孔子说&#xff1a;不患人之莫知己&#xff0c;求为可知也来源&#xff1a;田俊国课堂对初入职场的人来讲人微言轻&#xff0c;即便使出浑身解数去拓展关系&#xff0c;有权力、有地位的人也未必正眼瞧你。全世界的人都想巴结那些炙手可热的有权力、有资源的名人。问题是&#…

❤️六W字《计算机基础知识》(六)(建议收藏)❤️

FTP是因特网上最早使用的文件传输程序&#xff0c;使用FTP不能____。 A、查看文件 B、文件目录操作 C、下载文件 D、运行文件 WWW是一种建立在Internet上的全球性的、交互的、动态、多平台、分布式的图形信息系统&#xff0c;它的…

android sdk方法隐藏_每个Android开发都必须知道的利器

1.背景介绍在移动端项目功能不断完善和丰富的过程中我们一直在寻找一种可以高效开发且复用率高的开发模式&#xff0c;特别是多应用同步开发、管理。在开发过程中你是否遇到需要发布影子工程&#xff1f;新建项目是否需要耗费大量时间将原有基类、工具类、第三方通用类库逐个 c…

❤️六W字《计算机基础知识》(七)(建议收藏)❤️

在Word中&#xff0c;对某个段落的全部文字进行下列设置&#xff0c;属于段落格式设置的是____。 A、设置为四号字 B、设置为楷体字 C、设置为1.5倍行距 D、设置为4磅字间距 用Word编辑文件时&#xff0c;用户可以设置文件的自动保存时间间隔。如果改变自动保存时…

flash 火狐总是崩溃_win10系统火狐flash插件总是崩溃的解决方法

win10系统火狐flash插件总是崩溃的问题发生概率较高。怎样来处理win10系统火狐flash插件总是崩溃的问题&#xff0c;知道的人估计不多。本站针对win10系统火狐flash插件总是崩溃的情况总结了一些解决的方法。简单说两步&#xff1a;1、在火狐浏览器地址栏在输入&#xff1a;abo…

❤️六W字《计算机基础知识》(八)(建议收藏)❤️

在Word中替换的快捷键是____。 A、CTRLF B、CTRLH C、CTRLS D、CTRLP 在Word中打印的快捷键是____。 A、CTRLF B、CTRLH C、CTRLO D、CTRLP 在Word中打开新文档的快捷键是____。 A、CTRLF B、CTRLH C、CTRLO D、CTRLP 在Word中&#xff0c;___最大。 A、初…