图标字体的概念 其实从计算机字符编码诞生伊始就有了 ——

世界上第一套字符编码 ASCII 码中，有一些用来拼接表格边框的字符，还有一些我们“谈码色变”的“乱码”字符。
它们以前除了因为“乱码”而广为人知，一些洋人称之为 ASCII 艺术的“字符画”是命令提示终端画图的一种简便方式，千禧年之前算是 BBS 达人的必备技能，而今则是 QQ 聊天刷屏的必备了~

图标字体 一般是利用 Unicode 编码预留的高位编码区域来表示一些自创的小图标，使用起来，在原理上和普通字符没有任何区别。但电脑的输入法没法打出它们，唯一的输出方式就是用它的字符编码引用它，在 HTML 中就是 HTML 实体表示法 —— &#编码的十进制数; 。

如何确定上述的十进制编号呢？我们平时使用图标字体都是在 HTML 中引入了它的 CSS 文件之后，就用一个容器标签设置图标字体库定义好的 CSS Class，然后就显示出图标了~ 它们通常使用 DOM 元素的 before/after 伪元素的 content 属性来引用图标字符，这里的格式是十六进制的（如 xxxx），我们可以在 JavaScript 控制台中用如下代码来转换为十进制 —— parseInt('十六进制字符串（无前缀）', 16) 或 0x十六进制数.toString(10)。

但此时，网页中还是不能在一般容器中显示字体图标（或者是乱码）…… 这是因为图标字体通常只定义字体与图标，没有在全局应用这种字体。字体在网页中的全局使用要如下设置 ——

body { font-family:  字体1, 字体2, ……, 字体n; }

内含 HTML 文档片段的元素（<input />、<textarea />等）需要为其专门指定一下字体设置才能让所含内容的字体改变 ——

input, textarea { font-family:  字体1, 字体2, ……, 字体n; }

若需要默认应用所有已引入当前网页的字体，可以在网页中加载以下原创 jQuery 程序 ——

$(document).ready(function () {

    var CSS_File = document.styleSheets,  FontFamily = [],
        FF_RegEx = / /.compile(
            "@font-face\\s*\\{\\s*font-family\\s*:\\s*([^;]+)\\s*;",  'i'
        ),
        is_IE = navigator.userAgent.match(/MSIE (\d)|Trident[^\)]+rv:(\d+)/i),
        is_Webkit = navigator.userAgent.match(/Webkit/i);
    var IE_Ver = is_IE ? Number(is_IE[1] || is_IE[2]) : NaN;

    for (var i = 0, CSS_Text, FF_Rule, CSS_Rule;  i < CSS_File.length;  i++) {
        try {
            CSS_Text = CSS_File[i].cssText;
        } catch (Err) { continue; }
        try {                    //  IE
            FF_Rule = CSS_Text.match(FF_RegEx);
            if (! FF_Rule) continue;
            for (var j = 1; j < FF_Rule.length; j++)
                FontFamily.push( FF_Rule[j] );
        } catch (Error) {        //  Firefox / Safari / Chrome
            CSS_Rule = CSS_File[i].cssRules || CSS_File[i].rules;
            for (var j = 0; j < CSS_Rule.length; j++)
                if (CSS_Rule[j].type == 5)
                    FontFamily.push(
                        is_Webkit ?
                            CSS_Rule[j].style.fontFamily :
                            CSS_Rule[j].cssText.match(FF_RegEx)[1]
                    );
        }
    }
    var CSS_Text = $('body').css('font-family');
    if (CSS_Text != '')
        if (is_IE) {
            if (IE_Ver < 9) {
                var _FontFamily = [].concat(FontFamily);
                _FontFamily.push('sans-serif, monospace');
            }
            FontFamily.unshift('sans-serif, monospace');
        } else FontFamily.push(CSS_Text);
    var $_Target = $('body, input, textarea').css('font-family', FontFamily.join(', '));
    if (IE_Ver < 9)
        $_Target.not('body').css('font-family', _FontFamily.join(', '));
});

【特别注意】font-family 属性中用非英文表示的字体名过多，可能会导致浏览器完全无法应用你所设置的任何字体……（原因未知，但为了同时保证 CSS 文件在没有指定文件编码为 UTF-8 时也能正常解析，这个属性的值还是统统用英文名来写）