用@font-face实现网页特殊字符(制作自定义字体)

不久前，我尝试用CSS来制作三角箭头，虽然效果达到了预期，但仍存在一些局限。例如，我仍需要使用position属性来确定箭头的位置。而且，这种方法仅限于三角箭头，如果想要其他形状的箭头或字符，还是得依赖图片。于是，我一直在寻找更高效的解决方案，终于让我找到了……

我们要去电脑的C盘Fonts文件夹里找到WEBDINGS.TTF字体文件，并将其复制到桌面。接下来，我们需要一个神器软件——“”，它能让我们制作自定义字体，我们将用它来创建一个专属于我们的字体库。

下载并解压软件后，将WEBDINGS.TTF字体文件复制到软件中，然后运行fontforge.bat并选择字体文件。界面会出现许多图形字符，你会发现其中许多字符以前都用过，只是那时是用图片来实现的。

接下来，我们要从众多字符中选择我们需要的，因为WEBDINGS.TTF包含了许多我们可能用不到的字符。我们只需选择自己需要的字符即可。操作起来很简单：先新建一个空白字体文件，然后在文件菜单中选择新建，接着选择你需要的字符并复制到新建的字体文件中。

然后保存你的选择并生成字体文件，选择以.ttf为后缀保存。这样，我们的字体文件就制作完成了。IE浏览器只识别.eof格式的文件，不识别.ttf格式，所以我们还需要生成其他格式的字体文件。关于这个问题，我之前已经写过一篇文章详细说明了操作方法，这里就不再赘述了。

如果你觉得这个操作过程太麻烦，可以直接下载我整理好的字符库，主要以箭头为主，因为箭头非常常用。虽然使用字符库会增加页面文件的总大小，但它的操作性更加多元化。我们可以控制字符的大小、颜色，甚至应用阴影、翻转等CSS3效果。而图片如果要更改颜色，就必须重新修改或重新制作，可塑性不强。

在此感谢小熊提供的思路：既然可以通过CSS3和滤镜实现字符旋转，那么我们在制作字符库时，四个方向的箭头就可以只记录一个，通过代码让其进行旋转，从而减小字符库文件的大小。

现在我的EonerCMS里，窗口的右上和右下的按钮已经换成了字符形式，效果非常好。希望这个新方法能给你带来更多的灵感和便利！