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
时间: 2024-11-10 20:54:06