跳至主要內容

内置 Nerd 字体的 ttyd 网页终端

长安码徒2024年1月1日大约 4 分钟原创发布开源原创Linux网页

背景

这两天折腾平板上的neovim，过程中遇到的一个问题就是 Termux 下的中文输入法比较难用。 新手甚至可能不用粘贴的话一个中文都输入不进去。 虽然实际上也有办法，但不是很爽。

这之中，方案之一是使用ttyd，在 Termux 里面运行ttyd并开后台锁定（aquire wake lock）， 然后另外开个浏览器从前台访问（实测那个体积特别小的X浏览器就挺不错）， 利用浏览器的基础设施解决中文输入以及一边查资料一边用 shell 的问题。

但是，上neovim的话大概率是想用nerd字体的。原版ttyd的网页是直接利用系统字体的， 等宽字体都不见得能保证，未root的设备一般都不会有nerd字体。

查了下ttyd的资料，发现这个需求其实挺多人有，但官方不打算直接支持。 虽然支持字体选项，但不想直接内置字体。主要矛盾就是如何让网页拿到字体文件。 官方有一个关于加入内置字体的指引， 看起来简单但似乎略有过时，于是折而腾之。

软件编写

经过一番踩坑，成功编译了一个fork版本。 一些经验如下：

  1. 只要woff2字体；虽然@font-face理论上支持ttf、ttc和otf， 但生成html.h这这一步会出错，并且出错的是一个五年前停止维护的nodejs，没法说理；
  2. 比较好的搭配方案是一个带Nerd font的英文等宽字体，带一个中文字体；
  3. 启动的时候需要再次设置使用的字体，字体名字跟@font-face一致， 注意后面一定要加一个Serif压阵，看下面使用说明部分。

仓库只放了代码，没发布二进制，主要是大家环境差异比较大。 不想换字体的话，直接编译就行，就当html目录不存在。 那个五十多兆大的html.h已经包含了字体，编译出来大概十兆左右，可以接受。

编译还是比较容易的，就两个依赖，用cmake按官方的编译说明来做，没有障碍。 最后的安装用cmake --install . --prefix ~/app/ttyd/install/这样来。 这里放上一个arm64的版本，对自己人品有信心的可以尝试 直接下载运行。

使用说明

直接贴 github 的说明了，中英文版

How to use this forked version with embedded nerd web font

This fork has two embedded fonts: Nerd-patched JetBrains font, and Chinese font Sarasa Mono SC.

Suggested Usage below:

  1. Install the stock version of ttyd to ensure we have all dependencies
  2. Compile this forked version (You don't have to do the yarn part since the html.h already has font data)
  3. install the compiled app to some location
  4. Use the following command to launch ttyd
./ttyd -W -t fontSize=16 -t fontFamily="JetBrains, SarasaMono, Serif" -p 8022 /bin/zsh

The -W flag must be there or you won't be able to operate the terminal. Such behavior may not be the same with the stock version (e.g. Arch).

The JetBrains, SarasaNerd, Serif flag must be like this, do not ignore the Serif flag or each of the displayed character will be 2x wide. If the characters are still 2x width with the above command, check whether you are using a mobile browser or not. The page must be displayed in Desktop mode of mobile browsers.

如何使用这个内置 nerd 字体的版本

以下是建议，爱折腾的话随意。

内嵌了带有 Nerd 符号的JetBrains字体和原版Sarasa字体（更纱黑体）Mono SC版本。

  1. 安装官方版本，确保依赖都没问题
  2. 按官方方法编译，不想换字体的话无需用yarn重新生成html.h
  3. 安装到随意什么地方
  4. 使用如下命令启动：
./ttyd -W -t fontSize=16 -t fontFamily="JetBrains, SarasaMono, Serif" -p 8022 /bin/zsh

-W 标志不可省略，否则只读。这个可能与某些发行版的官方仓库版本不同（例如Arch）。

字体命令中的Serif不可省略，否则所有字体都将是双倍宽度显示。 如果已经使用了上述选项，但字符显示仍然是双倍宽度， 请关注你是不是正在移动设备浏览器上访问。如果是，尝试将浏览器设置为桌面模式。

最近更新：