我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文描述的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定义。同时,苏南大叔建议:中文字体请改用对应的英文名字。

参考文章:

设置electron的默认字体

从浏览器的角度来说,是存在默认字体字号的设置的。如果碰到了没有定义font-family的文字,是会尝试使用默认字体去渲染的。所以,大家所描述的electronchrome的文字渲染不一致的情况。很有可能就是因为默认字体是不一样的。那么,如何设置electron的默认字体呢?

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

了解解决方案之前,请先了解以下两点:

在了解了上述两个基础知识之后,对比chrome://settings/fonts,再来看electron的字体相关设置。两者进行对比的话,这个问题就非常好理解了。

下面的是electron官方默认值:

  • defaultFontFamily,类型为Object,用于设置font-family的默认字体。新出现的cursivefantasy,大家就暂时忽视吧,貌似是最新版本加入的参数。
keytypevalue
standardStringTimes New Roman
serifStringTimes New Roman
sansSerifStringArial
monospaceStringCourier New
cursiveStringScript
fantasyStringImpact
  • 其它相关默认值
keytypevalue
defaultFontSizeInteger16
defaultMonospaceFontSizeInteger13
minimumFontSizeInteger0
defaultEncodingStringISO-8859-1

测试代码

下面是个范例:

newsn.net:这里是【评论】可见内容

苏南大叔个人认为,也就设置个defaultFontFamily.standard,还有defaultFontSize,还有defaultEncoding。就足够了。其它的设置用的到的概率也不高。

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

实践是检测真理的唯一标准

大家可以利用devtools来查看最终的渲染使用的字体,来确定一下效果是否生效。

mainWindow.webContents.openDevTools();

检测位置是:computed=>rendered fonts

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

版本兼容性

关于defaultFontFamily中的字体名称部分,在苏南大叔的测试中,在electron14系列,都是可以正常运行的。但是,在最新的5系列中,代码中的defaultFontFamily,设置字体失败(没报错就是不生效),但是可以设置fontSize选项。这估计可能是个最新的bug。期待官方后续解决这个问题。

所以,苏南大叔个人建议:如果非常在意electron的字体问题,您可以选择:

  • 要不,您严格书写cssfont-family代码。
  • 要不,您就修改electron的默认设置。但是根据苏南大叔的实践,目前electron@5系列不能正常定制defaultFontFamily

小插曲(重置字号缩放)

使用设置了默认字体的electron,配合修改css中的font-family设置,困扰大家已久的字体渲染不一致的问题,就可以大概率的解决了。
在苏南大叔的测试过程中,在调试模式npm start的时候,展示出来的字号非常的小,明显小于常规的页面。经过无数次重置卸载之后,发现还是字号非常小。

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

解决方案:最终方案非常简单,就是重置了页面缩放功能,command+0。这个结果很令人意外...

总结

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

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

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

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