基本介绍

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. hdu 2094拓扑排序map实现记录

    #include<stdio.h> #include<iostream> #include<algorithm> #include<string> #i ...

  2. [USACO06FEB]数字三角形

    题目描述 FJ and his cows enjoy playing a mental game. They write down the numbers from 1 to N (1 <= N ...

  3. 【触发器】MySQL触发器使用详解

    MySQL包含对触发器的支持.触发器是一种与表操作有关的数据库对象,当触发器所在表上出现指定事件时,将调用该对象,即表的操作事件触发表上的触发器的执行. 创建触发器在MySQL中,创建触发器语法如下: ...

  4. iOS消息推送原理和实现总结

    一.消息推送原理: 在实现消息推送之前先提及几个于推送相关概念,如下图:1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provi ...

  5. 【CV论文阅读】Rank Pooling for Action Recognition

    这是期刊论文的版本,不是会议论文的版本.看了论文之后,只能说,太TM聪明了.膜拜~~ 视频的表示方法有很多,一般是把它看作帧的序列.论文提出一种新的方法去表示视频,用ranking function的 ...

  6. zoj 月赛

    Wumpus Time Limit: 2 Seconds      Memory Limit: 65536 KB One day Leon finds a very classic game call ...

  7. 基于Volley，Gson封装支持JWT无状态安全验证和数据防篡改的GsonRequest网络请求类

    这段时间做新的Android项目的client和和REST API通讯框架架构设计.使用了非常多新技术,终于的方案也相当简洁优雅.client仅仅须要传Java对象,server端返回json字符串, ...

  8. J2EE基础总结（5）——EJB

    什么是EJB     JB事实上就是企业Java Beans. EJB是J2EE平台的重要组成部分. J2EE平台基于组件的企业级应用架构,提供多 层次.分布式和高事务的功能特点.     EJB提供 ...

  9. 一次c3p0连接池连接异常错误的排查

    近期写了一个数据库採集程序,大概过程是将SQLSERVER数据库的数据定时採集到Oracle数据库. 1小时出一次数据,每次数据量在2W左右.环境採用Sping3+hibernate4,数据库连接池採 ...

  10. 1732 Fibonacci数列 2

    1732 Fibonacci数列 2  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description 在“1250 F ...