iconfont是通过矢量字体的方式来做icon，可以在高分辨率的屏幕上
也不会失真，能通过css来控制其样式，就像控制普通的文字一样。

像很多浏览器特性一样，使用iconfont是有兼容性问题的，要使用
iconfont，你不得不这样写字体声明：

@font-face {
  font-family: 'mui-wl';
  src: url('http://at.alicdn.com/t/font_1384420140_864115.eot');                                        /* IE9*/
  src: url('http://at.alicdn.com/t/font_1384420140_864115.eot?#iefix') format('embedded-opentype'),        /* IE6-IE8 */
  url('http://at.alicdn.com/t/font_1384420140_8889937.woff') format('woff'),                            /* chrome、firefox */
  url('http://at.alicdn.com/t/font_1384420140_8170962.ttf') format('truetype'),                            /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('http://at.alicdn.com/t/font_1384420140_9259503.svg#svgFontName') format('svg');                    /* iOS 4.1- */
}

字体编辑的工具，windows平台下有fontlab配合AI能很好的生成
iconfont，具体介绍参看这里，CSS3 icon font完全指南

生成ttf格式的文件后，要兼容ie系列浏览器，还需要转为其它几种
格式

网上有一些工具能够进行字体转化的工具，能将ttf格式的字体文件，
转为各种格式的iconfont字体文件，比如这
个：http://www.fontsquirrel.com/fontface/generator

那么整个过程就完毕了，下面要介绍的是在linux环境下进行字体文
件的的制作

需要的环境

1. inkscape ，用于生成字体路径
2. fontforge ，linux下面的字体编辑器，需要忍耐下，界面非常丑，
   有很多快捷键

制作过程

1. 准备好svg字体路径，可以用inkscape ，或者AI
   
2. 用fontforge打开一个svg字体文件（也可以是ttf格式的），比如
   http://at.alicdn.com/t/font_1384420140_9259503.svg ，看到很多图形
   
3. 点击一个字体空位，复制画好的svg路径到空位上
   
4. 文件->生成字体，完成
   
5. 借助上面的字体转换工具，将生成的ttf文件上传，生成其它格
   式的文件
6. demo

需要注意的点

1. fontforge 打开生成的ttf文件，前32个字符是不可见字符，如
   果你在这前32个字符中填充了图形也是没用的

2. 如果你自己托管字体文件的的话，需要注意字体的跨域问题：
   firefox和IE9不支持对icon font字体的跨域。解决办法是在服
   务器的header中添加acceess-control

   

总结

这样的制作过程还是比较麻烦的，但是能通过操作fontforge这个
软件，对字体文件有个感性的认识，再使用在线的工具的时候就不
会觉得完全是个黑箱了

更佳的方案——使用在线的工具

1. http://fontello.com/
2. http://icomoon.io/app

用iconfont实现loading的icon

输出html代码的时候希望将其转义后输出，像这样的

1

<h1>this is h1</h1>

但是在编辑的时候形态是这样的

1

<h1>this is h1</h1>

使用emacs的话，写两个elisp函数即可：

(defun region-entity-to-html (start end)
  "Replace entities to html in region …."
  (interactive "r")
  (save-restriction
        (narrow-to-region start end)

        (goto-char (point-min))
        (while (search-forward "<" nil t) (replace-match "<" nil="" t))="" (goto-char="" (point-min))="" (while="" (search-forward="" ">"="" t)="" (replace-match="" "="">" nil t))

        ;; more here
        )
  )


(defun region-html-to-entity (start end)
  "Replace html to entities in region …."
  (interactive "r")
  (save-restriction
        (narrow-to-region start end)

        (goto-char (point-min))
        (while (search-forward "<" nil="" t)="" (replace-match="" "<"="" t))="" (goto-char="" (point-min))="" (while="" (search-forward="" "="">" nil t) (replace-match ">" nil t))

        ;; more here
        )
  )

将这两个函数放到~/.emacs中，以后要想将一段html转为html，只需
选中这段文本，然后执行命令M-x region-html-to-entity 或者 region-entity-to-html

Features

• 语法继承自KISSY 1.2 Template ,不过少了个花括号
• 编译后的代码非常直观 Temple编译后的代码
• 基本的 if/elseif/else each
• include 子模板
• extend 模板继承
• if(exp) exp可以为复杂表达式
• 模板允许使用自定义函数

Getting Started

KISSY.use('gallery/temple/1.0/index', function (S, Temple) {
     Temple.add("base","this is head , my sex is {#block name} female {/block}!");
     var temple = Temple.compile('{#extend base} {#block name} {sex} {/block}');
     var html = temple.render({"sex":"male"});
     console.log(html);
})

API

• Temple.compile 将模板编译为可以直接执行的js函数，返回的对象具有render方法
• Temple.to_js 将模板编译为js代码字符串,用于调试或者预编译

语法示例

expression and variable

var s = '{#if (a+(b-c*d/(ef%3)))}'
          + 'blah blah {lib}'
      + '{/if}';
var temple = Temple.compile(s);

temple.render({a:1,b:2,c:3,d:4,ef:5,lib:"KISSY"});
// => "blah blah KISSY"

if

var template = '{#if name}'
                 + 'hi {name}'
             + '{/if}'

var temple = Temple.compile(template);
temple.render({name:"tom"});
// -> tom

if/else

var template;
template = '{#if name}'
             + '{name}'
         + '{#else}'
             + 'noname'
         + '{/if}'
var temple = Temple.compile(template);
template.render({name:"tom"});

if/elseif/else

template = '{#if name}'
             + '{name}'
         + '{#elseif sex}'
             + '{sex}'
         + '{#else}'
           + 'oops'
         + '{/if}'
var temple = Temple.compile(template);
temple.render({name:"tom"});
// => tom

each

 var template =  '{#each items as item index}'
                   + '{index} : {item.name}'
               + '{/each}';

var temple = Temple.compile(template);

temple.render({items:[{name:"john"}]});
// => "0 : john"

include

Temple.add("head","<h1>共用头</h1>");
Temple.add("foot","<h1>共用脚</h1");

var template = '{#include head}'
             + '<p>身体是你自己的</p>'
             + '{#include foot}';
var temple = Temple.compile(template);
temple.render();
// => "<h1>共用头</h1><p>身体是你自己的</p><h1>共用脚</h1"

extend

Temple.add("base","<h1>共用头</h1>"
                  + "{#block body}"
                    + "<p>大家都公用的身体</p>"
                  + "{/block}"
                + "<h1>共用脚</h1>");

var app = '{#extend base}'
        + '{#block body}'
        + '<p>你自己的身体</p>'
        + '{/block}';

var temple;
temple = Temple.compile(app);
temple.render();
// => "<h1>共用头</h1><p>你自己的身体</p><h1>共用脚</h1>"

custom function

Temple.reg("myescape",function(s){
  return escape(s);
});
var temple  = Temple.compile('{myescape(htmlstr)}');
temple.render({htmlstr:"<p>foo</p>"});
// => "%3Cp%3Efoo%3C/p%3E"

comment

var temple;
temple  = Temple.compile('{#!this is a line of comment}');
temple.render();
// => ""

temple  = Temple.compile('{#! 可以包含"{"、"#"、"\\}" }');
temple.render();
// => ""

temple  = Temple.compile('{#! 中文注释} 中文字符串abc');
temple.render();
// => " 中文字符串abc"

语法

daringfireball

footnote语法

只有phpmarkdown支持

That's some text with a footnote.[^1]

[^1]: And that's the footnote.

table

| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机     | $1600 |   5     |
| 手机        |   $12   |   12   |
| 管线        |    $1    |  234  |

链接复用

I get 10 times more traffic from Google than from
Yahoo or MSN.