仓库源文，站点原文

title: 再探@font-face及webIcon制作 categories:

• 前端杂烩 tags:
• tech
• cnblogs
• webicon
• font-face warning: true date: 2014-01-27 01:50:00 fromUrl: http://www.cnblogs.com/hustskyking/archive/2014/01/27/manufacture-font-face-in-web.html from: 博客园

<p>@font-face 不能说他是什么新东西了，在 CSS2.0 规范中就有了这玩意儿，IE4.0 开始就已经出现，只是当时用的不是特别广泛，后来在 CSS2.1 草案中又被删掉。随着 web 的急速发展，@font-face 价值越来越凸显，然后再次被纳入 CSS3 草案中。@font-face 是个什么东西，本文不做过多说明，不太清楚的童鞋可以看这里 <a href="http://www.w3schools.com/css/css3_fonts.asp" target="_blank">http://www.w3schools.com/css/css3_fonts.asp</a>。需要强调的是他的书写格式：</p>

@font-face {
    font-family: <yourwebfontname>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

</style></weight></format></format></yourwebfontname>

@font-face {
    font-family: Gentium;
    src: url(http://example.com/fonts/Gentium.woff) format("woff");
}

p { font-family: Gentium, serif; }

//html
<i class="fa fa-flag"></i>

//css
.fa-flag:before {
    content: "\f024";
}

<style type="text/css">
@font-face {
    font-family: 'barretregular';
    src: url('./font/barret-webfont.eot');
    src: url('./font/barret-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/barret-webfont.woff') format('woff'),
         url('./font/barret-webfont.ttf') format('truetype'),
         url('./font/barret-webfont.svg#barretregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
div {
    font-family: "barretregular";
    font-size:50px;
}
</style>

<div>
    B​C​D​E​F​G​H​I
</div>

@font-face {
    font-family: 'barretregular';
    src: local("barret"),
         url('./font/barret.ttf');
}

@font-face {
    font-family: 'barretregular';
    src: url('./font/barret-webfont.eot');
    src: local("☺"),
         url('./font/barret-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/barret-webfont.woff') format('woff'),
         url('./font/barret-webfont.ttf') format('truetype'),
         url('./font/barret-webfont.svg#barretregular') format('svg');
}

@font-face {
    font-family: "Chinese Quotes";
    src: local("Some Chinese Font");
    unicode-range: U+2018-2019, U+201C-201D;
}
body {
    font-family: "Chinese Quotes", "Some Latin Font",
                 "Some Chinese Font", generic-family;
}

<p>同理，这一招也可以用于破折号、间隔号等和西文标点共享码位的中文标点。</p> </blockquote>

<p>可以戳知乎上的<a href="http://www.zhihu.com/question/20597706" target="_blank">这一贴</a>。</p>

<h3>三、优缺点</h3>

<p>优点有一大堆，图标的颜色可以随意修改，大小也是可以随便控制的，不需要折腾图片与文字的对齐问题，因为他本身就是文字，还可以使用阴影、文字渐变等 CSS3 的效果，总之就像操作一般字体一样处理他们，该有的特点都有。</p>

<p>缺点也是十分明显的，慢速网络以及翻墙代理下情况特别糟糕。外国很多网站的页面都使用了网络字体，而网络字体下载是需要时间的，有些字体可能还比较大，在下载完毕之前，页面有文字的地方都没有渲染出来，体验不好的情况需要等待三五秒中。不过这种情况还是可以优化的，先用一般字体顶替样式，等下载完毕了再利用 JS 来重新渲染，不过这个代码比较高，而且也不好判断何时下载完成了。</p>

<h3>四、小结</h3>

<p>本文的目的是展示 web icon 的从无到有的一个过程，一些网站提供了很多不错的 webIcon 字库，如果有需求可以直接去网站上下载，自己制作的话成本太高。</p>

<h3>五、参考资料</h3>