基本介绍

1、自定义网页特殊字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。

2、支持程度比较好，甚至IE低版本浏览器也能支持。

3、web字体的大小鉴定是字体的高度

字体格式

1、.eot格式：IE专用字体，支持浏览器IE4+

2、.ttf格式：Windows和Mac的最常见的字体，是一种RAW格式，支持浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+

3、.otf格式：被认为是一种原始的字体格式，其内置在.ttf的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+

4、woff格式：Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+

5、.svg格式：基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

字体图标

1、阿里巴巴矢量图库：http://www.iconfont.cn/

2、Font Awesome ：http://www.bootcss.com/p/font-awesome/

3、以上网站拥有丰富的字体图库，阿里巴巴可能有版权问题，建议第二个

 阿里字体

1、拷贝项目下面生成的font-face

2、定义使用iconfont的样式

3、在标签添加样式，并写入字体编码

4、也可以使用伪元素进行在样式类中就插入字体编码

注意事项

1、'\e605'是Unicode编码’&#x605‘转化来的，这是固定格式

2、@font-face是用来声明自己的自定义字体，这也是固定格式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         @font-face {
  8.             font-family: 'iconfont';
  9.             src: url('font/iconfont.eot');
  10.             src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
  11.             url('font/iconfont.woff') format('woff'),
  12.             url('font/iconfont.ttf') format('truetype'),
  13.             url('font/iconfont.svg#iconfont') format('svg');
  14.         }
  15.  
  16.         .self-font::before {
  17.             content: '\e605';
  18.             font-size: 30px;
  19.             font-family: "iconfont" !important;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24. <span class="self-font"></span>
  25. </body>
  26. </html>

Font Awesome 

1、直接引用CSS

2、直接在标签中添加类名（原来也是伪元素）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="css/font-awesome.css">
  7. </head>
  8. <body>
  9. <span class="icon-play">播放图标</span>
  10. <span class="icon-beer">啤酒图标</span>
  11. <span class="icon-book">图书图标</span>
  12. <span class="icon-money">金钱图标</span>
  13. </body>
  14. </html>

html5——web字体的更多相关文章

  1. Monotype推出基于HTML5的Web字体平台

    著名字体公司Monotype近日宣布推出基于HTML5的Web字体平台,设计者可以访问近10万字体的目录. Monotype推出基于HTML5的Web字体平台 Monotype推出基于HTML5的We ...

  2. 如何把你的图标转换成web字体

    在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局 ...

  3. Web字体工具整理，网页图标字体以及使用方法整理

    常用网站app logo 下载: http://www.iconfont.cn/collections/show/268?spm=a313x.7781069.0.0.nDYawz 1.Web字体免费生 ...

  4. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  5. HTML5 web Form表单验证实例

    HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...

  6. html5 web database

    html5 web database <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  7. HTML5 Web Storage

    Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...

  8. 制作web字体：CSS3 @font-face

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font- ...

  9. 深入HTML5 Web Worker应用实践：多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

随机推荐

  1. Remmarguts’ Date（poj 2449）

    求第k短路的长度,如果没有,输出-1. /* k短路模板 注意当s=t时,k++. */ #include<iostream> #include<cstdio> #includ ...

  2. HDU——1130 How Many Trees?

    How Many Trees? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  3. 将完整的Maven远程存储库下载到本地存储库（别试了，不太可取）

    别试了,这种方式不太可取. 要解决可以有如下思路: 1.做成镜像站点,有如下命令: wget -m http://site.to.mirror.com #-m代表“镜子”. rsync repo1.m ...

  4. eclipse下载egit插件，实现代码git同步问题

    1.使用egit后,怎样查看历史log信息? : Team -> Show in history可以查看版本历史提交记录 2.每次代码提交前,先fetch,再merge. 先fetch获得最新代 ...

  5. 一场BC的台前幕后

    #define BC BestCoder 一场BC的台前幕后 起源大概是这种:一个月前的BC#75结束后,AK的人非常多,于是CodeVS群里非常多人吐槽BC#75的质量,这时YJQ对KPM说:&qu ...

  6. C++学习之函数模板与类模板

    泛型编程(Generic Programming)是一种编程范式,通过将类型参数化来实现在同一份代码上操作多种数据类型,泛型是一般化并可重复使用的意思.泛型编程最初诞生于C++中,目的是为了实现C++ ...

  7. SD和SDHC和SDXC卡的差别是什么

    SD内存卡和SDHC内存卡有什么差别? SDHC和SD的差别事实上也就是SD 1.0/1.1规范和SD 2.0规范的差别.尽管编编手上有一份SD 1.1规范的文件.只是因为SD 2.0规范仅仅有SDA ...

  8. HDUOJ--2121--Ice_cream’s world II【朱刘算法】不定根最小树形图

    链接:http://acm.hdu.edu.cn/showproblem.php? pid=2121 题意:n个顶点,m条边,求从某一点起建立有向图最小生成树而且花费最小.输出最小花费和根节点下标. ...

  9. git的基本操作流程

    1.git clone 初始会有默认的master分支,并且master和origin/master自动建立了映射关系 2. git checkout -b local    创建并且切换到local ...

  10. P3959 宝藏 状压dp

    之前写了一份此题关于模拟退火的方法,现在来补充一下状压dp的方法. 其实直接在dfs中状压比较好想,而且实现也很简单,但是网上有人说这种方法是错的...并不知道哪错了,但是就不写了,找了一个正解. 正 ...