十行代码生成"𝒇𝒂𝒏𝒄𝒚 𝒇𝒐𝒏𝒕"花式字体

效果预览

Unicode

在开始阅读前我们得先知道什么是Unicode

Unicode，也叫万国码、单一码，由统一码联盟开发，是计算机科学领域里的一项业界标准，包括字符集、编码方案等。

它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求

注意这一句“每个字符设定了统一并且唯一”，意思是计算机中每个字符无论中文、英文、emoji等都有唯一的编码与之对应。

学计算机的应该看过这个表

已知: 计算机默认A的ASCII码值是65

求：𝓐的ASCII码值是多少？

查看字符ASCII码值

JS中查看字符的ASCII可以使用String.codePointAt() ，可以将以下代码复制到控制台运行看看

"𝓐".codePointAt()

答：120016

既然我们得到了𝓐码值 那剩余的25个字母就不用我说了吧!

字符集

我们已经知道英文字母在Unicode中有很多不同的字符集，比如默认的65-90(大写)，刚才示例的120016-120041

那如何找到更多的字符集呢？

unicode charts这里有字符的详细内容，进入后找到Mathematical Alphanumeric Symbols 或直接点击链接，在这里可以看到字母不同的字符集以及对应的码值

注意图中画斜线的字母是缺失编码的，比如"1D455"就不存在。

码值转字符

既然知道了不同字符集的不同码值区间，就可以根据码值生成不同的花式字母。 使用String.fromCodePoint()

注意使用fromCodePoint() 参数要么使用 parseInt('1D4D0', 16) 转换后使用 或者fromCodePoint('0x' + '1D4D0') 拼接上 0x 哦 将码值转字符显示

可将下面代码复制到浏览器控制台运行

String.fromCodePoint(parseInt('1D4D0', 16))
// or
String.fromCodePoint('0x' + '1D4D0')

十行代码的实践

将以下代码复制到浏览器控制台运行

(function translateFont (text) {
    const uppercaseStart = parseInt('1D468', 16), lowerStart = parseInt('1D482', 16)
    let translate = ''
    for (const letter of text) {
      const codeValue = letter.codePointAt()
      translate += codeValue >= 65 && codeValue <= 90 ? String.fromCodePoint(codeValue - 65 + uppercaseStart) : codeValue >= 97 && codeValue <= 122 ? String.fromCodePoint(codeValue - 97 + lowerStart) : String.fromCodePoint(codeValue)
    }
    return translate
})('fancy font')

总结

实现不同的花式字母大致步骤

1. 拿到想要字符集的起点码值
2. 利用codePointAt 拿到默认字符集的码值减去65或97(大小写的起点值)的差加上我们想要的字符起点码值
3. 再使用fromCodePoint转换为字符即可