由于公众号文章是由用户自定义图片,文字颜色,排版等等,很难做到完全适配。这使得当浏览公众号文章时,效果大打折扣。
这时候可以按照一些规范,调整排版,使得文章在 Dark Mode 下依然赏心悦目。
文字颜色
首先说说微信公众号文章深色模式的整体适配方案,页面通过对颜色值进行一定的反转计算,得到了 Dark Mode 下匹配的颜色值。
例如正常模式下色号为「#232323」的黑,在深色模式下显示的为「#c3c3c3」的白;「#333333」的黑,会转换为「#b3b3b3」的白;彩色颜色值则不进行转换。
这是微信在「白色模式」和 「深色模式」不同颜色文字渲染效果,可作为参考,主题色可自由选择。
图片
目前 PNG 格式的图片是最佳的选择,底色透明,而且占用空间小,加载速度会更快一些。
例如下面的微信图标,在「深色模式」和「白色模式」下都能够优雅地展示。
排版
排版的工具在上一篇文章有提到,这里再说说细节。
本文排版所使用的一些参数如下:
字间距:1px
行间距:1.8em
端间距:3em
文字大小:16px
字体:Optima-Regular
两端留白:10px
最后,有了以上的规范,你看到的「深色模式」和「浅色模式」下的就变成了下面的这个样子
OK,以上就是本次文章的内容,希望你阅读愉快,Good Night!
完
领取专属 10元无门槛券
私享最新 技术干货