文章摘要
本文详细介绍了在Code-Server中配置网页编辑器字体的方法。首先，介绍了在服务器上安装字体，以Fira Code为例，通过下载和解压字体包，创建字体目录，刷新字体缓存等步骤确保字体安装成功。接着，对原有的字体目录进行软链接配置，创建独立的CSS文件引用字体，并在工作bench.html中添加对该CSS的引用。最后，在Code-Server首选项中配置字体，刷新网页后即可看到修改后的字体效果。
引子
在架设Code-Server后，为了满足个人的编码需求，我们通常会为Code-Server配置各式的主题及图标，然而想要修改字体的时候会发现在配置自定义字体上有一些困难，本文特此记录配置网页编辑器字体的详细方法。
安装字体
在对编辑器进行字体配置之前，首先要确保服务器上已经安装了对应的字体。本文以著名编程字体Fira Code为例。
先从Release页面下载对应字体的发行包：
bash
# 1. 下载字体压缩包
wget https://github.com/tonsky/FiraCode/releases/download/6.2/Fira_Code_v6.2.zip -O Fira_Code_v6.2.zip并解压到服务器的字体目录：
bash
# 2. 创建目标目录（如果不存在）
sudo mkdir -p /usr/share/fonts/firacode
# 3. 解压到目标目录
sudo unzip Fira_Code_v6.2.zip -d /usr/share/fonts/firacode/注意
若unzip未安装，先补全依赖：
bash
sudo apt update && sudo apt install unzip -y最后刷新服务器字体缓存：
bash
sudo fc-cache -fv可以自行使用fc-list确认安装情况。
配置编译器
首先为了让编辑器中能正常通过css中的url读取对应地字体，我们要对原有的字体目录做软链接。链接地址为/usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench，注意要和自己的Code-Server安装目录相对应。
bash
sudo ln -sf /usr/share/fonts/firacode/ /usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench/fonts然后创建一个独立的css文件引用对应的字体，此处以/usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench目录下的font.css：
css
@font-face {
font-family: 'FiraCode';
src: url('fonts/FiraCode-VF.woff2') format('woff2-variations'),
url('fonts/FiraCode-VF.woff') format('woff-variations'),
url('fonts/FiraCode-VF.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}最后编辑/usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench目录下的workbench.html，在<head>部分添加对该css的引用：
html
<link rel="stylesheet" href="{{WORKBENCH_WEB_BASE_URL}}/out/vs/code/browser/workbench/font.css">生效设置
在Code-Server首选项中配置字体即可
重新刷新网页后，即可看到成果：
本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自 烧鸡
评论
隐私政策
0/500
滚动到此处加载评论...