您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS3 自定义字体的常识与使用

时间：02-23来源：作者：点击数：

web字体
开发人员可以为自己的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。
支持程度比较好，甚至IE低版本浏览器也能支持。不同浏览器所支持的字体格式是不一样的，所以有必要去了解一下有关字体格式的知识。

1、TureTpe(.ttf)格式
  .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

2、OpenType(.otf)格式
  .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

3、Web Open Font Format(.woff)格式
  woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

4、Embedded Open Type(.eot)格式
  .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

5、SVG(.svg)格式
  .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。 
下载字体的网站.

推荐http://www.zhaozi.cn/、http://www.youziku.com/ 查找更多中文字体

web 字体使用：
生成字体：https://www.iconfont.cn/webfont#!/webfont/index下载字体之后有使用流程

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p {
      font-family: 'webfont';
      font-size: 30px;
    }
    /* 如果在网页中使用web字体（用户电脑上没有这种字体）*/
    /* 声明字体 */
    @font-face {
      font-family: 'webfont';
      src: url('font/webfont.eot'); /* IE9*/
      src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('font/webfont.woff') format('woff'), /* chrome、firefox */
      url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
      url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
    }
  </style>
</head>
<body>
  <p>苍茫的天涯我的爱...</p>
</body>
</html>

字体图标
其实我们可以把文字理解成是一种特殊形状的图片，反之我们是不是也可以把图片制作成字体呢？答案是肯定的。
常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。
优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；
Font Awesome 使用介绍：
http://fontawesome.dashgame.com/
定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/

图标字体使用跟字体差不多推荐去 https://www.iconfont.cn 上找。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:CSS 修改滚动条样式下一篇:一文！彻底弄懂前端缓存

excel后缀xls和xlsx有	请家长收藏\|3-6岁儿童
注意！高中没入团，不能报	高考“电脑阅卷”现场