本文描述的issue是这个样子的,很多新人的electron页面都是原来已经做好的,上线运行的。那么,切换到electron里面之后,一些具有“像素眼”神奇功能的同学,就很有可能会发现:electron中的字体和chrome中的字体不一致!这个问题如何解决呢?

苏南大叔:electron如何设置字体?如何解决字体渲染不一致的问题? - electron-font
electron如何设置字体?如何解决字体渲染不一致的问题?(图5-1)

本文测试环境:mac/electron@5.0.2。值得说明的是:在苏南大叔的测试中,electron14系列,都是可以正常使用本文范例代码的。但是对于electron@5系列来说,字体名称设置却是失效的,但是字号设置是可以生效的,原因未知。

规范网页代码

首先,要从html网页自身上,来查找问题所在。那些发生字体渲染变化的文字区域,很有可能:

  • 没有定义font-family
  • 或者定义了错误的font-family
  • 或者定义的font-family是不存在的字体

大概率的情况下,是没有定义font-family,这个是比较常见的情况。所以,一般来说,请从这个角度来考虑问题的方案:修改css中的font-family定义。同时,苏南大叔建议:中文字体请改用对应的英文名字。

总结

总体上说来,反馈字体渲染不一致的情况还是毕竟多的。这个issue的解决方案又比较隐蔽。更多electron文章,请点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron    font

本站的忠实读者小伙伴,正在阅读下面这些文章: