萌萌新的成长 2023-06-27 19:11 采纳率: 33.3%
浏览 70
已结题

前端移动端适配字体的问题

我有个海报类似低代码的需求,在pc后台组装好后在移动端微信公众号绘制成图片,我的方案是:
1、后台提交的时候,把所有成员的width,height,left,top转化为相对外框的百分数。
2、在移动端直接赋值给每个海报成员的style。
问题:
1、字体在pc端设置fontszie在其盒子可以一行显示,例如手机号fontSize:20px, width:130。在移动端我用rem去适配字体,document.documentElement.style.fontSize = 100 * 海报宽 / pc海报外框。字体设置为0.2rem,最后的结果是手机号一行放不下,有一个数字换行了。移动端字体rem适配,pc可以一行显示,移动换行
2、有两行字的fontSize一样,宽度一样,但是一行居中显示,一行左对齐,通过移动将左对齐的那行文字移动到和居中那行文字对齐,在移动端显示的时候居中显示的文字会向右偏移半个字,也就是说居中之后的间隙比pc大,当我将pc数据设置给移动style的时候把fontSize加上2以及将html的字体+2的时候接近对齐了。居中对齐的两行字在移动端不对齐

我觉得适配方法用rem没问题呀,移动端各成员盒子的百分比和pc一样的,百分比没问题,问题应该出现在字体的渲染上,是不是浏览器渲染字体的差异?pc和移动用的font-family是PINGFANG SC。

  • 写回答

3条回答 默认 最新

  • 梦幻编织者 2023-06-29 10:52
    关注

    可能是由于不同设备上的字体渲染差异导致的问题。不同的浏览器和设备可能会对字体的渲染方式有所不同,从而导致在不同设备上显示的效果有差异。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 7月7日
  • 已采纳回答 6月29日
  • 创建了问题 6月27日

悬赏问题

  • ¥20 python忆阻器数字识别
  • ¥15 无法输出helloworld
  • ¥15 高通uboot 打印ubi init err 22
  • ¥20 PDF元数据中的XMP媒体管理属性
  • ¥15 R语言中lasso回归报错
  • ¥15 网站突然不能访问了,上午还好好的
  • ¥15 有没有dl可以帮弄”我去图书馆”秒选道具和积分
  • ¥15 semrush,SEO,内嵌网站,api
  • ¥15 Stata:为什么reghdfe后的因变量没有被发现识别啊
  • ¥15 振荡电路,ADS仿真