Tencent · anlyyao · Apr 22, 2026 · Apr 22, 2026
diff --git a/docs/mobile/api/typography.en-US.md b/docs/mobile/api/typography.en-US.md
@@ -0,0 +1,26 @@
+---
+title: Typography
+description: Typography is used to basic text layout and style.
+isComponent: true
+spline: base
+---
+
+### Base
+
+{{ base }}
+
+### Combination
+
+{{ combination }}
+
+### Theme
+
+{{ theme }}
+
+### Copyable
+
+{{ copyable }}
+
+### Ellipsis
+
+{{ ellipsis }}
diff --git a/docs/mobile/api/typography.md b/docs/mobile/api/typography.md
@@ -0,0 +1,26 @@
+---
+title: Typography 排版
+description: 排版用于文本基础编排和样式，使用排版组件，可以快速完成页面中的文本内容制作，同时配合其他组件完成暗黑明亮模式切换等风格统一的需求
+isComponent: true
+spline: base
+---
+
+### 基础文本
+
+{{ base }}
+
+### 组合用法
+
+{{ combination }}
+
+### 主题样式
+
+{{ theme }}
+
+### 可复制
+
+{{ copyable }}
+
+### 文本省略
+
+{{ ellipsis }}
diff --git a/js/global-config/mobile/locale/ar_KW.ts b/js/global-config/mobile/locale/ar_KW.ts
@@ -121,6 +121,11 @@ export default {
     finish: 'أنهي',
     back: 'العودة',
   },
+  typography: {
+    expandText: 'توسيع',
+    collapseText: 'طي',
+    copiedText: 'النسخ اكتمل',
+  },
   qrcode: {
     expiredText: 'منتهي الصلاحية',
     refreshText: 'ينعش',

diff --git a/js/global-config/mobile/locale/en_US.ts b/js/global-config/mobile/locale/en_US.ts
@@ -110,6 +110,11 @@ export default {
     finish: 'Finish',
     back: 'Back',
   },
+  typography: {
+    expandText: 'more',
+    collapseText: 'collapse',
+    copiedText: 'copied',
+  },
   qrcode: {
     expiredText: 'expired',
     refreshText: 'refresh',

diff --git a/js/global-config/mobile/locale/it_IT.ts b/js/global-config/mobile/locale/it_IT.ts
@@ -109,6 +109,11 @@ export default {
     finish: 'Finisci',
     back: 'Indietro',
   },
+  typography: {
+    expandText: 'Espandere',
+    collapseText: 'ripiegare',
+    copiedText: 'Copia completata',
+  },
   qrcode: {
     expiredText: 'scaduto',
     refreshText: 'aggiornare',

diff --git a/js/global-config/mobile/locale/ja_JP.ts b/js/global-config/mobile/locale/ja_JP.ts
@@ -96,6 +96,11 @@ export default {
     finish: '完了',
     back: '戻る',
   },
+  typography: {
+    expandText: 'もっと拡大する',
+    collapseText: '畳む',
+    copiedText: 'コピー成功',
+  },
   qrcode: {
     expiredText: '期限切れ',
     refreshText: 'リフレッシュ',

diff --git a/js/global-config/mobile/locale/ko_KR.ts b/js/global-config/mobile/locale/ko_KR.ts
@@ -96,6 +96,11 @@ export default {
     finish: '완료',
     back: '뒤로',
   },
+  typography: {
+    expandText: '더보기',
+    collapseText: '접기',
+    copiedText: '복사 성공',
+  },
   qrcode: {
     expiredText: '만료됨',
     refreshText: '새로 고치다',

diff --git a/js/global-config/mobile/locale/ru_RU.ts b/js/global-config/mobile/locale/ru_RU.ts
@@ -121,6 +121,11 @@ export default {
     finish: 'Готово',
     back: 'Назад',
   },
+  typography: {
+    expandText: 'Развернуть',
+    collapseText: 'Свернуть',
+    copiedText: 'Скопировано',
+  },
   qrcode: {
     expiredText: 'истекший',
     refreshText: 'обновить',

diff --git a/js/global-config/mobile/locale/zh_CN.ts b/js/global-config/mobile/locale/zh_CN.ts
@@ -97,6 +97,11 @@ export default {
     finish: '完成',
     back: '返回',
   },
+  typography: {
+    expandText: '展开',
+    collapseText: '收起',
+    copiedText: '复制成功',
+  },
   qrcode: {
     expiredText: '二维码过期',
     refreshText: '点击刷新',

diff --git a/js/global-config/mobile/locale/zh_TW.ts b/js/global-config/mobile/locale/zh_TW.ts
@@ -96,6 +96,11 @@ export default {
     finish: '完成',
     back: '返回',
   },
+  typography: {
+    expandText: '展開',
+    collapseText: '收起',
+    copiedText: '復製成功',
+  },
   qrcode: {
     expiredText: '二維碼過期',
     refreshText: '點擊刷新',

diff --git a/style/mobile/components/typography/_docs.less b/style/mobile/components/typography/_docs.less
@@ -0,0 +1,23 @@
+@import './_var.less';
+
+// TDesign 站点中有代码code元素的相关样式 为正常展示需要覆盖为typography样式
+div[name='DEMO'] *:not(pre) > .t-typography code {
+  border-radius: @radius-default;
+  border: 1px solid @component-border;
+  margin: 0 calc(@spacer / 2);
+  background-color: @bg-color-secondarycontainer;
+  padding: 0 @spacer;
+  color: @text-color-primary;
+  transition: background-color 0.2s;
+  font: @font-body-small;
+  font-family: @typography-code-family;
+}
+
+// 纵向展示 Text 组件DEMO示例中去掉 margin
+div[name='DEMO'] .vertical-demo .t-typography code {
+  margin: 0;
+}
+
+div[name='DEMO'] .vertical-demo .t-typography kbd {
+  margin: 0;
+}
diff --git a/style/mobile/components/typography/_index.less b/style/mobile/components/typography/_index.less
@@ -0,0 +1,114 @@
+@import '../../base.less';
+
+@import './_var.less';
+
+.@{prefix}-typography {
+  color: @typography-text-primary-color;
+  font: @font-body-medium;
+  margin: @spacer-2 0;
+
+  // 标题
+  h1& {
+    font: @typography-h1-font;
+    margin-top: @spacer-4;
+    margin-bottom: @spacer-3;
+  }
+
+  h2& {
+    font: @typography-h2-font;
+    margin-top: @spacer-4;
+    margin-bottom: @spacer-3;
+  }
+
+  h3& {
+    font: @typography-h3-font;
+    margin-top: @spacer-4;
+    margin-bottom: @spacer-2;
+  }
+
+  h4& {
+    font: @typography-h4-font;
+    margin-top: @spacer-3;
+    margin-bottom: @spacer-2;
+  }
+
+  h5& {
+    font: @typography-h5-font;
+    margin-top: @spacer-3;
+    margin-bottom: @spacer-2;
+  }
+
+  h6& {
+    font: @typography-h6-font;
+  }
+
+  // 加粗样式
+  strong {
+    font-weight: @typography-text-strong;
+  }
+
+  // 标记样式
+  mark {
+    background-color: @typography-text-mark-color;
+  }
+
+  // 代码样式
+  code {
+    border-radius: @radius-default;
+    border: 1px solid @component-border;
+    margin: 0 @spacer;
+    background-color: @bg-color-secondarycontainer;
+    padding: 0 @spacer;
+    transition: background-color .2s;
+    white-space: nowrap;
+    font: @typography-code-font;
+    font-family: @typography-code-family;
+    display: inline-block;
+  }
+
+  // 键盘样式
+  kbd {
+    border-radius: @radius-default;
+    border: 1px solid @component-border;
+    margin: 0 calc(@spacer / 2);
+    background-color: @bg-color-secondarycontainer;
+    padding: 0 @spacer;
+    box-shadow: 0 1px 0 0 @component-border;
+    font: @typography-code-font;
+    font-family: @typography-code-family;
+    display: inline-block;
+  }
+
+  // 不可选样式
+  &--disabled {
+    color: @typography-text-disabled-color;
+    cursor: not-allowed;
+  }
+
+  // 主题样式
+  &--success {
+    color: @typography-text-success-color;
+  }
+
+  &--warning {
+    color: @typography-text-warning-color;
+  }
+
+  &--error {
+    color: @typography-text-error-color;
+  }
+
+  &--secondary {
+    color: @typography-text-secondary-color;
+  }
+
+  &-ellipsis-symbol,
+  .t-icon-copy {
+    color: @typography-icon-color;
+    cursor: pointer;
+  }
+
+  .t-icon-checked {
+    color: @success-color;
+  }
+}
diff --git a/style/mobile/components/typography/_var.less b/style/mobile/components/typography/_var.less
@@ -0,0 +1,29 @@
+@typography-text-primary-color: @text-color-primary;
+@typography-text-secondary-color: @text-color-secondary;
+@typography-text-disabled-color: @text-color-disabled;
+@typography-text-success-color: @success-color;
+@typography-text-error-color: @error-color;
+@typography-text-warning-color: @warning-color;
+@typography-text-mark-color: #fcdf47;
+@typography-icon-color: @brand-color;
+
+@typography-text-strong: 600;
+
+@typography-text-font: @font-body-medium;
+@typography-code-font: @font-body-small;
+@typography-h1-font: @font-headline-large;
+@typography-h2-font: @font-headline-medium;
+@typography-h3-font: @font-headline-small;
+@typography-h4-font: @font-title-large;
+@typography-h5-font: @font-title-medium;
+@typography-h6-font: @font-title-small;
+
+@typography-code-family:
+  Source Code Pro,
+  -apple-system,
+  BlinkMacSystemFont,
+  Segoe UI,
+  Roboto,
+  Hiragino Sans GB,
+  Microsoft YaHei UI,
+  Microsoft YaHei;