本文描述的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的默认字体呢?

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

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

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

下面的是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

测试代码

下面是个范例:

mainWindow = new BrowserWindow({
   //...
   webPreferences: {
     defaultFontFamily:{
       standard:"Microsoft YaHei",
       //serif:"",
       //sansSerif:"",
       //monospace:"",
     },
     defaultFontSize:24,
     //defaultFixedFontSize:20,
     //minimumFontSize:0,
     defaultEncoding:"utf-8"
   }
 })

苏南大叔个人认为,也就设置个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系列)。

小插曲(重置字号缩放)

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

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

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

总结

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

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

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

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

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

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