素材：两张总览图，切成 56 枚#

手上只有两张总览图：一张桐乃、一张黑猫，每张 7 列 4 行的图标阵，底下压着中文标签。要变成能用的素材，得先把 28 个格子一个个切出来、去掉背景、缩到光标尺寸。

剪贴板里存的那份只有 1920 宽，翻回原始文件是 6144×4096，我直接用后者当源。

版面我用投影扫出来的：先按行统计「非白像素」，得到图标带和标签带交替的几条横带；再在图标带里按列扫一遍。这活看着机械，实际有两个坑等着我。

1
ink = np.asarray(rgb).min(axis=2) < 244
2
# 四周先补一圈纯白，保证背景一定与边缘连通
3
pad = np.zeros((h + 320, w + 320), bool)
4
pad[160:-160, 160:-160] = ink
5
filled = ndimage.binary_fill_holes(pad)[160:-160, 160:-160]

28 条规则，我只写了一遍#

我要的是「亮色桐乃、深色黑猫」。最直白的写法是每条规则写两遍 —— 一套挂 html, body，一套挂 html.dark，28 个指针就是 56 条，以后改一个热点还得改两处。这种迟早会漂。

我试了一下 CSS 自定义属性，Chromium 里能跑通：

1
:root {
2
  --ffc-normal-1: url("/images/cursors/kirino/normal-32.png");
3
  --ffc-normal-2: url("/images/cursors/kirino/normal-64.png");
4
  --ffc-normal-hx: 4;
5
  --ffc-normal-hy: 2;
6
}
7
html.dark {
8
  --ffc-normal-1: url("/images/cursors/kuroneko/normal-32.png");
9
  --ffc-normal-2: url("/images/cursors/kuroneko/normal-64.png");
10
  /* 黑猫的箭头尖位置不同，热点跟着换 */
11
  --ffc-normal-hx: 4;
12
  --ffc-normal-hy: 2;
13
}
14
html,
15
body {
16
  cursor: var(--ffc-normal-1) var(--ffc-normal-hx) var(--ffc-normal-hy), auto;
17
  cursor: -webkit-image-set(var(--ffc-normal-1) 1x, var(--ffc-normal-2) 2x)
18
    var(--ffc-normal-hx) var(--ffc-normal-hy), auto;
19
  cursor: image-set(var(--ffc-normal-1) 1x, var(--ffc-normal-2) 2x)
20
    var(--ffc-normal-hx) var(--ffc-normal-hy), auto;
21
}

有两处是我先单独验过才敢往下写的。

一是变量能承载整个 <image>，也能承载热点那两个数字 —— cursor: <image> <number> <number>, <keyword> 里的每一段都可以是 var()，替换发生在计算值阶段，解析器不挑。于是「用哪张图」和「点在哪儿」全进了变量，切主题只换变量，28 条规则写一遍就够。顺手也确认了变量名写错时的兜底：整条声明失效、回退到 auto，不会把光标搞成一个奇怪的样子。

二是两种倍率共用同一组 CSS px 热点。2x 图渲染时也缩到 32 CSS px，所以热点只写一份（3 2 / 6 4 / 16 16），不用跟着倍率换算 —— 这也是我没选「直接塞一张 64px 大图」的原因：CSS 的 cursor 压根不能声明图片的固有尺寸，塞进去会得到一个 64px 的巨无霸光标。

每条规则我写了三档声明：纯 url() 兜底 → -webkit-image-set() → 标准 image-set()。不认识 image-set 的浏览器自动落回 1x 位图，而不是把整条声明丢掉。

代码块为什么没换#

正文和表单的文本光标我换成了魔法棒，但 pre、code 我特意留了系统原生的 I 型光标 —— 代码块是选命令行、选配置去复制的地方，32px 的位图不如一根细十字好瞄。

本来一句 pre, code { cursor: text } 就该收工，结果我一看 pre 上的 computed style，是 body 那个黄箭头。查下来是 expressive-code 自带的一条规则：

1
.expressive-code :not(:is(svg, svg *)) {
2
  cursor: revert;
3
}

revert 会把属性回滚到用户代理那一层 —— 对 pre 来说等于「我没写过」，于是它顺着继承链一路向上，继承到了 body 的箭头。它的特异性是 0,1,1，正好压过我那条 0,0,1 的 pre。

好在 revert 属于非 important 声明，所以 pre, code, kbd, samp, pre *, code * { cursor: text !important } 才压得住。pre 定住之后，内部那些同样写着 revert 的后代自然一路继承下来；而 expressive-code 的复制按钮在 <figcaption> 里、不在 pre 内，不会被这条误伤 —— 我单独回查了一遍，它仍然是链接指针。

怎么确认它真的生效了#

这一环比实现麻烦：光标是浏览器在合成层上画出来的一层东西，不属于页面内容，任何截图方式都抓不到它。所以「指针换了没有」没法用一张图自证，能拿到的只有计算样式和图片能不能解码。

于是我把验证脚本写成这样：拿目标元素的 getComputedStyle(el).cursor，把里面那个文件路径抓出来，new Image() 加载一遍，确认 naturalWidth 是 32 —— 这一条同时证明了「声明命中了」和「图片存在且格式正确」。

在本地 dev 上跑下来：

112 个 PNG（28 枚 × 2 套 × 2 倍率）我逐个请求了一遍，全是 200，没有一个 404。这类「路径拼错、但因为一直没人点所以从没暴露」的问题，不挨个点一遍是发现不了的。

28 枚我全都挂上了 [data-cursor="…"] 点名，其中十来个有天然触发点、不用手写属性：

深色主题下同一页换整套素材，热点也跟着换：

既然拍不到光标本身，我至少能拍「鼠标划过去会变成什么」。顺手做了个自包含的单文件演示页，56 张图全部内嵌成 data URI，打开就能划，右侧那个按钮切主题 —— 这篇的配图也是从那上面截的。

我把它落在哪儿#

还是本站用惯的路子 —— 注入点仍在 src/config/FooterConfig.html，一个主题源文件都没动。素材总共 700 KB，单张 1.4~9 KB，浏览器按需取用。

最后一条我想单独说。动态页的评论区跑在一个同源 iframe 里，而那个页面走的是不带页脚的 Layout，页脚注入到不了它。之前给回复折叠和回复引用补过一个「父页面代投」，所以这次我只往那份代投名单里加了一个 ff-cursor-style 就完事 —— 那个样式块内部自己分了两套主题，iframe 那边同样从 localStorage 拿到 dark 类，两边自然一致。我点开动态页的评论面板回查过，iframe 里的 body 和链接也都是俺妹指针。

最后#

两张总览图我也收进了相册（俺妹指针主题），原图字节一致、零压缩。