「记录：FF14 特殊符号显示」

记录：FF14 特殊符号显示

2021/10/01 字数统计： 1k 阅读时间： 2 mins 访问次数： ... 评论统计： ...

　　今日成果：基于 css3 webfonts 实现了在网页上显示 FF14 中的特殊字符。
　　以及：吃屎去吧 Notion！

　　首先恭喜继 Protonmail 之后 Notion 也喜提当代互联网之耻称号 :4o-2:
　　不知道发生了什么可以看看这里，是说好在我其实也没在上面放什么敏感信息 ex 明文存储的账号密码，只有一些稻穗记录什么的，但发生这种事我也必然不可能继续吃他家的屎。

需求 & 思路

　　首先要做的事就是把狩猎宏先从 Notion 上搬下来，于是开始研究如何在个站上显示 FF14 中的特殊文字，ex：





 



　　显然当你看到这篇文章的时候它已经实现了，不过我不知道手机端的支持情况如何……
　　是说我现在也可以在博客里打出「你好有事，我了你」了【？

　　一开始的思路是通过 Unicode 正则匹配将字符转换成类似 emoji 的形式，然后通过 CSS 显示字符。然而想到狩猎宏是得复制进游戏开箱即用的，于是谷歌之，果不其然让我找到了 lodestone 使用的网页字体 FFXIV_Lodestone_SSF。
　　考虑到访问速度问题我直接把字体文件存到了本地，希望不要收到 SE 发来的律师函……不过我看直接另存了这个文件的网站也不在少数，应该不追究吧，对吧对吧 :4o-1:

　　以及把字体保存到本地的主要原因是「」的左下角似乎丢失了几个锚点，准备本地编辑一下……话说游戏里的这个字符也是缺角的吗我好像没注意过呢【

web fonts 实现

　　在 css 文件的开头部分加上以下代码：

@font-face {
  font-family: ffxiv;
  src: url('https://img.finalfantasyxiv.com/lds/pc/global/fonts/FFXIV_Lodestone_SSF.woff');
  src: url('https://img.finalfantasyxiv.com/lds/pc/global/fonts/FFXIV_Lodestone_SSF.ttf');
}

　　这里为了方便抄作业（以及避免版权纠纷）还是引用了 lodestone 的链接，然后在文字的 font-family 属性中将 ffxiv 添加到最前面即可，如：

1
2
3

* {
  font-family: ffxiv, Consolas, "微软雅黑", monospace;
}

　　是说用自定义字体添加符号比我想象中的简单多了，那么使用自定义字体添加尼尔的游戏图标或许也能提上日程……【SE 律师函发到手软.jpg

更新：后续排版时发现
　　　FFXIV_Lodestone_SSF 存在上下行距不相等的问题
　　　出于排版美观考虑将字体顺序移到了最后，实测也可以正常显示

無色人間。