(十五).web字体

WEB字体

1.1 web 字体基本语法

/* 引入Web字体 给web字体取名字*/
@font-face {
      font-family: "FZSJ-WSMQSJW";
      src: url("FZSJ-WSMQSJW.woff2") format("woff2"),	/* chrome、firefox opera  safari  edge 最佳格式 */
           url("FZSJ-WSMQSJW.woff") format("woff"),	/* chrome、firefox opera  safari  IE9+ 最佳格式 */
           url("FZSJ-WSMQSJW.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
           url("FZSJ-WSMQSJW.eot") format("embedded-opentype"),  /* IE9兼容模式 */
           url("FZSJ-WSMQSJW.svg") format("svg");	/* iOS 4.1- */
      font-weight: normal;
      font-style: normal;
}
/*使用web字体*/
.aritcle {
    font-family: "FZSJ-WSMQSJW";
}

字体格式的转换工具：

• https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具
• https://www.fontke.com/tool/fontface/ 字客网

1.2 定制字体（字体中仅包含特点的几个字）

字体定制工具：

• https://www.iconfont.cn/webfont?spm=a313x.7781068.0.d81ec59f2#!/webfont/index 阿里Web字体
• http://www.youziku.com/ 字体库网站
• https://www.ziti163.com/webfont/create.aspx 字体网

1.3 字体图标

① 阿里图标

地址： http://www.iconfont.cn/

② font-awesome

地址：http://fontawesome.dashgame.com/

③ 字体图标制作工具 icoMoon

地址： http://icomoon.io/app/#/select