优雅的在Windows下使用Chrome插件「阅读模式」

阅读模式」是一款优秀的 Chrome 插件,可以在 Chrome 下实现 Safari 和 Firefox 的阅读模式的功能。

但是因为各种原因,原版「阅读模式」仅提供了常见的 macOS 下的中文阅读字体,本文的主要目的是指导大家通过修改软件,来添加常用的 Windows 常见字体。(Linux 用户同样适用)

定位文件位置

在任意可以启用阅读模式的页面中启用插件(可以选择作者自己的说明页面),右键空白处,在弹出的菜单中选择「在新标签页中打开框架」。

此时,新标签页中地址栏的内容如下所示:

chrome-extension://iibolhpkjjmoepndefdmdlmbpfhlgjpl/src/html/view.html

iibolhpkjjmoepndefdmdlmbpfhlgjpl 键入 Everything 等文件查找软件,可快速定位到位于C:\Users\[User Name]\AppData\Local\Google Chrome\User Data\Default\Extensions\ 的插件的文件位置。

文件解析

字体主要由 \src\js 下的 view.js\src\css 下的 view.css 两者决定。

view.css

该文件控制可以使用的字体设定的font-family。相关部分位于约233行 / Fonts / 注释处。

代码格式为:

  
body.[字体设定名称]{ 字体家族列表 }  
  

具体示例如下:

  
body.system { font-family: -apple-system-font; }  
  
body.athelas { font-family: Athelas; }  
  
body.charter { font-family: Charter; }  
  

[字体设定名称]可以自己定义。

view.js

该文件控制在插件界面中显示的字体设定选项,相关部分位于约32行/定义可用字体/处。

文件格式为

  
'[字体设定名称]'   : '[描述信息]',  
  

具体示例如下:

  
/*定义可用字体*/  
  
Paper.fonts = {  
  
'system'   : '-apple-system-font',  
  
'heitisc'  : 'Heiti SC',  
  
'songtisc' : 'Songti SC',  
  
'kaitisc'  : 'Kaiti SC',  
  
'yuantisc' : 'Yuanti SC',  
  
'georgia'  : 'Georgia',  
  
'seravek'  : 'Seravek',  
  
'times'    : 'Times New Roman'  
  

此处的[字体设定名称]应与view.css中一致。

修改范例

\src\css\view.css

  
/* Fonts */  
  
/* 修改系统字体为Segoe UI */  
  
body.system { font-family: Segoe UI; }  
  
body.georgia { font-family: Georgia; }  
  
body.times { font-family: 'Times New Roman'; }  
  
/* Windows Font */  
  
/* 添加常见Windows字体:微软雅黑、微软正黑、中易宋体、标楷体、新细明体,并设定不适用中文字体的西文部分显示西文 */  
  
body.winyahei { font-family: 'Segoe UI', 'Microsoft Yahei'; }  
  
body.winsong { font-family: 'Times New Roman', 'SimSun'; }  
  
body.winbiaokai { font-family: 'Times New Roman', 'DFKai-SB'; }  
  
body.winjhenghei { font-family: 'Segoe UI', 'Microsoft JhengHei'; }  
  
body.winpmingliu { font-family: 'Times New Roman', 'PMingLiU'; }  
  
/*MyFont*/  
  
/* 同时也可以添加自己喜欢的字体,需要由一定的css相关的知识 */  
  
body.myfont { font-family: 'FontName'; }  
  

\src\js\view.js

  
/*定义可用字体*/  
  
/*添加在view.css中添加的字体*/  
  
Paper.fonts = {  
  
'system'   : 'Segoe UI',  
  
'winyahei'  : 'Microsoft YaHei',  
  
'winjhenghei' : 'Microsoft JhengHei',  
  
'winbiaokai'  : 'DFKai-SB',  
  
'winpmingliu' : 'PMingLiU',  
  
'georgia'  : 'Georgia',  
  
'times'    : 'Times New Roman',  
  
'myfont'   : 'Base_on_`view.css`'  
  
};