基本介绍

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. 【BZOJ4514】数字配对（费用流）

    题意: 有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数,且 ai/aj 是一个质数, 那么这两个数字可以配对,并获得 ci× ...

  2. 洛谷——P1396 营救

    P1396 营救 题目描述 “咚咚咚……”“查水表!”原来是查水表来了,现在哪里找这么热心上门的查表员啊!小明感动的热泪盈眶,开起了门…… 妈妈下班回家,街坊邻居说小明被一群陌生人强行押上了警车!妈妈 ...

  3. Android GIS开发系列-- 入门季（2） MapView与图层介绍

    一.MapView MapView是Arcgis中的最基本的类,与高德地图SDK的MapView的重要性一样.MapView的创建有两种方法,一种是在Layout文件中直接写控件.一种是实例化,Map ...

  4. C#邮件发送(含附件)

    class SendEmail { static void Main(string[] args) { string from = "发件人@yingu.com"; string ...

  5. 数据结构之---C语言实现图的邻接表存储表示

    // 图的数组(邻接矩阵)存储表示 #include <stdio.h> #include <stdlib.h> #include <string.h> #defi ...

  6. 【C语言】模拟实现memmove函数（考虑内存重叠）

    //模拟实现memmove函数(考虑内存重叠) #include <stdio.h> #include <assert.h> #include <string.h> ...

  7. wordpress 配置(ubuntu)---修改 linux hostname

    使用阿里云服务器的 ubuntu 系统时的 hostname 太扭曲,而且有些命令会受 hostname 的影响不能正常使用,所以,一定要改掉它! 永久修改 hostname: 使用 nano 命令: ...

  8. 【Bzoj2456】mode

    Position: http://www.lydsy.com/JudgeOnline/problem.php?id=2456 List Bzoj2456 mode List Description S ...

  9. Gym - 101982B 2018-2019 ACM-ICPC Pacific Northwest Regional Contest (Div. 1) B. Coprime Integers Mobius+容斥 ab间gcd(x,y)=1的对数

    题面 题意:给你 abcd(1e7),求a<=x<=b,c<=y<=d的,gcd(x,y)=1的数量 题解:经典题目,求从1的到n中选x,从1到m中选y的,gcd(x,y)=k ...

  10. [Swift通天遁地]四、网络和线程-(11)将服务器返回的JSON映射为实例对象

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...