一、字体资源地址

1. 链接

FiraCode 和 Operator Mono 字体下载地址

2. 资源下载

• Git下载

git clone git@gitee.com:gblfy/font.git

• zip包下载
  https://gitee.com/gblfy/font/repository/archive/master.zip

二、效果图

话不多说，先上图，看看效果是不是大家需要的，咱们再继续往下看：

2.1. JS 代码效果

2.2. CSS 文件效果

2.3. HTML 文件效果

这里的白色背景主题是可以更换的，主要是字体，如果觉得我这个白色背景丑的，请不要在意这些细节，哈哈哈

三、安装字体

这里需要安装两种字体，由于 Operator Mono 需要建立在 Fira Code 字体的环境基础上，所以也要安装 Fira Code 字体，然后安装 Operator Mono。

3.1. 字体列表

3.3. 安装方式

• windows 环境
  进入目录双击字体安装即可
  

• Mac 上如何安装字体的图文
  按住cmd + space，搜索“字体册”，然后打开：
  
  点击 +号，在弹窗中选中字体所在的文件夹，然后确定即可：
  

3.3. VSCode 配置

键入Ctrl + P（快速打开）时，可以按名称打开任何文件。
打开 settings.json
添加内容如下（推荐直接覆盖即可）：

{"workbench.iconTheme": "vscode-icons","vsicons.dontShowNewVersionMessage": true,"editor.fontSize": 18,"editor.formatOnSave": true, // #每次保存的时候自动格式化"editor.codeActionsOnSave": { // #每次保存的时候将代码按eslint格式进行修复"source.fixAll.eslint": true},"editor.fontFamily": "Operator Mono","editor.fontLigatures": true, // 这个控制是否启用字体连字，true启用，false不启用，这里选择启用"editor.tokenColorCustomizations": {"textMateRules": [{"name": "italic font","scope": ["comment","keyword","storage","keyword.control.import","keyword.control.default","keyword.control.from","keyword.operator.new","keyword.control.export","keyword.control.flow","storage.type.class","storage.type.function","storage.type","storage.type.class","variable.language","variable.language.super","variable.language.this","meta.class","meta.var.expr","constant.language.null","support.type.primitive","entity.name.method.js","entity.other.attribute-name","punctuation.definition.comment","text.html.basic entity.other.attribute-name.html","text.html.basic entity.other.attribute-name","tag.decorator.js entity.name.tag.js","tag.decorator.js punctuation.definition.tag.js","source.js constant.other.object.key.js string.unquoted.label.js",],"settings": {"fontStyle": "italic",}},]}}