如何在微信小程序内使用外部字体

简介: 如何在微信小程序内使用外部字体

通过 font-face 使用外部字体

首先通过 css 引入地址,然后在需要使用该字体时使用定义的 font-family 即可。

 

@font-face {
  font-family: "kaiti";
  src: url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf");
}
.test {
  font-family: "kaiti";
}

这里的 url 要用 CDN 地址,本地地址无效。

通过 wx.loadFontFace 使用外部字体

这里需要在 app.js 中将需要使用的字体引入,然后通过 font-family 使用改字体。

 

wx.loadFontFace({
  family: "Bitstream",
  source:
    'url("https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf")',
  success: (msg) => {
    console.log(msg);
  },
});

 

.test {
  font-family: "Bitstream";
}

 

更多内容 请看前端面试题库

WX搜索 【MST题库】小程序查看

相关文章
|
小程序 JavaScript
小程序鼠标点击按钮(改变背景颜色字体)
小程序鼠标点击按钮(改变背景颜色字体)
107 0
|
8月前
|
小程序 Android开发 iOS开发
mPaaS问题之Ios调小程序报错如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
mPaaS问题之Ios调小程序报错如何解决
|
小程序 前端开发
前端开发小程序时使用自定义字体
不管在pc端还是移动端,开发一些图表统计或者数字显示的时候,往往UI效果里需要一些自定义字体来增加显示效果和美观度,各个系统提供的系统字体很难满足需求
201 1
|
JavaScript 小程序
小程序通过js控制页面字体颜色属性
小程序通过js控制页面字体颜色属性
99 0
【开发课堂】支付宝小程序里如何使用自定义字体?
前言在小程序中为确保移动终端的通用性,官方是建议首选 PingFang SC 作为中文字体,以兼顾 Web 版和 Mobile 端。设计中字体大小与使用场景规范如下:在通配样式里字体如下:{font-style: normal;font-weight: normal;font: 0.
4024 11
【开发课堂】支付宝小程序里如何使用自定义字体?
|
4天前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
45 0
在线课堂+工具组件小程序uniapp移动端源码
|
3月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
421 3
|
3月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
65 0
微信小程序更新提醒uniapp
|
5月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
125 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

热门文章

最新文章