# 使用特殊字体

# 特点

子集化：提取字体中的部分字型，最小化打包字体
利用 @font-face，把自定义字体嵌入到网页中，支持 ttf、woff、eot、svg 等格式
工程化，自动化开发流程，告别刀耕火种的人肉操作

# 开始使用

1、将原始字体文件存放在src/static/ttf/目录中

 src
 └── static
        └── ttf
             └── SentyTang.ttf

2、在cyb.config.js中配置需要显示特殊字体的文本

//cyb.config.js 文件

export default {
  fontmin: {
    text: `玉峰皎洁峦碧翠，龙跃奇舞云霞蔚；雪映秋色蓝月谷，山环帅气向妩媚。《忆.玉龙雪山》`
  }
}

3、执行 cyb fontmin命令

根据提示选择样式编译器(css/less/sass/styl)，在项目的src/static/fonts/目录中会生成如下文件：

src
└── static
    └── fonts
        ├── SentyTang.eot
        ├── SentyTang.less
        ├── SentyTang.svg
        ├── SentyTang.ttf
        ├── SentyTang.woff
        └── SentyTang.woff2

以上样式内容为：

@font-face {
    font-family: "SentyTang";
    src: url("../fonts/SentyTang.eot"); /* E9 Compat Modes */
    src: url("../fonts/SentyTang.woff2") format("woff2"), /* Modern Browsers */
    url("../fonts/SentyTang.woff") format("woff"), /* chrome, firefox */
    url("../fonts/SentyTang.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    font-style: normal;
    font-weight: normal;
}

4、使用@import引用@font-face

/* index.less */

@import '../fonts/SentyTang.less';

/* 配置font-family */
.content {
  font-family: "SentyTang";
  font-size: 50px;
}

执行cyb dev打开研发环境即可实时浏览效果。

# 高级使用

多种字体的使用

将fontmin配置项设置为数组，并配置对应的字体文件和需要显示特殊字体的文本。

// cyb.config.js

module.exports = {
  fontmin: [{
    ttf: 'HanYiLiLiangHeiJian.ttf',
    text: '前端模块化工程构建工具'
  }, {
    ttf: 'AaDongRiGuShi-2.ttf',
    text: '致力于为业务研发提供高效的工程化解决方案！'
  }]
}

# 使用特殊字体

# 特点

# 开始使用

# 高级使用

# 更多资料