【开发课堂】支付宝小程序里如何使用自定义字体?

简介: 前言在小程序中为确保移动终端的通用性,官方是建议首选 PingFang SC 作为中文字体,以兼顾 Web 版和 Mobile 端。设计中字体大小与使用场景规范如下:在通配样式里字体如下:{font-style: normal;font-weight: normal;font: 0.
在小程序中为确保移动终端的通用性,官方是建议首选 PingFang SC 作为中文字体,以兼顾 Web 版和 Mobile 端。 设计中字体大小与使用场景规范如下:

在通配样式里字体如下:

* {
    font-style: normal;
    font-weight: normal;
    font: 0.3rem/1.5 "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

 

那如果我们需要一些特殊的字体展示怎么办?

 

@font-face

在app.acss中加入如下代码:


@font-face {
  font-family: "My Font";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff") format("woff");
       url("https://mdn.mozillademos.org/files/2468/myfont.ttf") format("opentype");
}


字体文件可以放在项目中也可以使用在线的,不建议放在项目中,因为可能会造成文件过大打包失败,定义完之后就可以在你想使用这个字体的样式里加入这个字体了。

page { font-family: "My Font"}

支付宝小程序官网:https://mini.open.alipay.com

目录
相关文章
|
6月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
6月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?哪个好
小程序的开发方式丰富多元,开发团队可根据自身的技术背景、项目具体需求以及资源状况,灵活挑选最为适宜的开发路径。以下将详细介绍几种主流的小程序开发方式。
618 1
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
726 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
399 0
在线课堂+工具组件小程序uniapp移动端源码
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
443 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
4309 3
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
779 0
微信小程序更新提醒uniapp
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
531 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序

热门文章

最新文章