字体在网页中的应用

浏览数：43 / 时间：2015年06月09日

svg其实不算新标准吧，在dom标准定义的时候好像就有了，记得在高级编程那本书上看过的，但一直到html5，才是所有的浏览器都支持了，我们使用一张svg图的时候，最简单的用法就是像使用传统的图片一样去使用，还有就是svg跟css结合的使用，这个个人接触的少就不在此乱扯了，主要写写字体方面的。

其实字体呢就是自定义在css中content（content的使用可以去w3c看看，要配合before跟after伪类一起的，指定一个url作为内容），而这个url指向的是一个自定义的font，具体代码如下：

 1 @font-face {
 2     font-family: ‘icomoon‘;  /*注意这里的路径别弄错了*/
 3     src:url(‘icomoon.eot?418ycv‘);
 4     src:url(‘icomoon.eot?#iefix418ycv‘) format(‘embedded-opentype‘),
 5         url(‘icomoon.woff?418ycv‘) format(‘woff‘),
 6         url(‘icomoon.ttf?418ycv‘) format(‘truetype‘),
 7         url(‘icomoon.svg?418ycv#icomoon‘) format(‘svg‘);
 8     font-weight: normal;
 9     font-style: normal;
10 }
11 
12 [class^="icon-"], [class*=" icon-"] {
13     font-family: ‘icomoon‘;
14     speak: none;
15     font-style: normal;
16     font-weight: normal;
17     font-variant: normal;
18     text-transform: none;
19     line-height: 1;
20 
21     /* Better Font Rendering =========== */
22     -webkit-font-smoothing: antialiased;
23     -moz-osx-font-smoothing: grayscale;
24 }

这个声明了以 “icon-” 开头的class的font-family为你所指定的字体文件的字体格式，然后对每一个具体的字体是这样的：

.icon-Add:before {
    content: "\e600";
}

这样就完成了对一个svg字体的引用，你只需要在页面上的元素中声明class="icon-Add",然后就可以引用到你指定字体文件中对应的那个小svg图片，你也可以像使用普通字体一样去修改他的颜色，调整它的font-size，设置hover时候的颜色，等等，总之跟你使用普通的问题没有多少区别。

最后，附带上阿里巴巴的一个链接，可以上传一组svg图标然后转换成字体，可以定制自己需要的部分svg图标，拥有着很丰富的图标库，你可以尽情的选择你需要的，最后download的结果是一个icomoon的文件夹，包含一个demo.html，你只需要把font文件夹下的全部内容以及stlye.css引入即可，要注意style.css开始为的关于引用字体文件的路径别弄错了，这样你就可以直接使用了，刚好那个demo.html可以作为一个很好的查阅工具，就写这么多吧。

字体应用链接地址：https://icomoon.io/app/#/select/font

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

字体在网页中的应用