制作自己的专属字体

Werner 2018-01-16 2082字 杂项
王侯将相宁有种乎!
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
!@#$%^&*()_+-={}[]\|;:'",<.>?~

如果你的浏览器没有陈旧到不支持“@font-face”,那么你应该可以看到上面展示的文字是手写体。 这是我花了一个中午的时间制作的,我将这种字体命名为“WernerSignature”,意思是Werner专用签名字体。 该字体只有英文大小写字母、阿拉伯数字、半角标点符号、8个汉字和全角感叹号。 刚好涵盖了我的中文姓名和常用的网名,这便是“签名”的来历。

我使用了一款名为FontCreator的软件来制作字体。 制作汉字字体时,先用中性笔在白纸上写出汉字,然后拍照上传至电脑,并用图片处理软件处理,再导入到FontCreator中。 制作其他字体时,就直接用鼠标画了。

以前对字体不熟悉,总以为是很神秘的事物。 最近写网页,设计师在其上用运了各种字体,为了裁剪中文字体,对其进行研究,发现自己制作字体其实是很简单的事情。 随便搜索一下,多尝试几次,就能成功。我甚至找到了手写字体自动生成系统

以前有Web安全字体的说法。因为操作系统默认安装的字体是很有限的,而网页又无法引入字体,故而只能使用大多数系统都默认安装的字体,称为安全字体。 但现在网页有了引入字体的途径——使用“@font-face”,示例CSS代码如下:

@font-face {
    font-family: 'WernerSignature';
    src: url('https://my.site.com/WernerSignature.woff') format('woff');
}

.title{
    font-family: 'WernerSignature';
}

这样就可以将远程字体引入到网页中使用了。详情见CSS3 字体

需要特别注意的是编码问题。 我们可以简单地将字体理解为字符编码到字符形状的映射。 同样的字体可能是不同编码到同一形状的映射。 如都叫“微软繁隶书.ttf”的两个文件,可能一个是“gb2312”到“微软繁隶书”的映射, 另一个却是“utf-8”到“微软繁隶书”的映射。字体的字符编码和网页的字符编码要一致,否则字体不会生效。 当然字体的字符编码是可以转换的,sfont虽然被设计用来转换字体格式,但据我测试,它会将各种字符编码的字体统一转换为utf-8编码。

还有一个问题是字体文件的大小。 汉语字符数量很多,国标中的常用汉字有六千多个,汉语字体文件大小一般为几兆到几十兆。 这对网站来说是太大的,下载完整的汉语字体文件需要消耗很多时间。对此有两种解决方案。 若是网页内容固定且字数较少,则可以对字体进行裁剪,只保留需要的部分。 字体裁剪工具由很多,我用过的一个好用的、具有图形界面的字体裁剪工具是广州市微嵌计算机科技有限公司开发的字体裁剪工具。 若网页内容不固定或字数很多,则可以使用云字库。我用过的较好的云字库是有字库。 但使用第三方云字库存在信息泄露等风险,需要谨慎考虑。

最后,虽然我不觉得有人会对这么丑的字体感兴趣,但还是附上各种格式的字体下载链接:


上一篇: “若水斋杂记”今日上线
下一篇: QQ Web API备忘
本页访问量为