Typography 排版

我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。

字体

import { Fragment } from "react";const FONT_TERMS = [  "pingfang",  "hiragino",  "microsoft",  "helvetica",  "arial",];const IMAGE_BASE = "https://element-plus.org/images/typography";export default function TypographyFont() {  return (    <div className="demo-term-box">      {FONT_TERMS.map((term, index) => (        <Fragment key={term}>          <img            className={              index === 2                ? "demo-term-box__img demo-term-box__img--last is-light"                : "demo-term-box__img is-light"            }            src={`${IMAGE_BASE}/term-${term}.png`}            alt=""          />          <img            className={              index === 2                ? "demo-term-box__img demo-term-box__img--last is-dark"                : "demo-term-box__img is-dark"            }            src={`${IMAGE_BASE}/term-${term}-dark.png`}            alt=""          />        </Fragment>      ))}    </div>  );}

字号

Level	Font Size	Demo
Supplementary text	12px Extra Small	Build with Element
Body (small)	13px Small	Build with Element
Body	14px Base	Build with Element
Small Title	16px Medium	Build with Element
Title	18px Large	Build with Element
Main Title	20px Extra Large	Build with Element

const FONT_SIZES = [  { level: "Supplementary text", type: "extra-small", value: "12px" },  { level: "Body (small)", type: "small", value: "13px" },  { level: "Body", type: "base", value: "14px" },  { level: "Small Title", type: "medium", value: "16px" },  { level: "Title", type: "large", value: "18px" },  { level: "Main Title", type: "extra-large", value: "20px" },];function formatType(type: string) {  return type    .split("-")    .map((item) => item.charAt(0).toUpperCase() + item.slice(1))    .join(" ");}export default function TypographyConvention() {  return (    <table className="demo-typo-size">      <tbody>        <tr>          <td>Level</td>          <td>Font Size</td>          <td className="color-dark-light">Demo</td>        </tr>        {FONT_SIZES.map((fontSize) => (          <tr            key={fontSize.type}            className={`demo-typo-size__row demo-typo-size__row--${fontSize.type}`}          >            <td>{fontSize.level}</td>            <td>              {fontSize.value} {formatType(fontSize.type)}            </td>            <td>Build with Element</td>          </tr>        ))}      </tbody>    </table>  );}

行高

line-height:1 No line height
line-height:1.3 Compact
line-height:1.5 Regular
line-height:1.7 Loose

const IMAGE_BASE = "https://element-plus.org/images/typography";const LINE_HEIGHTS = [  { value: "1", note: "No line height" },  { value: "1.3", note: "Compact" },  { value: "1.5", note: "Regular" },  { value: "1.7", note: "Loose" },];export default function TypographyLineHeight() {  return (    <div className="demo-typo-lineheight">      <img        className="lineH-left is-light"        src={`${IMAGE_BASE}/line-height.png`}        alt=""      />      <img        className="lineH-left is-dark"        src={`${IMAGE_BASE}/line-height-dark.png`}        alt=""      />      <ul className="lineH-right">        {LINE_HEIGHTS.map((item) => (          <li key={item.value}>            line-height:{item.value} <span>{item.note}</span>          </li>        ))}      </ul>    </div>  );}

Font-family

font-family:
  Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
  'Microsoft YaHei', '微软雅黑', Arial, sans-serif;