Iconfont 的支持情况

使用方式

定义 iconfont 样式：

// 本地字体
@font-face {
    font-family: 'fontLocal';
    src: url('../../../assets/fonts/font.ttf');
}
// 远程地址
@font-face {
    font-family: 'fontOnline';
    src: url(https://ss.qunarzz.com/yo/font/1.0.3/font.ttf);
}

.iconfont-local {
    font-family: 'fontLocal';
}
.iconfont-online {
    font-family: 'fontOnline';
}

定义组件：

import React from '@react';
import './index.scss';

class P extends React.Component {

    render() {
        return (<div>
            <p>本地字体</p>
            <div className="iconfont-local">&#xe351;</div>
            <div className="iconfont-local">&#xe351;</div>
            <p>远程字体</p>
            <div className="iconfont-online">&#xf077;</div>
            <div className="iconfont-online">&#xf078;</div>
        </div>);
    }
}

export default P;

需要注意的点

• 字体图标文件必须放在 assets 目录下。

• 为了兼容快应用，字体文件应仅使用 ttf(TrueType) 格式字体且不要加 format 属性，参考上面的示例。

• 使用远程 iconfont 时必须填写完整的 url 地址，不能省略前面的 http 或者 https。

• 因为娜娜奇的样式是组件封闭的，为了能够共用 iconfont 相关的样式，我们推荐建立一个公共的 iconfont 样式文件，然后在需要使用 iconfont 的组件里通过 @import 引入该样式。

支持情况