# Text Demo

- order: 3

自定义字体，仅可用于 AE 客户端

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Text from 'nuke-text';
import View from 'nuke-view';
import Page from 'nuke-page';
import Icon from 'nuke-icon';
import Button from 'nuke-button';
import { StyleProvider } from 'nuke-theme-provider';
import { isWeex, appInfo } from 'nuke-env';

const rtlText = 'مرحبا كيف حالك؟';

class TextDemo extends Component {
  constructor() {
    super();
    // only wrok on AE client
    if (isWeex && appInfo.platform === 'iOS') {
      const dom = require('@weex-module/dom');
      dom.addRule('fontFace', {
        fontFamily: 'OpenSans',
        src: "url('local:///OpenSans.bundle/OpenSans-Regular.ttf')"
      });
      dom.addRule('fontFace', {
        fontFamily: 'OpenSans-Bold',
        src: "url('local:///OpenSans.bundle/OpenSans-Bold.ttf')"
      });
    }
  }
  render() {
    return (
      <StyleProvider commonConfigs={{ fontFamily: 'OpenSans' }}>
        <Page title="Text">
          <Page.Intro main="OpenSans" />
          <View style={styles.result}>
            <Text style={[styles.resultText, { fontSize: '24rem' }]}>常规文字大小24rem，字体是OpenSans</Text>
            <Icon name="message" />
          </View>
          <Page.Intro main="OpenSans-bold" sub="RTL" />
          <StyleProvider commonConfigs={{ fontFamily: 'OpenSans-bold' }}>
            <View style={[styles.result, { flexDirection: 'column' }]}>
              <Text style={[styles.resultText, { fontSize: '24rem' }]}>常规文字大小24rem，字体是OpenSans-bold</Text>
              <Button type="primary">OpenSans-bold</Button>
            </View>
          </StyleProvider>
        </Page>
      </StyleProvider>
    );
  }
}
const styles = {
  result: {
    flexDirection: 'row'
  },
  resultText: {
    fontSize: 28
  }
};
render(<TextDemo />);
```