# Text Demo

- order: 3

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

---

```js
/** @jsx createElement */
import { Text, View, Page, Icon, Button, ThemeProvider, Env } from 'weex-nuke';
const { StyleProvider } = ThemeProvider;
const { isWeex, appInfo } = Env;
import { createElement, Component, render } from 'rax';
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 />);
```