CSS基本样式之文字与文本样式(3)CSS3-自定义字体

一、@font-face

@font-face:允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,可以消除对用户电脑字体的依赖
语法:

@font-face {
font-family: "Damu";
    src:url("http://developer.mozilla.org//=VeraSeBd.ttf");
}

font-family:所指定的字体名字将会被用于font或font-family属性
Src:字体资源

二、字体图标

1.Adobe illustrator
AI是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的矢量图形处理工具。 该软件主要应用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等,也可以为线稿提供较高的精度和控制,适合生产任何小型设计到大型的复杂项目

2.FontLab

FontLab是一个专业级的字体编辑软件,广泛应用于字体 设计人员和排版印刷业等专业场合。它能够对已有的字体进行修改,也可以完全按照要求 重新设计需要的字体。

3.字体兼容处理网站: https://www.fontsquirrel.com/tools/webfont-generator

4.icomoon字体图标:https://icomoon.io/#home

5.字体图标基本思路

  • 设计一套矢量图
  • 将不同的矢量图绑定到不同的字符上生成自定义字体
  • 一般通过工具或者站点来处理
  • 在页面中运用

三、优势

1、减少http请求
2、放大不会失帧

四、AI图标
五、SVG图标

你可能感兴趣的:(CSS/CSS3)