基本介绍

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是用来声明自己的自定义字体，这也是固定格式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        @font-face {

            font-family: 'iconfont';

            src: url('font/iconfont.eot');

            src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),

            url('font/iconfont.woff') format('woff'),

            url('font/iconfont.ttf') format('truetype'),

            url('font/iconfont.svg#iconfont') format('svg');

        }

        .self-font::before {

            content: '\e605';

            font-size: 30px;

            font-family: "iconfont" !important;

        }

    </style>

</head>

<body>

<span class="self-font"></span>

</body>

</html>

Font Awesome 

1、直接引用CSS

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="css/font-awesome.css">

</head>

<body>

<span class="icon-play">播放图标</span>

<span class="icon-beer">啤酒图标</span>

<span class="icon-book">图书图标</span>

<span class="icon-money">金钱图标</span>

</body>

</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. Spring的Java配置方式

    Java配置是Spring4.x推荐的配置方式,可以完全替代xml配置. 1     @Configuration 和 @Bean Spring的Java配置方式是通过 @Configuration ...

  2. Nth Largest Value

    Problem Description For this problem, you will write a program that prints the Nth largest value in ...

  3. Holedox Eating HDU4302 模拟

    Problem Description Holedox is a small animal which can be considered as one point. It lives in a st ...

  4. [bzoj 2705][SDOI2012]Longge的问题（数学）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2705 分析: 设k为n的因数 设f[k]为gcd(x,n)==k的x的个数,容易知道a ...

  5. 洛谷（cogs 1293/bzoj 1212） P2292 [HNOI2004]L语言

    1293. [HNOI2004] L语言 ★★★   输入文件:language.in   输出文件:language.out   简单对比时间限制:1 s   内存限制:162 MB [题目描述] ...

  6. 眼镜h5

    // 填充博乐纯门店数据 (function() { var $biotrueCitySelect = $('.regional-popup select.city'); jQuery.each(st ...

  7. Shine.js实现动态阴影效果

    Shine.js 是一个用于实现美丽阴影的 JS 库. 特性 1.可动态旋转光的位置,投影出不同的阴影效果 2.可定制的阴影, 3.没有库依赖关系,AMD兼容使用基于内容的文本或框阴影 4.在浏览器支 ...

  8. git项目创建

    1.在gitserver上创建git项目如图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill ...

  9. NYOJ 330 一个简单的数学题【数学题】

    /* 题目大意:求解1/n; 解题思路:写一个输出小数的算法 关键点:怎样处理小数点循环输出 解题人:lingnichong 解题时间:2014-10-18 09:04:22 解题体会:输出小数的算法 ...

  10. JSP开发学习参考文章

    配置JDK和Tomcat环境变量 http://blog.csdn.net/lijiazhi1987/article/details/2742181 eclipse maven plugin 插件安装 ...