fix(statistic): fix font family and add docs detail

docs/web/api/statistic.en-US.md

@@ -6,42 +6,44 @@ usage: { title: "", description: "" }
 spline: data
 ---
 
-### 基础用法
+Statistic is used to highlight and display a set of numeric or descriptive statistical data. 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.
+
+### Basic
 
 Use when you need to highlight a set of numeric or descriptive statistical data.
 
 {{ base }}
 
-### 趋势不同的组件
+### Trend
 
 Set the trend state of the component through trend and control the trend display position through trendPlacement.
 
 {{ trend }}
 
-### 颜色
+### Color
 
 The color style provides five default TDesign style color values, which can also be customized.
 
 {{ color }}
 
-### 前缀后缀/自定义
+### Prefix/Suffix Slot
 
 Customize through the prefix and suffix slots.
 
 {{ slot }}
 
-### 数值动画
+### Animation
 
 Configure the initial value and duration of the animation through animation. Use the animationStart attribute to control when the animation starts. If there are special requirements, you can also use ref to get the instance and call start for control.
 
 {{ animation }}
 
-### 加载中
+### Loading
 
 Control the loading state of the numeric value through loading.
 
 {{ loading }}
 
-### 组合使用
+### Combination
 
 {{ combination }}

docs/web/api/statistic.md

@@ -2,10 +2,12 @@
 title: Statistic 统计数值
 description: 突出展示某个或某组数字、带描述的统计类数据。
 isComponent: true
-usage: { title: '', description: '' }
+usage: { title: "", description: "" }
 spline: data
 ---
 
+Statistic 组件用于突出展示某个或某组数字、带描述的统计类数据，如果需要与站点演示一直的数字字体效果，推荐您到 <a href="https://tdesign.tencent.com/design/fonts">数字字体章节</a>，将 TCloudNumber 字体下载并将包含的 TCloudNumberVF.ttf 做为 TCloudNumber 字体资源引入到具体项目中使用。
+
 ### 基础用法
 
 当需要突出某个或某组数字或展示带描述的统计类数据时使用。
@@ -23,6 +25,7 @@ spline: data
 颜色风格默认提供 TDesign 风格的五种颜色值，也可以使用自定义色值。
 
 {{ color }}
+
 ### 前缀后缀/自定义
 
 通过 prefix 和 suffix 插槽自定义。
@@ -31,8 +34,8 @@ spline: data
 
 ### 数值动画
 
-通过 `animatio`  配置动画的初始值和持续时间。使用 `animationStart`属性可以控制动画开始时刻。
-如果有特殊需求时也可以通过ref获取实例，调用`start`进行控制。
+通过 `animation` 配置动画的初始值和持续时间。使用 `animationStart`属性可以控制动画开始时刻。
+如果有特殊需求时也可以通过 ref 获取实例，调用`start`进行控制。
 
 {{ animation }}
 
@@ -45,4 +48,3 @@ spline: data
 ### 组合使用
 
 {{ combination }}
-

style/web/components/statistic/_index.less

@@ -24,11 +24,13 @@
     &-value {
       font-size: @statistic-value-font-size;
       line-height: @statistic-value-line-height;
+      font-family: @statistic-font-family;
     }
 
     &-unit {
       font-size: @statistic-unit-font-size;
       margin-left: @statistic-unit-margin-left;
+      font-family: @statistic-font-family;
     }
 
     &-suffix {
@@ -51,5 +53,8 @@
 
   &-extra {
     margin-top: @statistic-extra-margin-top;
+    .@{prefix}-space .@{prefix}-space-item {
+      display: flex;
+    }
   }
 }

style/web/components/statistic/_var.less

@@ -21,3 +21,8 @@
 @statistic-suffix-margin-left: @comp-margin-s;
 
 @statistic-extra-margin-top: @spacer-1;
+
+@statistic-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;