HTML5 webfont字体图标的使用

2019独角兽企业重金招聘Python工程师标准>>>

一.参考文献

1.http://www.cnblogs.com/yes-V-can/p/5716853.html

2.http://blog.csdn.net/zhouwangling_/article/details/53096649

二.html使用方法

1.下载字体

网上百度自己要使用的字体，一般下载的是ttf格式，需要4种（或5）格式，其他的格式可以通过在线工具基于ttf转换

http://www.fontke.com/tool/convfont/（这个最好用）

web-fontmin（这个在线转换工具更好用，注意，左边编辑框里的字全删除再上传ttf,不然只会转换框里的那些字体）

在线格式转换点此（注：该网站我成功转过，有时候会报错，多试几次）

2.css加载

@font-face {font-family: "李旭科书法";src: url("../font/李旭科书法.eot"); /* IE9 */src: url("../font/李旭科书法.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */url("../font/李旭科书法.woff") format("woff"), /* chrome, firefox */url("../font/李旭科书法.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url("../font/李旭科书法.svg#李旭科书法") format("svg"); /* iOS 4.1- */font-style: normal;font-weight: normal;
}

3.使用：在需要使用该字体的地方用即可：

.class{
font-family:'李旭科书法'
}

转载于:https://my.oschina.net/ososchina/blog/1601522

HTML5 webfont字体图标的使用相关推荐

html 字体图标转换工具,HTML5 webfont字体图标的使用
一.参考文献二.html使用方法 1.下载字体网上百度自己要使用的字体,一般下载的是ttf格式,需要4种(或5)格式,其他的格式可以通过在线工具基于ttf转换 web-fontmin(这个在线转换 ...
html点赞代码java_17种 HTML5字体图标点赞动画特效源码
今天给大家展示分享的是 17种 HTML5字体图标点赞动画特效源码! 这里就不一一给大家上图了,大家自己去体验一下代码过长需要文档版源码来我的前端群581549454,已上传到群文件废话不多说上源 ...
html5图标经过效果,17种 HTML5字体图标点赞动画特效源码
17种 HTML5字体图标点赞动画特效源码 2017-07-14 10:51阅读: 贪心学院 VR内容分享关注今天给大家展示分享的是 17种 HTML5字体图标点赞动画特效源码! 这里就不一一给大 ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（精灵图，字体图标，技巧）
一.基础班学习路线三.CSS高级技巧 1.精灵图为什么需要精灵图sprites 精灵图使用(原理) 精灵图使用(代码) 精灵图案例-拼出自己名字 2.字体图标字体图标产生和优点字体图标下载字 ...
HTML5、CSS3进阶——字体图标、平面转换
1.<link rel="stylesheet" href="字体图标类"> 在对应的标签直接调用iconfont 图标名 2.iconfont上传 ...
html5 svg 信箱图标,在网页中使用内联SVG图标和字体图标的比较
如果你要在你的网站中创建一个图标系统,你可以有不少的选择.如果你希望使用图片来制作图标,可以使用CSS sprites(CSS雪碧)技术.如果你希望使用矢量图来作为图标(这是时下非常流行的做法),你可 ...
web前端基础 html5+css3（九.精灵图，字体图标，css三角，鼠标样式cursor，.轮廓线 outline，vertical-align，文本溢出显示省略号）
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
如何制作自己的网页字体图标
本文由韩聪根据Heydon Pickering的<How to make your own icon webfont>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行 ...

HTML5 webfont字体图标的使用

HTML5 webfont字体图标的使用相关推荐

最新文章

热门文章