html5——web字体
基本介绍
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编码’؅‘转化来的,这是固定格式
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字体的更多相关文章
- Monotype推出基于HTML5的Web字体平台
著名字体公司Monotype近日宣布推出基于HTML5的Web字体平台,设计者可以访问近10万字体的目录. Monotype推出基于HTML5的Web字体平台 Monotype推出基于HTML5的We ...
- 如何把你的图标转换成web字体
在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局 ...
- Web字体工具整理,网页图标字体以及使用方法整理
常用网站app logo 下载: http://www.iconfont.cn/collections/show/268?spm=a313x.7781069.0.0.nDYawz 1.Web字体免费生 ...
- JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
- HTML5 web Form表单验证实例
HTML5 web Form 的开发实例! index.html <!DOCTYPE html> <html> <head> <meta charset=&q ...
- html5 web database
html5 web database <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- HTML5 Web Storage
Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...
- 制作web字体:CSS3 @font-face
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,另外@font- ...
- 深入HTML5 Web Worker应用实践:多线程编程
HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...
随机推荐
- Java中集合List,Map和Set的差别
Java中集合List,Map和Set的差别 1.List和Set的父接口是Collection.而Map不是 2.List中的元素是有序的,能够反复的 3.Map是Key-Value映射关系,且Ke ...
- 查看程序占用tomcat内存情况
近期,公司线上tomcat常常无缘无辜宕机.总结了一下定位问题的方法,仅供參考: 报错信息: Maximum number of threads (200) created for connector ...
- Oracle 闪回区满解决的方法
闪回区满: OS: rm -rf [archivelog autobackup backupset controlfile flashback onlinelog] eg : archive ...
- 谈谈c++纯虚函数的意义!
纯虚函数的存在有什么意义呢?相信大学假设有c++这么课程.在讲到纯虚函数时,必然会讲到纯虚函数是面向接口编程的基础. 如今和大家分享下纯虚函数设计的原由.目的.产生的效果. 现代软件project很庞 ...
- intellij idea 写 Helloworld
http://www.jetbrains.com/idea/webhelp/creating-and-running-your-first-java-application.html Creating ...
- maven使用(转载)
一.安装配置: 1.安装配置JDK java/javac -version 2.安装配置maven mvn -v 3.下载项目模板 mvn archetype:generate 二.详 ...
- Redis主节点内存占用过高
0. 基本情况 Redis采用集群模式,560个主节点,主从比为1:1,单台机器上为16个节点.info memory观察到主节点A单个Redis内存used_memory_rss_human为9.2 ...
- linux下的so、o、lo、a、la文件的区别
o: 编译的目标文件a: 静态库,其实就是把若干o文件打了个包so: 动态链接库(共享库) lo: 使用libtool编译出的目标文件,其实就是在o文件中添加了一些信息la: 使用libtool编译出 ...
- Javascript中的Object对象
Object是在javascript中一个被我们经常使用的类型,而且JS中的所有对象都是继承自Object对象的.虽说我们平时只是简单地使用了Object对象来存储数据,并没有使用到太多其他功能,但是 ...
- MyEclipse个性设置
MyEclipse个性设置 (1)Myeclipse 打开 jsp 的默认编辑器不好,会同时打开预览.所以做如下更改 Windows–>Perferences–>General–>E ...