uniapp使用第三方字体

一、CSS远程加载

App.vue

@font-face{
font-family: font-name;
src:url('https://XXXXX/font.ttf');
}
在微信小程序的开发者工具里面有用，但是（安卓）真机调试没有用

二、引入本地字体，太大小程序会无法上传---font.ttf文件转换成base64格式

文件转换地址--transfonter

使用
<style lang="scss">
/*每个页面公共css */
   @import "@/static/zt.css";
   .YouSheBiaoTiHei{
       font-family: 'YouSheBiaoTiHei';
   }
</style>

三、使用API uni.loadFontFace()

App.vue

onLaunch: function () {uni.loadFontFace({global: true, // 是否全局生效family: 'font-name', // 定义的字体名称source: 'url("https://xxx.com/font/font-name.ttf")', // 字体资源的地址。建议格式为 TTF 和 WOFF，WOFF2 在低版本的iOS上会不兼容。success() {console.log('成功的回调函数')},fail(){console.log('失败的回调函数')},complete(){console.log('接口调用结束的回调函数（调用成功、失败都会执行）')}})
},

API说明：uni.loadFontFace(Object object) | uni-app官网，微信小程序的开发文档也有对应的方法，需要特别注意的是：

另外还有注意的是在这个讨论中wx.loadFontFace加载字体,安卓真机fail,模拟器和ios真机正常 | 微信开放社区，小程序技术专员提到的

运用字体网站下载-字体天下

使用
.font-name {font-family: font-name;
}

uniapp使用第三方字体相关推荐

uniapp使用第三方字体(比如宋体楷体等非图标)已解决，字体包过大（提取字体）
uniapp使用第三方字体(比如宋体楷体等非图标)已解决 2021 1 14 最新方案直接这样就可以了 @font-face {font-family: test;font-weight: norm ...
uniapp微信小程序引入第三方字体库
前言最近在使用第三方字体库,然后发现使用uniapp做小程序时引入第三方字体库有着挺多坑,收集了一些网上的资料,我大概整理下,防止以后继续踩坑这是uniapp官网的引入字体图标方法字体引入从c ...
uni-app老年模式字体设置思路
uni-app老年模式字体设置一.实现原理借助插件,将项目中的字体单位rpx换成rem,结合官网提供的page-meta属性,通过控制根字体大小,达到调节字体大小的要求. em:font size ...
win10 uwp 打包第三方字体到应用
原文:win10 uwp 打包第三方字体到应用有时候我们会把一些特殊字体打包到软件,因为如果找不到我们的字体会变为默认,现在很多字体图标我们用得好,有时候我们的应用会用很漂亮的字体,需要我们自己打包 ...
红帽linux怎么装文件夹,红帽linux怎么安装第三方字体?
许多用过 Windows 再去使用红帽 linux 的朋友一定会有这样的感受,就是红帽 linux 的字体相比之下实在是相形见绌.当然,要想红帽 linux 看起来更美观一些,最好的办法莫过于将自己喜 ...
js加载第三方字体,检测加载完成事件
最近在做一个项目涉及到加载第三方字体的问题,首批需要支持一百多种字体,然后首先想到的就是@fant-face,但是在实际应用中发现无法满足当前需求. 目前的项目是用canvas的一个开源库fabric ...
微信小程序 - 引入第三方字体（使用网络字体艺术字）
前言有时候因项目需求,可能需要一套第三方艺术字体,就像如图所示效果(店内自取 / 外卖): 实现当然,也可以直接使用微信 API wx.loadFontFace ,具体请查看官方示例文档. 引入 ...
在 uni-app 中使用字体图标
在 uni-app 中使用字体图标下载iconfont字体图标进入 iconfont 官网本地下载图标文件压缩包解压出来在uni-app 项目static 下新建 fonts 文件夹 ...
uni-app 打开第三方程序
我们在开发 App 应用中,经常会遇到打开第三方程序的场景,在 uni-app 中我们应该如何做?相信不少刚接触的同学都会有此疑问.其实在 uni-app 中实现这个功能是非常简单的. 我们使用 5+ ...

uniapp使用第三方字体

uniapp使用第三方字体相关推荐

最新文章

热门文章