微信小程序 - 引入第三方字体（使用网络字体）

前言

因项目需求，需要一套第三方字体，如下图所示效果（YC MEMBERSHIP SEASON CARD 和数字0）：

实现

1、引入一套第三方字体（如上图所示的第三方字体）。

2、在 App.vue 文件中写入自定义字体样式。

3、调用。

当然，也可以直接使用微信API wx.loadFontFace , 具体查看官方示例文档。

具体演示代码

App.vue文件中


<style>@font-face {font-family:"PuHuiTi-Bold";src: url('https://www.baidu.com/api/artCenter/static/font/PuHuiTi-Bold.ttf');}.font-num{font-family:KronaOne}
</style>

view.vue中引用

<view><text class="font-num">AC MEMBERSHIP SEASON CARD</text>
</view>

问题

1、微信小程序中网络字体的地址必须是https。若是http则只能在微信开发工具中生效，正式发布后手机上预览不生效。

微信小程序 - 引入第三方字体（使用网络字体）相关推荐

微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）
微信小程序学习11:iconfont 网络字体图标使用(阿里巴巴) 使用方法 [1] 是直接下载图片,使用<image src="/static/images/v2.jpg" ...
uniapp微信小程序引入第三方广告插件
以Slime广告插件为例. 一.微信小程序后台申请相关插件二.manifest.json文件 "mp-weixin" : {"appid" : "* ...
uniapp微信小程序引入第三方字体库
前言最近在使用第三方字体库,然后发现使用uniapp做小程序时引入第三方字体库有着挺多坑,收集了一些网上的资料,我大概整理下,防止以后继续踩坑这是uniapp官网的引入字体图标方法字体引入从c ...
微信小程序 - 引入第三方字体（使用网络字体艺术字）
前言有时候因项目需求,可能需要一套第三方艺术字体,就像如图所示效果(店内自取 / 外卖): 实现当然,也可以直接使用微信 API wx.loadFontFace ,具体请查看官方示例文档. 引入 ...
微信小程序——引入第三方图标、图标组件
这里以Iconfont 为例 iconfont-阿里巴巴矢量图标库一.直接引用创建一个图标项目,名字自定义,我的是fontIcon, 注意项目的前缀和font family两处自己定义的名字 ...
微信小程序引入外部字体
微信小程序引入外部字体前言 wx.loadFontFace Base64 尾巴前言微信小程序由于打包体积限制,不支持直接引入字体文件.但是如果我们想引入自定义的字体该怎么操作了?接下来我们介绍两 ...
微信小程序使用第三方库（第三方js）问题
比如很多人会有这样的问题: 小程序怎样引用第三方js呢? 第三方js是封装好的类库想引用进来实例化使用这个帖子就综合一下所有相关的知识,做一个整合,以便大家能够集中了了解:我觉得这个还是应该让大家 ...
微信小程序引入骨架屏组件
微信小程序引入骨架屏组件参考地址:https://github.com/cytle/ma-skeleton.git 1.克隆项目 2.把项目里的组件skeleton文件复制到自己的项目里 3.复制& ...
小程序PHP字体,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...

微信小程序 - 引入第三方字体（使用网络字体）

前言

实现

具体演示代码

问题

微信小程序 - 引入第三方字体（使用网络字体）相关推荐

最新文章

热门文章