feat(button): support custom button font-family

packages/components/button/README.en-US.md

@@ -178,11 +178,10 @@ Name | Default Value | Description
 --td-button-default-outline-color | @text-color-primary | -
 --td-button-default-outline-disabled-color | @component-border | -
 --td-button-default-text-active-bg-color | @bg-color-container-active | -
---td-button-extra-small-font-size | @font-size-base | -
+--td-button-extra-small-font | @font-mark-medium | -
 --td-button-extra-small-height | 56rpx | -
 --td-button-extra-small-icon-size | 36rpx | -
 --td-button-extra-small-padding-horizontal | 16rpx | -
---td-button-font-weight | 600 | -
 --td-button-ghost-border-color | @button-ghost-color | -
 --td-button-ghost-color | @text-color-anti | -
 --td-button-ghost-danger-border-color | @error-color | -
@@ -195,7 +194,7 @@ Name | Default Value | Description
 --td-button-ghost-primary-hover-color | @brand-color-active | -
 --td-button-icon-border-radius | 8rpx | -
 --td-button-icon-spacer | @spacer | -
---td-button-large-font-size | @font-size-m | -
+--td-button-large-font | @font-mark-large | -
 --td-button-large-height | 96rpx | -
 --td-button-large-icon-size | 48rpx | -
 --td-button-large-padding-horizontal | 40rpx | -
@@ -215,7 +214,7 @@ Name | Default Value | Description
 --td-button-light-outline-disabled-color | @brand-color-disabled | -
 --td-button-light-text-active-bg-color | @bg-color-container-active | -
 --td-button-light-text-color | @brand-color | -
---td-button-medium-font-size | @font-size-m | -
+--td-button-medium-font | @font-mark-large | -
 --td-button-medium-height | 80rpx | -
 --td-button-medium-icon-size | 40rpx | -
 --td-button-medium-padding-horizontal | 32rpx | -
@@ -238,7 +237,7 @@ Name | Default Value | Description
 --td-button-primary-text-active-bg-color | @bg-color-container-active | -
 --td-button-primary-text-color | @brand-color | -
 --td-button-primary-text-disabled-color | @brand-color-disabled | -
---td-button-small-font-size | @font-size-base | -
+--td-button-small-font | @font-mark-medium | -
 --td-button-small-height | 64rpx | -
 --td-button-small-icon-size | 36rpx | -
 --td-button-small-padding-horizontal | 24rpx | -

packages/components/button/README.md

@@ -180,11 +180,10 @@ t-class-loading | 加载样式类
 --td-button-default-outline-color | @text-color-primary | -
 --td-button-default-outline-disabled-color | @component-border | -
 --td-button-default-text-active-bg-color | @bg-color-container-active | -
---td-button-extra-small-font-size | @font-size-base | -
+--td-button-extra-small-font | @font-mark-medium | -
 --td-button-extra-small-height | 56rpx | -
 --td-button-extra-small-icon-size | 36rpx | -
 --td-button-extra-small-padding-horizontal | 16rpx | -
---td-button-font-weight | 600 | -
 --td-button-ghost-border-color | @button-ghost-color | -
 --td-button-ghost-color | @text-color-anti | -
 --td-button-ghost-danger-border-color | @error-color | -
@@ -197,7 +196,7 @@ t-class-loading | 加载样式类
 --td-button-ghost-primary-hover-color | @brand-color-active | -
 --td-button-icon-border-radius | 8rpx | -
 --td-button-icon-spacer | @spacer | -
---td-button-large-font-size | @font-size-m | -
+--td-button-large-font | @font-mark-large | -
 --td-button-large-height | 96rpx | -
 --td-button-large-icon-size | 48rpx | -
 --td-button-large-padding-horizontal | 40rpx | -
@@ -217,7 +216,7 @@ t-class-loading | 加载样式类
 --td-button-light-outline-disabled-color | @brand-color-disabled | -
 --td-button-light-text-active-bg-color | @bg-color-container-active | -
 --td-button-light-text-color | @brand-color | -
---td-button-medium-font-size | @font-size-m | -
+--td-button-medium-font | @font-mark-large | -
 --td-button-medium-height | 80rpx | -
 --td-button-medium-icon-size | 40rpx | -
 --td-button-medium-padding-horizontal | 32rpx | -
@@ -240,7 +239,7 @@ t-class-loading | 加载样式类
 --td-button-primary-text-active-bg-color | @bg-color-container-active | -
 --td-button-primary-text-color | @brand-color | -
 --td-button-primary-text-disabled-color | @brand-color-disabled | -
---td-button-small-font-size | @font-size-base | -
+--td-button-small-font | @font-mark-medium | -
 --td-button-small-height | 64rpx | -
 --td-button-small-icon-size | 36rpx | -
 --td-button-small-padding-horizontal | 24rpx | -

packages/components/button/button.less

@@ -2,12 +2,11 @@
 
 @button-border-width: var(--td-button-border-width, 4rpx);
 @button-border-radius: var(--td-button-border-radius, @radius-default);
-@button-font-weight: var(--td-button-font-weight, 600);
 
-@button-extra-small-font-size: var(--td-button-extra-small-font-size, @font-size-base);
-@button-small-font-size: var(--td-button-small-font-size, @font-size-base);
-@button-medium-font-size: var(--td-button-medium-font-size, @font-size-m);
-@button-large-font-size: var(--td-button-large-font-size, @font-size-m);
+@button-extra-small-font: var(--td-button-extra-small-font, @font-mark-medium);
+@button-small-font: var(--td-button-small-font, @font-mark-medium);
+@button-medium-font: var(--td-button-medium-font, @font-mark-large);
+@button-large-font: var(--td-button-large-font, @font-mark-large);
 
 @button-extra-small-height: var(--td-button-extra-small-height, 56rpx);
 @button-small-height: var(--td-button-small-height, 64rpx);
@@ -128,17 +127,16 @@
 @button: ~'@{prefix}-button';
 
 .button-size(@size) {
-  @fontSize: 'button-@{size}-font-size';
+  @font: 'button-@{size}-font';
   @padding: 'button-@{size}-padding-horizontal';
   @height: 'button-@{size}-height';
   @iconSize: 'button-@{size}-icon-size';
 
   .@{button}--size-@{size} {
-    font-size: @@fontSize;
+    font: @@font;
     padding-left: @@padding;
     padding-right: @@padding;
     height: @@height;
-    line-height: @@height;
 
     & .@{button}__icon {
       font-size: @@iconSize;
@@ -251,11 +249,6 @@
   touch-action: manipulation;
   border-radius: @button-border-radius;
   outline: none;
-  font-family:
-    PingFang SC,
-    Microsoft YaHei,
-    Arial Regular;
-  font-weight: @button-font-weight;
   vertical-align: top;
   box-sizing: border-box;
 

packages/tdesign-miniprogram/.changelog/pr-4501.md

@@ -0,0 +1,6 @@
+---
+pr_number: 4501
+contributor: liweijie0812
+---
+
+- fix(Button): ⚠️ `--td-button-xx-font-size` 系列变更为 `--td-button-xx-font`；⚠️ 移除 `--td-button-font-weight`，请改用 `--td-button-xx-font`，或者[组件库级别的 css var ](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/style/theme/_font.less)调整字号、行高、字重、字体等文本样式 @liweijie0812 ([#4501](https://github.com/Tencent/tdesign-miniprogram/pull/4501))

packages/tdesign-uniapp/.changelog/pr-4501.md

@@ -0,0 +1,6 @@
+---
+pr_number: 4501
+contributor: liweijie0812
+---
+
+- fix(Button): ⚠️ `--td-button-xx-font-size` 系列变更为 `--td-button-xx-font`；⚠️ 移除 `--td-button-font-weight`，请改用 `--td-button-xx-font`，或者[组件库级别的 css var ](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/style/theme/_font.less)调整字号、行高、字重、字体等文本样式 @liweijie0812 ([#4501](https://github.com/Tencent/tdesign-miniprogram/pull/4501))

packages/uniapp-components/button/README.en-US.md

@@ -175,11 +175,10 @@ Name | Default Value | Description
 --td-button-default-outline-color | @text-color-primary | -
 --td-button-default-outline-disabled-color | @component-border | -
 --td-button-default-text-active-bg-color | @bg-color-container-active | -
---td-button-extra-small-font-size | @font-size-base | -
+--td-button-extra-small-font | @font-mark-medium | -
 --td-button-extra-small-height | 56rpx | -
 --td-button-extra-small-icon-size | 36rpx | -
 --td-button-extra-small-padding-horizontal | 16rpx | -
---td-button-font-weight | 600 | -
 --td-button-ghost-border-color | @button-ghost-color | -
 --td-button-ghost-color | @text-color-anti | -
 --td-button-ghost-danger-border-color | @error-color | -
@@ -192,7 +191,7 @@ Name | Default Value | Description
 --td-button-ghost-primary-hover-color | @brand-color-active | -
 --td-button-icon-border-radius | 8rpx | -
 --td-button-icon-spacer | @spacer | -
---td-button-large-font-size | @font-size-m | -
+--td-button-large-font | @font-mark-large | -
 --td-button-large-height | 96rpx | -
 --td-button-large-icon-size | 48rpx | -
 --td-button-large-padding-horizontal | 40rpx | -
@@ -212,7 +211,7 @@ Name | Default Value | Description
 --td-button-light-outline-disabled-color | @brand-color-disabled | -
 --td-button-light-text-active-bg-color | @bg-color-container-active | -
 --td-button-light-text-color | @brand-color | -
---td-button-medium-font-size | @font-size-m | -
+--td-button-medium-font | @font-mark-large | -
 --td-button-medium-height | 80rpx | -
 --td-button-medium-icon-size | 40rpx | -
 --td-button-medium-padding-horizontal | 32rpx | -
@@ -235,7 +234,7 @@ Name | Default Value | Description
 --td-button-primary-text-active-bg-color | @bg-color-container-active | -
 --td-button-primary-text-color | @brand-color | -
 --td-button-primary-text-disabled-color | @brand-color-disabled | -
---td-button-small-font-size | @font-size-base | -
+--td-button-small-font | @font-mark-medium | -
 --td-button-small-height | 64rpx | -
 --td-button-small-icon-size | 36rpx | -
 --td-button-small-padding-horizontal | 24rpx | -

packages/uniapp-components/button/README.md

@@ -168,11 +168,10 @@ t-class-loading | 加载样式类
 --td-button-default-outline-color | @text-color-primary | -
 --td-button-default-outline-disabled-color | @component-border | -
 --td-button-default-text-active-bg-color | @bg-color-container-active | -
---td-button-extra-small-font-size | @font-size-base | -
+--td-button-extra-small-font | @font-mark-medium | -
 --td-button-extra-small-height | 56rpx | -
 --td-button-extra-small-icon-size | 36rpx | -
 --td-button-extra-small-padding-horizontal | 16rpx | -
---td-button-font-weight | 600 | -
 --td-button-ghost-border-color | @button-ghost-color | -
 --td-button-ghost-color | @text-color-anti | -
 --td-button-ghost-danger-border-color | @error-color | -
@@ -185,7 +184,7 @@ t-class-loading | 加载样式类
 --td-button-ghost-primary-hover-color | @brand-color-active | -
 --td-button-icon-border-radius | 8rpx | -
 --td-button-icon-spacer | @spacer | -
---td-button-large-font-size | @font-size-m | -
+--td-button-large-font | @font-mark-large | -
 --td-button-large-height | 96rpx | -
 --td-button-large-icon-size | 48rpx | -
 --td-button-large-padding-horizontal | 40rpx | -
@@ -205,7 +204,7 @@ t-class-loading | 加载样式类
 --td-button-light-outline-disabled-color | @brand-color-disabled | -
 --td-button-light-text-active-bg-color | @bg-color-container-active | -
 --td-button-light-text-color | @brand-color | -
---td-button-medium-font-size | @font-size-m | -
+--td-button-medium-font | @font-mark-large | -
 --td-button-medium-height | 80rpx | -
 --td-button-medium-icon-size | 40rpx | -
 --td-button-medium-padding-horizontal | 32rpx | -
@@ -228,7 +227,7 @@ t-class-loading | 加载样式类
 --td-button-primary-text-active-bg-color | @bg-color-container-active | -
 --td-button-primary-text-color | @brand-color | -
 --td-button-primary-text-disabled-color | @brand-color-disabled | -
---td-button-small-font-size | @font-size-base | -
+--td-button-small-font | @font-mark-medium | -
 --td-button-small-height | 64rpx | -
 --td-button-small-icon-size | 36rpx | -
 --td-button-small-padding-horizontal | 24rpx | -

packages/uniapp-components/button/button.less

@@ -2,12 +2,11 @@
 
 @button-border-width: var(--td-button-border-width, 4rpx);
 @button-border-radius: var(--td-button-border-radius, @radius-default);
-@button-font-weight: var(--td-button-font-weight, 600);
 
-@button-extra-small-font-size: var(--td-button-extra-small-font-size, @font-size-base);
-@button-small-font-size: var(--td-button-small-font-size, @font-size-base);
-@button-medium-font-size: var(--td-button-medium-font-size, @font-size-m);
-@button-large-font-size: var(--td-button-large-font-size, @font-size-m);
+@button-extra-small-font: var(--td-button-extra-small-font, @font-mark-medium);
+@button-small-font: var(--td-button-small-font, @font-mark-medium);
+@button-medium-font: var(--td-button-medium-font, @font-mark-large);
+@button-large-font: var(--td-button-large-font, @font-mark-large);
 
 @button-extra-small-height: var(--td-button-extra-small-height, 56rpx);
 @button-small-height: var(--td-button-small-height, 64rpx);
@@ -128,17 +127,16 @@
 @button: ~'@{prefix}-button';
 
 .button-size(@size) {
-  @fontSize: 'button-@{size}-font-size';
+  @font: 'button-@{size}-font';
   @padding: 'button-@{size}-padding-horizontal';
   @height: 'button-@{size}-height';
   @iconSize: 'button-@{size}-icon-size';
 
   .@{button}--size-@{size} {
-    font-size: @@fontSize;
+    font: @@font;
     padding-left: @@padding;
     padding-right: @@padding;
     height: @@height;
-    line-height: @@height;
 
     & .@{button}__icon {
       font-size: @@iconSize;
@@ -251,8 +249,6 @@
   touch-action: manipulation;
   border-radius: @button-border-radius;
   outline: none;
-  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
-  font-weight: @button-font-weight;
   vertical-align: top;
   box-sizing: border-box;