uni-app 使用等宽字体对齐数字宽度

0️⃣ 问题 ❓

更新时间：2021-02-28 15:55:18

2021-02-28 15:55:18

Nvue 中使用 css 的 font-family 属性值不能使用引号。

Nvue 需要下载 ttf 格式的字体进行 base64 编码。

开发的过程中遇到数字显示列表，发现同样的数字数宽度不一。android 不会有， web 浏览器和 ios 会出现。

之前也有遇到过，也解决了，写过文章记录在网站中使用谷歌“ROBOTO”字体（解决 ios 数字 1 和 0 大小不等宽问题），不过文章没有明确的代码，也比较潦草，这次加上代码。

本次解决方案不仅仅适用于 uni-app，包括 Nvue, 还有普通的 vue,react 项目都能用。知道原理了，移植解决方案很简单。

原因：默认或者使用了非等宽字体，安卓默认的字体 Roboto 就是等宽的，啥叫非等宽，就是字体的宽度不一样，比如 1 和 2 在显示的时候所占用的宽度不一样。（中文字体默认就是等宽的）

一般带了 mono 标识的都是等宽的字体。

解决后：

看起来舒服了很多

开发日记(01) - uni-app 使用等宽字体对齐数字宽度相关推荐

个人博客开发日记01
准备工作技术组合工具与环境需求分析跟着B站up主的视频搭建个人博客,计划暂时完全照搬,后续进行前后端分离. 技术组合后端:Spring Boot + JPA + thymeleaf模板数据 ...
我的uni框架APP（共享充电投放）独立开发日记第二天
我的uni框架APP(共享充电投放)独立开发日记 APP开发第二天(UI实现到创作) Tap_Bar: 首页充电榜邀请赚钱项目说明物品我的会员资料下载APP 我的收益我要提现我的下级 ...
我的uni框架APP（共享充电投放）独立开发日记第一天
我的uni框架APP(共享充电投放)独立开发日记项目说明及介绍练习阶段 APP开发第一天(设计和功能归类) 首页物品我的项目说明及介绍在前不久写完了第一个微信小程序之后,开始补课VUE,就 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
搭建开发环境——Python实战：Web App 开发 Day 01
1. 背景介绍 Python 的功能十分强大,因其强大而丰富的开源包,让其可以实现高级爬虫,可以实现机器学习算法,可以应用到深度学习中,也可以开发Web App 项目. 本次的Python实战就是We ...
萌新一手包App前后端开发日记（一）
从事Android移动端也有些日子了,还记得一开始选择这份工作,是憧憬着有朝一日能让亲朋好友用上自己开发的软件,但日子久了才发现,并不是所有的公司,所有的项目的适用群体都是"亲朋好友&quo ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
背单词App开发日记5(上)
2015.07.28 今天是我阳历生日,先自己庆祝一下!哈哈. 为什么总是写博客的时间和发博客的时间不一样那?这我也没办法啊.....因为每天花在这上面的时间比较少,所以做完一项的时间很长(回家全是事 ...
小白 0-1 学习 app 开发，从配置到 hello world
第一步,注册选择开发工具有一些教程上会说先创建应用,再选择工具,是使用的控制台创建的 APICloud Studio3 APP开发工具-专业多端开发工具 APICloud Studio 3 工具的 ...
背单词App开发日记5(下)
2015.08.06 自上次实现可用控件显示不同的单词之后,经过自己的调试我终于实现了显示单词的前提工作----读取进度和今日计划.下面分别记录一下: 1.读取进度和今日计划既然是背单词软件必然需要 ...

开发日记(01) - uni-app 使用等宽字体对齐数字宽度

uni-app 使用等宽字体对齐数字宽度

0️⃣ 问题 ❓

开发日记(01) - uni-app 使用等宽字体对齐数字宽度相关推荐

最新文章

热门文章