# 文字

## 建议

字体系统的构建，是「动态秩序之美」的第一步。在实际的设计中，我们还有三点建议：

1. 建立体系化的设计思路：在同一个系统的 UI
   设计中先建立体系化的设计思路，对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，提高字体应用的性价比，减少不必要的样式浪费。
2. 少即是多：在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。
3. 尝试让字体像音符一样跳跃：在需要拉开差距的时候可以尝试在字阶表中跳跃地选择字体大小，会令字阶之间产生一种微妙的韵律感。

## 字体

### 中文

> 中文字体设计默认使用苹方-简体，开发若无特殊要求推荐优先使用默认的界面字体 字重多数情况下，只出现 Regular 和 Medium 两种字体重量

### 西文

> 西文字体设计默认使用苹方-简体，开发若无特殊要求推荐优先使用默认的界面字体 字重多数情况下，只出现 Regular 和 Medium 两种字体重量

### 数字

> 数字字体正常文段显示可使用苹方-简体，当数字作为重要展示（如：大号数据展示，价格展示….）时，需使用 Oswald 字体 字重多数情况下，只出现 Regular 和 Medium 两种字体重量

```tsx
/**
 * inline: true
 *
 */
import React from 'react';
import { getDefaultTheme } from '@wakeapp/components';

export default () => {
  const DEFAULT_THEME = getDefaultTheme();
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-family)', marginBottom: '20px' }}>
        正文字体：var(--font-family) = <span className="text-gray-2 font-medium">{DEFAULT_THEME.fontFamily}</span>
      </div>
      <div style={{ fontFamily: 'var(--font-family-serif)', marginBottom: '20px' }}>
        衬线字体：var(--font-family-serif) ={' '}
        <span className="text-gray-2 font-medium">{DEFAULT_THEME.fontFamilySerif}</span>
      </div>
      <div style={{ fontFamily: 'var(--font-family-mono)', marginBottom: '20px' }}>
        等宽字体：var(--font-family-mono) ={' '}
        <span className="text-gray-2 font-medium">{DEFAULT_THEME.fontFamilyMono}</span>
      </div>
      <div style={{ fontFamily: 'var(--font-family-number)', marginBottom: '20px' }}>
        数字字体(1234567890+-)： var(--font-family-number){' '}
        <span className="text-gray-2 font-medium">{DEFAULT_THEME.fontFamilyNumber}</span>
      </div>
    </div>
  );
};
```

## 字号与行高

```tsx
/**
 * inline: true
 *
 */

import React from 'react';
import { WKView, getRawDefaultTheme } from '@wakeapp/components';
import upperFirst from 'lodash/upperFirst';
import kebabCase from 'lodash/kebabCase';

const fontLagend = [
  { desc: '辅助文字', size: '24rpx', height: '40rpx', fonst: 'sm' },
  { desc: '正文', size: '28rpx', height: '44rpx', fonst: '' },
  { desc: '一级标题', size: '32rpx', height: '48rpx', fonst: 'lg' },
  { desc: '二级标题', size: '36rpx', height: '52rpx', fonst: 'xl' },
  { desc: '一级标题', size: '40rpx', height: '56rpx', fonst: '2Xl' },
];

const FONT_SIZE = ['sm', '', 'lg', 'xl', '2Xl'];

export default () => {
  return (
    <div>
      {FONT_SIZE.map(i => {
        const DEFAULT_THEME = getRawDefaultTheme();
        const fontSize = `fontSize${upperFirst(i)}`;
        const lineHeight = `lineHeight${upperFirst(i)}`;
        const fontSizeVariant = `var(--${kebabCase(fontSize)})`;
        const lineHeightVariant = `var(--${kebabCase(lineHeight)})`;

        const fontSizeValue = DEFAULT_THEME[fontSize];
        const lineHeightValue = DEFAULT_THEME[lineHeight];

        const toPX = v => {
          return v.replace(/(\d*)rpx/, (m, p1) => {
            return parseInt(p1) / 2 + 'px';
          });
        };

        return (
          <WKView
            key={i}
            style={{
              fontSize: toPX(fontSizeValue),
              lineHeight: toPX(lineHeightValue),
            }}
          >
            {fontSizeVariant} = {fontSizeValue} + {lineHeightVariant} = {lineHeightValue}
          </WKView>
        );
      })}
    </div>
  );
};
```
