基本介绍

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. 开源的多行字符串工具： 在JS中整段地写HTML

    这样看来ES6的多行字符模板可能就不需要了-- 通过这个你可以整段整段地在JS中写HTML.SQL了. 示例 之前你得这样写 var str = '' +'<!doctype html>' ...

  2. md5加密的工具类（from 韩顺平）

    输入一个字符串,然后可以进行md5加密 import java.security.*; import java.security.spec.*; public class MyTools { publ ...

  3. Oracle删除约束和主键的语句

    https://blog.csdn.net/xue_yanan/article/details/78210654?locationNum=8&fps=1

  4. php apc缓存以及与redis的对比

    apc缓存用户数据这个会用, apc_store() 和apc_fetch()函数. 那apc 缓存php 代码,这个怎么用呢? 原文: http://blog.csdn.net/w187046226 ...

  5. ubuntu刪除升級后多余的内核

    列出所安装的内核 带有image的就是内核文件dpkg --get-selections|grep linuxlibselinux1 installlinux-386 installlinux-ima ...

  6. MVC中路由的一些内容详解

    使用路由的好处:1.能够根据系统需求,灵活的划分请求规则(不同模块请求的URL是不一样的)2.屏蔽物理路径,提高系统的安全性,以上情况是无法根据URL分析视图文件在站点目录中的位置3.有利于搜索引擎优 ...

  7. [学习笔记]JavaScript基础

    JavaScript概述 1. JavaScript定义 JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言.它是弱类型语言.仅仅能由浏览器解释运行. 当中: 脚本语言: ...

  8. wpf slider进度条的样式模板，带有进度颜色显示

    效果图: 仅仅需在前台加上这段代码就可以: <UserControl.Resources> <!--笔刷--> <LinearGradientBrush x:Key=&q ...

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  10. 七、备忘录模式Memento（行为型模式）

    其目的是,在不违反封装原则的前提下.採集和备份一个对象的内部状态以便这个对象能够在以后恢复到之前的某个状态. 在Memento模式中,有例如以下角色: 1.Memento (备忘录) * 存储Orig ...