IconFont

A.简要说明

App中字体介绍：

1. App内置字体

   字体名(fontFamily)：ct_font_common

   支持的字体及字体编码：参考携程通用图标库

   使用：可以任意使用，设置fontfamily为ct_font_common即可

2. CRN使用字体

   字体名(fontFamily)：前缀为crnfont, 比如crn_font_xxx

   使用<简要说明，详细参考下文步骤>：

   1. 注册字体
      • 开发目录下新增fonts目录，并在package.json里面添加配置。(设置之后，生产打包的时候，会将该字体文件打包到文件里面)；
      • HTTP开发/Debug环境，使用 CRNDev.registryIconFont 注册字体库。
   2. 控件使用
      • < Text > 样式设置fontFamily 为crn_font_xxxxx;

B.详细步骤

步骤1

获得需要使用的IconFont文件，放置到工程根目录下的fonts文件夹下，携程IconLab中可以获取到相应的IconFont。需要注意的是携程IconLab中的携程通用图标库已经放置在了APP中无需再进行下载了，具体使用下文介绍。

步骤2

在业务代码中添加font，具体代码如下：

//style代码
fontTest: {
    fontSize: 60,
    margin: 10,
    fontFamily: "crn_font_test"
}

//js代码

<
Text style={styles.fontTest}
>

    abc
&
#xe000;
&
#xe003;
&
#xe004;
&
#xe005;def

<
/Text
>

其中fontFamily是在fonts文件夹中的ttf文件名，该文件名需要注意有命名规范，必须以crn_font开头，请在下载IconFont文件的时候注意文件命名，不然font会没有显示效果。

步骤3

使用CRNDev.registryIconFont注册本地IconFont文件，具体请参见CRNDev。其中携程通用图标库的fontFamilyName为ct_font_common。

步骤4

CRN中IconFont仅仅只是指定开发环境还不够，还需要指定一下生产打包的环境，即在工程目录下的package.json文件中添加一个IconFont字段，具体如下：

"iconFont": [
    "crn_font_test",
    "crn_font_test2",
    "crn_font_test3",
    ...
]

其中iconFont list中的子项都是项目中使用到的位置于工程根目录下的fonts文件夹中的IconFont文件，注意请不要把文件扩展名加上，仅仅文件名就够了。这么做是为了打包的时候能够把IconFont携带到CRN包中。

注意事项

• IconFont必须下载放置到工程根目录下的fonts文件夹中；
• 携程通用图标库 已经在携程主APP中拥有了，所以不需要再下载改IconFont库；
• 下载的IconFont文件必须以 crn_font 开头；
• 开发时候，需使用CRNDev.registryIconFont注册本地ttf文件；
• 务必记得在工程目录下的package.json文件中添加一个iconFont字段。