首页 > 其他分享 >混合开发H5页面的数字字体在IOS 安卓上显示不一样

混合开发H5页面的数字字体在IOS 安卓上显示不一样

时间:2024-07-04 09:32:40浏览次数:15  
标签:数字 安卓 IOS 默认 H5 安卓上 字体

背景

做完H5页面, UI走查的时候,发现IOS 下数字的字体不对,安卓下是正常的,于是就查了下原因,以此做个记录

看下实际效果

左边是安卓,右边是IOS的效果,明显看出来数字的字体是不一样的

安卓、IOS 字体不一致的原因

安卓IOS系统中,如果没有专门设置字体的话,会使用默认的字体,汉字,英文,数字 在两个系统中默认字体如下

IOS 安卓
中文汉字 Heiti SC Droidsansfallback
英文字母 Helvetica Droid Sans
数字 HelveticaNeue Droid Sans

汉字和字母的默认字体差异不大,所以一般情况下就算没有设置字体,看着几乎是一样的,就只有数字的默认字体差异最大

最简单的方式 就是给数字的直接父元素 添加字体设置 font-family: PingFang SC

<style>
.num {
  font-family: PingFang SC
}
</style>
<div class="num">数字12345</div>

为啥是直接父元素,而不是给全局html设置字体?

因为IOS默认字体的规则会覆盖全局html的字体规则, 当然你在全局设置 并且加上!important 的话也行,但是不推荐,万一别的地方用到其他字体了,不好处理

原文链接 https://www.cnblogs.com/yalong/p/18009483

标签:数字,安卓,IOS,默认,H5,安卓上,字体
From: https://www.cnblogs.com/yalong/p/18009483

相关文章

  • VMware ESXi 8.0U3 macOS Unlocker & OEM BIOS Huawei (华为) FusionServer 定制版
    VMwareESXi8.0U3macOSUnlocker&OEMBIOSHuawei(华为)FusionServer定制版ESXi8.0U3标准版,Dell(戴尔)、HPE(慧与)、Lenovo(联想)、Inspur(浪潮)、Cisco(思科)、Hitachi(日立)、Fujitsu(富士通)、NEC(日电)、Huawei(华为)、xFusion(超聚变)OEM定制版请访问......
  • uniapp h5部署二级目录
    uniapp部署二级目录在uniapp中,如果你想要将应用部署到二级目录中,你需要在manifest.json文件中配置相应的二级目录路径。以下是一个配置示例,假设你想要将应用部署到域名的subdir二级目录下:打开manifest.json文件。找到h5节点。设置router的base路径为你的二级......
  • Vue3全局配置Axios并解决跨域请求问题示例详解
    背景对于前后端分离项目,前端和后端端口不能重复,否则会导致前端或者后端服务起不来。例如前端访问地址为: http://localhost:8080/ ,后端访问地址为 http://localhost:8081/ 。后端写好Controller,当用Axios访问该接口时,将会报错:AccesstoXMLHttpRequestat'http://localh......
  • 如何从服务器bios清除磁盘数据
    解决问题并查找根源:一、服务空间不足,服务无法部署或服务不可用二、清理了大日志文件,但是空间还是不足1.首先是通过df-h命令查看磁盘的使用情况,主演是看Avail(可用)和Use(已用)的占用百分比,如下所示:df-hFilesystemSizeUsedAvailUse%Mountedon/dev/mapper/VolGroup-lv_r......
  • VMware ESXi 8.0U3 macOS Unlocker & OEM BIOS ConnectX-3 网卡定制版 (集成驱动版)
    VMwareESXi8.0U3macOSUnlocker&OEMBIOSConnectX-3网卡定制版(集成驱动版)VMwareESXi8.0U3macOSUnlocker&OEMBIOS集成网卡驱动和NVMe驱动(集成驱动版)发布ESXi8.0U3集成驱动版,在个人电脑上运行企业级工作负载请访问原文链接:https://sysin.org/blog/vmwa......
  • CH592 CH582 CH573添加广播回调函数
    /**********************************************************************@fnBLE_AdvertiseEventCB**@briefCallbackfromadvertiseover**@paramNone**@returnnone*/voidBLE_AdvertiseEventCB(uint32_ttimeUs){GPIOA_ResetB......
  • AMD R2000 Bilby 单板 Inside BIOS 串口重定向的使用
    AMD嵌入式X86处理器的R2000系列使用Bilby开发板。开发板使用InsideBIOS。......
  • 服务器bios恢复出厂设置,设置u盘启动
    要让电脑开机从U盘启动,就像用光盘给电脑装系统要让电脑从光盘启动一样,必须在电脑开机时进行设置,因为电脑主板的差异所以设置的方法也是各不相同,bios设置u盘启动该怎么做。bios设置,选择启动项的键都是F12,开机的时候按F12键会出现启动项选择界面,从中选择从什么介质启动,一般可供选......
  • BIOS设置与系统分区
                                                   ......
  • h5项目微信分享(以卡片形式,带标题和图片)
    1.注册成为微信开放平台开发者首先,你需要有一个微信公众平台的账号,并且你的小程序或公众号需要获得网页授权能力。这一步骤涉及在微信开放平台注册并创建小程序或公众号,获取AppID和AppSecret。2.配置安全域名在微信公众平台的小程序或公众号后台,你需要将你的H5项目的域名......