style(CountDown): using TCloudNumber font

Tencent · May 11, 2024 · e6e4c65 · e6e4c65
1 parent 9a57a1a
commit e6e4c65
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/docs/mobile/api_v2/count-down.en-US.md b/docs/mobile/api_v2/count-down.en-US.md
@@ -6,6 +6,10 @@ isComponent: true
 toc: false
 ---
 
+
+> Statistic is used to display the countdown value in real time. If you need to maintain the consistent font style of numbers with the site's design, we recommend downloading the TCloudNumber font from the "Number Font" section of <a href="https://tdesign.tencent.com/design/fonts">fonts</a>, and importing the TCloudNumberVF.ttf font resource into your project for use.
+
+
 ## Code Demo
 
 ### Base Countdown

diff --git a/docs/mobile/api_v2/count-down.md b/docs/mobile/api_v2/count-down.md
@@ -6,6 +6,9 @@ isComponent: true
 toc: false
 ---
 
+> CountDown 组件用于实时展示倒计时数值。
+如果需要与站点演示一致的数字字体效果，推荐您到 <a href="https://tdesign.tencent.com/design/fonts">数字字体章节</a>，将 TCloudNumber 字体下载并将包含的 TCloudNumberVF.ttf 做为 TCloudNumber 字体资源引入到具体项目中使用。
+
 ## 代码演示
 
 ### 基础倒计时

diff --git a/style/mobile/components/count-down/v2/_index.less b/style/mobile/components/count-down/v2/_index.less
@@ -61,7 +61,7 @@
 .count-down-size(large);
 
 .@{countdown} {
-  font-family: "DIN Alternate", "Courier New", Courier, monospace;
+  font-family: @countdown-number-font-family;
 
   .@{item},
   .@{split} {

diff --git a/style/mobile/components/count-down/v2/_var.less b/style/mobile/components/count-down/v2/_var.less
@@ -26,15 +26,29 @@
 @countdown-large-no-unit-font-size: 18px; // 'large'尺寸无单位分割文本大小
 
 // 纯数字倒计时文本颜色
-@countdown-default-text-color: var(--td-countdown-default-color, @text-color-primary);
+@countdown-default-text-color: var(
+  --td-countdown-default-color,
+  @text-color-primary
+);
 // 方形/圆形底倒计时文本颜色
 @countdown-text-color: var(--td-countdown-round-color, @text-color-anti);
 // 方形/圆形底背景颜色
 @countdown-bg-color: var(--td-countdown-bg-color, @error-color-6);
 // 带方形底倒计时圆角大小
-@countdown-square-border-radius: var(--td-countdown-square-border-radius, @radius-small);
+@countdown-square-border-radius: var(
+  --td-countdown-square-border-radius,
+  @radius-small
+);
 // 带圆形底倒计时圆角大小
-@countdown-round-border-radius: var(--td-countdown-round-border-radius, @radius-circle);
+@countdown-round-border-radius: var(
+  --td-countdown-round-border-radius,
+  @radius-circle
+);
+
+@countdown-number-font-family: TCloudNumber, -apple-system, BlinkMacSystemFont,
+  Segoe UI, Roboto, Hiragino Sans GB, Microsoft YaHei UI, Microsoft YaHei,
+  Source Han Sans CN, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+  Segoe UI Symbol;
 
 @countdown: ~"@{prefix}-count-down";
 @item: ~"@{countdown}__item";