收藏
评论

关于微信安卓端网页字体适配的通知官方

为了提供给用户更好的阅读体验,微信安卓版 7.0.10 版本起,网页的字体会跟随微信设置里的字体大小更改而变化。

若调整字体变大或变小后,部分未适配网页的排版会出现显示错乱,建议未进行适配的开发者尽快完成对“ 字体大小” 的适配。


查看网页在字体不同大小下展示效果的方法:

   方法1:"设置">"通用">“字体大小">进行字体大小修改后查看对应网页显示效果。

   方法2:在微信内访问对应网页右上角”…">底部菜单栏选择调整字体">进行字体大小修改后查看对应网页显示效果。

   另外,对于现有的显示问题,我们提供以下方案让开发者临时将字体还原标准大小。同时,开发者可以在页面中提示用户在右上角”…”更多菜单中修改字体到合适的大小。


下列方案可以将字体还原标准大小,但我们仍然建议后续做字体适配来提高用户的阅读体验。  『字体还原标准大小』方案:

     我们提供了一个  JSAPI 用于设置字体大小,只需将字体大小等级设置为 2 (标准)即可,代码示例如下:

document.addEventListener("WeixinJSBridgeReady", function () {
  WeixinJSBridge.invoke("setFontSizeCallback", {
    fontSize: '2'
  });
}, false);


此外,若页面是用 rem 单位进行排版的(目前该做法更容易导致页面不可用),可以反向重置 font-size 的数值达到还原字体标准大小的目的,此方法在效果上也比较理想。代码示例如下:

// 以下代码思路来源网络。同时代码放在 body 标签开头位置效果最佳
var $dom = document.createElement('div');
$dom.style = 'font-size: 10px';
document.body.appendChild($dom);

// 计算出放大后的字体
var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size'));
document.body.appendChild($dom);

// 计算原字体和放大后字体的比例
var scaleFactor = 10 / scaledFontSize;

// 取 html 元素的字体大小
var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));

// 由于设置 font-size 后实际会变大,故 font-size 需设置为更小一级
document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
111055浏览
最后一次编辑于  2020-01-14
知识库内容非实时更新,可能已过期、失效或不适用于当前情形,请谨慎参考
收藏
反馈

36 个评论

  • 苏茂林
    苏茂林
    2022-09-13
    // 由于设置 font-size 后实际会变大,故 font-size 需设置为更小一级
    document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
    


    这块写错了吧,应该是只 originRootFontSize * scaleFactor 一次吧,不用两次吧


    2022-09-13
    赞同
    回复
  • bing随遇而安
    bing随遇而安
    2022-06-23

    <script>

    // 字体设置

    document.documentElement.style.fontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size')) + 'px';

    </script>


    2022-06-23
    赞同
    回复
  • 风
    2022-05-26

    我设置后,发现小程序内置的h5访问,会先展示一下大字号,然后变为正常字体。会有闪烁的问题。这块怎么解决呢

    2022-05-26
    赞同
    回复 1
    • 苏茂林
      苏茂林
      2022-09-13
      这个是不是放body 开始的第一行效果可以消除啊
      2022-09-13
      回复
  • 稻草人^_^
    稻草人^_^
    2022-02-09

    请问 这个方法对小程序里面的h5页面生效吗?我试了一下,好像没生效。

    2022-02-09
    赞同
    回复 2
    • 靳马虎
      靳马虎
      2022-02-21
      找到解决办法了吗
      2022-02-21
      回复
    • 稻草人^_^
      稻草人^_^
      2022-02-23回复靳马虎
      没有,好像需要微信客户端重新提供接口
      2022-02-23
      回复
  • 婷婷
    婷婷
    2022-01-05

    商家小票内的页面使用flexible做的rem做的适配,使用上述两个方法Android都没有生效

    2022-01-05
    赞同
    回复
  • 婷婷
    婷婷
    2022-01-05

    商家小票内的页面使用flexible做的rem做的适配,使用上述两个方法都没有生效

    2022-01-05
    赞同
    回复
  • 婷婷
    婷婷
    2022-01-05

    商家小票内的页面使用flexible做的rem做的适配,使用上述两个方法都没有生效

    2022-01-05
    赞同
    回复
  • naive
    naive
    2021-11-18

    方法二可以解决,但是解决不完整,手动调整微信内浏览器字体缩放小一级才可以显示正确;

    然后调用方法一 不可以设置字体缩放

    2021-11-18
    赞同
    回复
  • 🥥
    🥥
    2021-11-11

    有解决的吗

    2021-11-11
    赞同
    回复
  • 滴水💦石穿
    滴水💦石穿
    2021-10-18

    你好!公众号所使用的字体都是正版的吗?使用的字体会不会侵权?

    2021-10-18
    赞同
    回复

正在加载...

登录 后发表内容