文章目錄

• • • • • 一、字體資源地址
        • • 1. 鏈接
          • 2. 資源下載
        • 二、效果圖
        • • 2.1. JS 代碼效果
          • 2.2. CSS 文件效果
          • 2.3. HTML 文件效果
        • 三、安裝字體
        • • 3.1. 字體列表
          • 3.3. 安裝方式
          • 3.3. VSCode 配置

一、字體資源地址

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",}},]}}

總結

以上是生活随笔為你收集整理的VS Code 设置好看的字体：Operator Mono的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。