网页中使用特殊字体解决方案

使用FEZ开发框架在网页中使用特殊字体

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

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

• 将文本信息放在fez.config.js的minfonts字段中，比如：

//fez.config.js 文件

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

• 在项目目录执行 gulp fontmin
• 在项目的src/static/fonts/目录中会生成如下文件：

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

以上 样式(less)内容为：

@font-face {
    font-family: "SentyTang";
    src: url("../fonts/SentyTang.eot"); /* IE9 */
    src: url("../fonts/SentyTang.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/SentyTang.woff") format("woff"), /* chrome, firefox */
    url("../fonts/SentyTang.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url("../fonts/SentyTang.svg#SentyTang") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}

由于插件本身限制，请自行在样式文件中添加woff2的支持

• 使用@import引用@font-face样式文件并在需要显示特殊字体的样式模块使用font-family设置字体，比如：

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

.content {
  font-family: "SentyTang";
  font-size: 50px;
}

• 执行gulp打开研发环境即可实时浏览效果

更多开发帮助请参考FEZ前端模块化工程开发框架

• 实例DEMO fez-demo-fontmin