diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 429ffa0efa..3b514a6e3e 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -1173,7 +1173,16 @@ export default {
     conditions_can_not_empty: 'Conditions can not be empty，if unnecessary，please delete the field',
     remark: 'Remark',
     remark_edit: 'Edit Remark',
-    remark_bg_color: 'Background Fill'
+    remark_bg_color: 'Background Fill',
+    quota_font_family: 'Value Font Family',
+    quota_text_style: 'Value Style',
+    quota_letter_space: 'Value Letter Space',
+    dimension_font_family: 'Name Font Family',
+    dimension_text_style: 'Name Style',
+    dimension_letter_space: 'Name Letter Space',
+    font_family: 'Font Family',
+    letter_space: 'Letter Space',
+    font_shadow: 'Font Shadow'
   },
   dataset: {
     parse_filed: 'Parse Field',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index 82b5fa89e7..7930e9a901 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -1172,7 +1172,16 @@ export default {
     conditions_can_not_empty: '字段的條件不能為空，若無條件，請直接刪除該字段',
     remark: '備註',
     remark_edit: '編輯備註',
-    remark_bg_color: '背景填充'
+    remark_bg_color: '背景填充',
+    quota_font_family: '值字體',
+    quota_text_style: '值樣式',
+    quota_letter_space: '值字間距',
+    dimension_font_family: '名稱字體',
+    dimension_text_style: '名稱樣式',
+    dimension_letter_space: '名稱字間距',
+    font_family: '字體',
+    letter_space: '字間距',
+    font_shadow: '字體陰影'
   },
   dataset: {
     parse_filed: '解析字段',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 4bc67a27ac..c87094c343 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -1174,7 +1174,16 @@ export default {
     conditions_can_not_empty: '字段的条件不能为空，若无条件，请直接删除该字段',
     remark: '备注',
     remark_edit: '编辑备注',
-    remark_bg_color: '背景填充'
+    remark_bg_color: '背景填充',
+    quota_font_family: '值字体',
+    quota_text_style: '值样式',
+    quota_letter_space: '值字间距',
+    dimension_font_family: '名称字体',
+    dimension_text_style: '名称样式',
+    dimension_letter_space: '名称字间距',
+    font_family: '字体',
+    letter_space: '字间距',
+    font_shadow: '字体阴影'
   },
   dataset: {
     parse_filed: '解析字段',
diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js
index afc9abf262..0d0da8969c 100644
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@@ -61,6 +61,16 @@ export const DEFAULT_SIZE = {
   spaceSplit: 10,
   dimensionShow: true,
   quotaShow: true,
+  quotaFontFamily: 'Microsoft YaHei',
+  quotaFontIsBolder: false,
+  quotaFontIsItalic: false,
+  quotaLetterSpace: 0,
+  quotaFontShadow: false,
+  dimensionFontFamily: 'Microsoft YaHei',
+  dimensionFontIsBolder: false,
+  dimensionFontIsItalic: false,
+  dimensionLetterSpace: 0,
+  dimensionFontShadow: false,
   scatterSymbol: 'circle',
   scatterSymbolSize: 20,
   treemapWidth: 80,
@@ -147,7 +157,10 @@ export const DEFAULT_TITLE_STYLE = {
   isBolder: true,
   remarkShow: false,
   remark: '',
-  remarkBackgroundColor: '#ffffffff'
+  remarkBackgroundColor: '#ffffffff',
+  fontFamily: 'Microsoft YaHei',
+  letterSpace: '0',
+  fontShadow: false
 }
 
 export const DEFAULT_TITLE_STYLE_DARK = {
@@ -157,7 +170,13 @@ export const DEFAULT_TITLE_STYLE_DARK = {
   hPosition: 'left',
   vPosition: 'top',
   isItalic: false,
-  isBolder: true
+  isBolder: true,
+  remarkShow: false,
+  remark: '',
+  remarkBackgroundColor: '#ffffffff',
+  fontFamily: 'Microsoft YaHei',
+  letterSpace: '0',
+  fontShadow: false
 }
 
 export const DEFAULT_LEGEND_STYLE = {
@@ -968,3 +987,24 @@ export const BASE_ECHARTS_SELECT = {
     shadowBlur: 2
   }
 }
+
+export const CHART_FONT_FAMILY = [
+  { name: '微软雅黑', value: 'Microsoft YaHei' },
+  { name: '宋体', value: 'SimSun' },
+  { name: '黑体', value: 'SimHei' },
+  { name: '楷体', value: 'KaiTi' }
+]
+
+export const CHART_FONT_LETTER_SPACE = [
+  { name: '0px', value: '0' },
+  { name: '1px', value: '1' },
+  { name: '2px', value: '2' },
+  { name: '3px', value: '3' },
+  { name: '4px', value: '4' },
+  { name: '5px', value: '5' },
+  { name: '6px', value: '6' },
+  { name: '7px', value: '7' },
+  { name: '8px', value: '8' },
+  { name: '9px', value: '9' },
+  { name: '10px', value: '10' }
+]
diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js
index aae1e199ff..9e46dfe09d 100644
--- a/frontend/src/views/chart/chart/util.js
+++ b/frontend/src/views/chart/chart/util.js
@@ -66,7 +66,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -108,7 +111,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -153,7 +159,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -175,8 +184,16 @@ export const TYPE_CONFIGS = [
       ],
       'size-selector-ant-v': [
         'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
         'dimensionShow',
         'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
         'spaceSplit'
       ],
       'title-selector-ant-v': [
@@ -187,7 +204,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -209,8 +229,16 @@ export const TYPE_CONFIGS = [
       ],
       'size-selector-ant-v': [
         'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
         'dimensionShow',
         'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
         'spaceSplit'
       ],
       'title-selector-ant-v': [
@@ -221,7 +249,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -261,7 +292,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -299,7 +333,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -368,7 +405,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -445,7 +485,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -522,7 +565,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -598,7 +644,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -667,7 +716,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -735,7 +787,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -811,7 +866,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -866,7 +924,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -921,7 +982,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -977,7 +1041,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -1030,7 +1097,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -1070,7 +1140,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -1138,7 +1211,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -1188,7 +1264,10 @@ export const TYPE_CONFIGS = [
         'hPosition',
         'isItalic',
         'isBolder',
-        'remarkShow'
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ],
       'legend-selector-ant-v': [
         'show',
@@ -1295,8 +1374,16 @@ export const TYPE_CONFIGS = [
       ],
       'size-selector': [
         'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
         'dimensionShow',
         'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
         'spaceSplit'
       ],
       'title-selector': [
@@ -1305,9 +1392,11 @@ export const TYPE_CONFIGS = [
         'fontSize',
         'color',
         'hPosition',
-        'vPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
@@ -1329,8 +1418,16 @@ export const TYPE_CONFIGS = [
       ],
       'size-selector': [
         'quotaFontSize',
+        'quotaFontFamily',
+        'quotaFontStyle',
+        'quotaLetterSpace',
+        'quotaFontShadow',
         'dimensionShow',
         'dimensionFontSize',
+        'dimensionFontFamily',
+        'dimensionFontStyle',
+        'dimensionLetterSpace',
+        'dimensionFontShadow',
         'spaceSplit'
       ],
       'title-selector': [
@@ -1340,7 +1437,10 @@ export const TYPE_CONFIGS = [
         'color',
         'hPosition',
         'isItalic',
-        'isBolder'
+        'isBolder',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
       ]
     }
   },
diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue
index 447faf672e..7ca0a3b0eb 100644
--- a/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -4,7 +4,7 @@
     <span v-if="chart.type && antVRenderStatus" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
       <div>
         <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
       </div>
     </span>
     <div :id="chartId" style="width: 100%;overflow: hidden;" :style="{height:chartHeight}" />
@@ -27,6 +27,7 @@ import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
 import { baseWaterfallOptionAntV } from '@/views/chart/chart/waterfall/waterfall'
 import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_cloud'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 
 export default {
   name: 'ChartComponentG2',
@@ -322,6 +323,10 @@ export default {
           this.title_class.textAlign = customStyle.text.hPosition
           this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
           this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
         if (customStyle.background) {
           this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue
index 39426a84c6..23754d748e 100644
--- a/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -4,7 +4,7 @@
     <span v-if="chart.type" v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
       <div>
         <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
       </div>
     </span>
     <div ref="tableContainer" style="width: 100%;overflow: hidden;" :style="{background:container_bg_class.background}">
@@ -40,6 +40,7 @@ import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
 import { getRemark, hexColorToRGBA } from '@/views/chart/chart/util'
 import { baseTableInfo, baseTableNormal, baseTablePivot } from '@/views/chart/chart/table/table-info'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 
 export default {
   name: 'ChartComponentS2',
@@ -322,6 +323,10 @@ export default {
           if (this.$refs.title) {
             this.$refs.title.style.fontSize = customStyle.text.fontSize + 'px'
           }
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
         if (customStyle.background) {
           this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index e2132d11a8..e7aef998dd 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -16,6 +16,11 @@
               @input="inputOnInput($event)"
             />
           </el-form-item>
+          <el-form-item v-show="showProperty('fontFamily')" :label="$t('chart.font_family')" class="form-item">
+            <el-select v-model="titleForm.fontFamily" :placeholder="$t('chart.font_family')" @change="changeTitleStyle('fontFamily')">
+              <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
           <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
             <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -42,6 +47,14 @@
             <el-checkbox v-show="showProperty('isItalic')" v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
             <el-checkbox v-show="showProperty('isBolder')" v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
+          <el-form-item v-show="showProperty('letterSpace')" :label="$t('chart.letter_space')" class="form-item">
+            <el-select v-model="titleForm.letterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
+              <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="showProperty('fontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+            <el-checkbox v-model="titleForm.fontShadow" @change="changeTitleStyle('fontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+          </el-form-item>
         </div>
       </el-form>
     </el-col>
@@ -49,7 +62,7 @@
 </template>
 
 <script>
-import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 import { checkViewTitle } from '@/components/canvas/utils/utils'
 import { mapState } from 'vuex'
 
@@ -77,7 +90,9 @@ export default {
       titleForm: JSON.parse(JSON.stringify(DEFAULT_TITLE_STYLE)),
       fontSize: [],
       isSetting: false,
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
     }
   },
   watch: {
@@ -108,6 +123,10 @@ export default {
         }
         if (customStyle.text) {
           this.titleForm = customStyle.text
+
+          this.titleForm.fontFamily = this.titleForm.fontFamily ? this.titleForm.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.titleForm.letterSpace = this.titleForm.letterSpace ? this.titleForm.letterSpace : DEFAULT_TITLE_STYLE.letterSpace
+          this.titleForm.fontShadow = this.titleForm.fontShadow ? this.titleForm.fontShadow : DEFAULT_TITLE_STYLE.fontShadow
         }
         if (!this.batchOptStatus) {
           this.titleForm.title = this.chart.title
diff --git a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
index fc13f30d46..4782f80922 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelectorAntV.vue
@@ -16,6 +16,11 @@
               @input="inputOnInput($event)"
             />
           </el-form-item>
+          <el-form-item v-show="showProperty('fontFamily')" :label="$t('chart.font_family')" class="form-item">
+            <el-select v-model="titleForm.fontFamily" :placeholder="$t('chart.font_family')" @change="changeTitleStyle('fontFamily')">
+              <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
           <el-form-item v-show="showProperty('fontSize')" :label="$t('chart.text_fontsize')" class="form-item">
             <el-select v-model="titleForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeTitleStyle('fontSize')">
               <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -35,25 +40,33 @@
             <el-checkbox v-model="titleForm.isItalic" @change="changeTitleStyle('isItalic')">{{ $t('chart.italic') }}</el-checkbox>
             <el-checkbox v-model="titleForm.isBolder" @change="changeTitleStyle('isBolder')">{{ $t('chart.bolder') }}</el-checkbox>
           </el-form-item>
-        </div>
+          <el-form-item v-show="showProperty('letterSpace')" :label="$t('chart.letter_space')" class="form-item">
+            <el-select v-model="titleForm.letterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeTitleStyle('letterSpace')">
+              <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="showProperty('fontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+            <el-checkbox v-model="titleForm.fontShadow" @change="changeTitleStyle('fontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+          </el-form-item>
 
-        <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark')" class="form-item">
-          <el-checkbox v-model="titleForm.remarkShow" @change="changeTitleStyle('remarkShow')">{{ $t('chart.show') }}</el-checkbox>
-        </el-form-item>
-        <span v-show="titleForm.remarkShow">
-          <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_edit')" class="form-item">
-            <el-button
-              :title="$t('chart.edit')"
-              icon="el-icon-edit"
-              type="text"
-              size="small"
-              @click="editRemark"
-            />
+          <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark')" class="form-item">
+            <el-checkbox v-model="titleForm.remarkShow" @change="changeTitleStyle('remarkShow')">{{ $t('chart.show') }}</el-checkbox>
           </el-form-item>
-          <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_bg_color')" class="form-item">
-            <el-color-picker v-model="titleForm.remarkBackgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('remarkBackgroundColor')" />
-          </el-form-item>
-        </span>
+          <span v-show="titleForm.remarkShow">
+            <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_edit')" class="form-item">
+              <el-button
+                :title="$t('chart.edit')"
+                icon="el-icon-edit"
+                type="text"
+                size="small"
+                @click="editRemark"
+              />
+            </el-form-item>
+            <el-form-item v-show="showProperty('remarkShow')" :label="$t('chart.remark_bg_color')" class="form-item">
+              <el-color-picker v-model="titleForm.remarkBackgroundColor" class="color-picker-style" :predefine="predefineColors" @change="changeTitleStyle('remarkBackgroundColor')" />
+            </el-form-item>
+          </span>
+        </div>
       </el-form>
     </el-col>
 
@@ -78,14 +91,12 @@
 </template>
 
 <script>
-import { COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, COLOR_PANEL, DEFAULT_TITLE_STYLE } from '../../chart/chart'
 import { checkViewTitle } from '@/components/canvas/utils/utils'
 import { mapState } from 'vuex'
-import RemarkEditor from '@/views/chart/components/component-style/dialog/RemarkEditor'
 
 export default {
   name: 'TitleSelectorAntV',
-  components: { RemarkEditor },
   props: {
     param: {
       type: Object,
@@ -110,7 +121,9 @@ export default {
       isSetting: false,
       predefineColors: COLOR_PANEL,
       showEditRemark: false,
-      tmpRemark: ''
+      tmpRemark: '',
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
     }
   },
   computed: {
@@ -144,6 +157,10 @@ export default {
           this.titleForm.remarkShow = this.titleForm.remarkShow ? this.titleForm.remarkShow : DEFAULT_TITLE_STYLE.remarkShow
           this.titleForm.remark = this.titleForm.remark ? this.titleForm.remark : DEFAULT_TITLE_STYLE.remark
           this.titleForm.remarkBackgroundColor = this.titleForm.remarkBackgroundColor ? this.titleForm.remarkBackgroundColor : DEFAULT_TITLE_STYLE.remarkBackgroundColor
+
+          this.titleForm.fontFamily = this.titleForm.fontFamily ? this.titleForm.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.titleForm.letterSpace = this.titleForm.letterSpace ? this.titleForm.letterSpace : DEFAULT_TITLE_STYLE.letterSpace
+          this.titleForm.fontShadow = this.titleForm.fontShadow ? this.titleForm.fontShadow : DEFAULT_TITLE_STYLE.fontShadow
         }
         if (!this.batchOptStatus) {
           this.titleForm.title = this.chart.title
diff --git a/frontend/src/views/chart/components/normal/LabelNormal.vue b/frontend/src/views/chart/components/normal/LabelNormal.vue
index f1707beeac..974df8fe34 100644
--- a/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -3,7 +3,7 @@
     <span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
       <div>
         <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
       </div>
     </span>
     <div
@@ -30,6 +30,7 @@ import { getRemark, hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 
 export default {
   name: 'LabelNormal',
@@ -157,8 +158,21 @@ export default {
         if (customAttr.size) {
           this.dimensionShow = customAttr.size.dimensionShow
           this.quotaShow = customAttr.size.quotaShow
+
           this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
+          this.label_class.fontFamily = customAttr.size.dimensionFontFamily ? customAttr.size.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.label_class.fontWeight = customAttr.size.dimensionFontIsBolder ? 'bold' : 'normal'
+          this.label_class.fontStyle = customAttr.size.dimensionFontIsItalic ? 'italic' : 'normal'
+          this.label_class.letterSpacing = (customAttr.size.dimensionLetterSpace ? customAttr.size.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace) + 'px'
+          this.label_class.textShadow = customAttr.size.dimensionFontShadow ? '2px 2px 4px' : 'none'
+
           this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
+          this.label_content_class.fontFamily = customAttr.size.quotaFontFamily ? customAttr.size.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.label_content_class.fontWeight = customAttr.size.quotaFontIsBolder ? 'bold' : 'normal'
+          this.label_content_class.fontStyle = customAttr.size.quotaFontIsItalic ? 'italic' : 'normal'
+          this.label_content_class.letterSpacing = (customAttr.size.quotaLetterSpace ? customAttr.size.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace) + 'px'
+          this.label_content_class.textShadow = customAttr.size.quotaFontShadow ? '2px 2px 4px' : 'none'
+
           if (!this.dimensionShow) {
             this.label_space.marginTop = '0px'
           } else {
@@ -175,6 +189,10 @@ export default {
           this.title_class.textAlign = customStyle.text.hPosition
           this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
           this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
         if (customStyle.background) {
           this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
@@ -239,7 +257,7 @@ export default {
     },
 
     resultFormat() {
-      if(!this.chart.data)return
+      if (!this.chart.data) return
       const value = this.chart.data.series[0].data[0]
       let yAxis = []
       try {
diff --git a/frontend/src/views/chart/components/normal/LabelNormalText.vue b/frontend/src/views/chart/components/normal/LabelNormalText.vue
index 17fb477a6e..12b6f485a7 100644
--- a/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -4,7 +4,7 @@
     <span v-show="title_show" ref="title" :style="title_class" style="cursor: default;display: block;">
       <div>
         <p style="padding:6px 4px 0;margin: 0;overflow: hidden;white-space: pre;text-overflow: ellipsis;display: inline;">{{ chart.title }}</p>
-        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" :remark-cfg="remarkCfg" />
+        <title-remark v-if="chart.render && chart.render === 'antv' && remarkCfg.show" style="text-shadow: none!important;" :remark-cfg="remarkCfg" />
       </div>
     </span>
     <div
@@ -31,6 +31,7 @@ import { getRemark, hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
 import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
 import TitleRemark from '@/views/chart/view/TitleRemark'
+import { DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 
 export default {
   name: 'LabelNormalText',
@@ -172,8 +173,21 @@ export default {
         if (customAttr.size) {
           this.dimensionShow = customAttr.size.dimensionShow
           this.quotaShow = customAttr.size.quotaShow
+
           this.label_class.fontSize = customAttr.size.dimensionFontSize + 'px'
+          this.label_class.fontFamily = customAttr.size.dimensionFontFamily ? customAttr.size.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.label_class.fontWeight = customAttr.size.dimensionFontIsBolder ? 'bold' : 'normal'
+          this.label_class.fontStyle = customAttr.size.dimensionFontIsItalic ? 'italic' : 'normal'
+          this.label_class.letterSpacing = (customAttr.size.dimensionLetterSpace ? customAttr.size.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace) + 'px'
+          this.label_class.textShadow = customAttr.size.dimensionFontShadow ? '2px 2px 4px' : 'none'
+
           this.label_content_class.fontSize = customAttr.size.quotaFontSize + 'px'
+          this.label_content_class.fontFamily = customAttr.size.quotaFontFamily ? customAttr.size.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.label_content_class.fontWeight = customAttr.size.quotaFontIsBolder ? 'bold' : 'normal'
+          this.label_content_class.fontStyle = customAttr.size.quotaFontIsItalic ? 'italic' : 'normal'
+          this.label_content_class.letterSpacing = (customAttr.size.quotaLetterSpace ? customAttr.size.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace) + 'px'
+          this.label_content_class.textShadow = customAttr.size.quotaFontShadow ? '2px 2px 4px' : 'none'
+
           if (!this.dimensionShow) {
             this.label_space.marginTop = '0px'
           } else {
@@ -190,6 +204,10 @@ export default {
           this.title_class.textAlign = customStyle.text.hPosition
           this.title_class.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
           this.title_class.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
+
+          this.title_class.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : DEFAULT_TITLE_STYLE.fontFamily
+          this.title_class.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : DEFAULT_TITLE_STYLE.letterSpace) + 'px'
+          this.title_class.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
         if (customStyle.background) {
           this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index 57bbb62048..80321a76bd 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -132,12 +132,30 @@
           <el-slider v-model="sizeForm.gaugeEndAngle" show-input :show-input-controls="false" input-size="mini" :min="-360" :max="360" @change="changeBarSizeCase('gaugeEndAngle')" />
         </el-form-item>
         <!--gauge-end-->
-        <!--text&label-end-->
+        <!--text&label-start-->
         <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
           <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontFamily')" :label="$t('chart.quota_font_family')" class="form-item">
+          <el-select v-model="sizeForm.quotaFontFamily" :placeholder="$t('chart.quota_font_family')" @change="changeBarSizeCase('quotaFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontStyle')" :label="$t('chart.quota_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontIsItalic" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.quotaFontIsBolder" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaLetterSpace')" :label="$t('chart.quota_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.quotaLetterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeBarSizeCase('quotaLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontShadow" @change="changeBarSizeCase('quotaFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('dimensionShow')" />
         <el-form-item v-show="showProperty('dimensionShow')" :label="$t('chart.dimension_show')" class="form-item">
           <el-checkbox v-model="sizeForm.dimensionShow" @change="changeBarSizeCase('dimensionShow')">{{ $t('chart.show') }}</el-checkbox>
         </el-form-item>
@@ -146,6 +164,24 @@
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontFamily')" :label="$t('chart.dimension_font_family')" class="form-item">
+          <el-select v-model="sizeForm.dimensionFontFamily" :placeholder="$t('chart.dimension_font_family')" @change="changeBarSizeCase('dimensionFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontStyle')" :label="$t('chart.dimension_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontIsItalic" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.dimensionFontIsBolder" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionLetterSpace')" :label="$t('chart.dimension_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.dimensionLetterSpace" :placeholder="$t('chart.dimension_letter_space')" @change="changeBarSizeCase('dimensionLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontShadow" @change="changeBarSizeCase('dimensionFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('spaceSplit')" />
         <el-form-item v-show="showProperty('spaceSplit')" :label="$t('chart.space_split')" class="form-item">
           <el-input-number v-model="sizeForm.spaceSplit" :min="0" size="mini" @change="changeBarSizeCase('spaceSplit')" />
         </el-form-item>
@@ -265,7 +301,7 @@
 </template>
 
 <script>
-import { DEFAULT_SIZE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
 export default {
   name: 'SizeSelector',
   props: {
@@ -312,7 +348,9 @@ export default {
         { name: '50' + this.$t('chart.table_page_size_unit'), value: '50' },
         { name: '100' + this.$t('chart.table_page_size_unit'), value: '100' }
       ],
-      fontSize: []
+      fontSize: [],
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
     }
   },
   watch: {
@@ -352,6 +390,17 @@ export default {
 
           this.sizeForm.tablePageMode = this.sizeForm.tablePageMode ? this.sizeForm.tablePageMode : DEFAULT_SIZE.tablePageMode
           this.sizeForm.tablePageSize = this.sizeForm.tablePageSize ? this.sizeForm.tablePageSize : DEFAULT_SIZE.tablePageSize
+
+          this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
+          this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic
+          this.sizeForm.quotaLetterSpace = this.sizeForm.quotaLetterSpace ? this.sizeForm.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace
+          this.sizeForm.quotaFontShadow = this.sizeForm.quotaFontShadow ? this.sizeForm.quotaFontShadow : DEFAULT_SIZE.quotaFontShadow
+          this.sizeForm.dimensionFontFamily = this.sizeForm.dimensionFontFamily ? this.sizeForm.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.sizeForm.dimensionFontIsBolder = this.sizeForm.dimensionFontIsBolder ? this.sizeForm.dimensionFontIsBolder : DEFAULT_SIZE.dimensionFontIsBolder
+          this.sizeForm.dimensionFontIsItalic = this.sizeForm.dimensionFontIsItalic ? this.sizeForm.dimensionFontIsItalic : DEFAULT_SIZE.dimensionFontIsItalic
+          this.sizeForm.dimensionLetterSpace = this.sizeForm.dimensionLetterSpace ? this.sizeForm.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace
+          this.sizeForm.dimensionFontShadow = this.sizeForm.dimensionFontShadow ? this.sizeForm.dimensionFontShadow : DEFAULT_SIZE.dimensionFontShadow
         }
       }
     },
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
index c577e432e9..cc20bae49c 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue
@@ -321,11 +321,30 @@
       <!--gauge-end-->
 
       <el-form ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+        <!--text&label-start-->
         <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
           <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase('quotaFontSize')">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontFamily')" :label="$t('chart.quota_font_family')" class="form-item">
+          <el-select v-model="sizeForm.quotaFontFamily" :placeholder="$t('chart.quota_font_family')" @change="changeBarSizeCase('quotaFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontStyle')" :label="$t('chart.quota_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontIsItalic" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.quotaFontIsBolder" @change="changeBarSizeCase('quotaFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaLetterSpace')" :label="$t('chart.quota_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.quotaLetterSpace" :placeholder="$t('chart.quota_letter_space')" @change="changeBarSizeCase('quotaLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('quotaFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.quotaFontShadow" @change="changeBarSizeCase('quotaFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('dimensionShow')" />
         <el-form-item
           v-show="showProperty('dimensionShow')"
           :label="$t('chart.dimension_show')"
@@ -346,6 +365,24 @@
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
           </el-select>
         </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontFamily')" :label="$t('chart.dimension_font_family')" class="form-item">
+          <el-select v-model="sizeForm.dimensionFontFamily" :placeholder="$t('chart.dimension_font_family')" @change="changeBarSizeCase('dimensionFontFamily')">
+            <el-option v-for="option in fontFamily" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontStyle')" :label="$t('chart.dimension_text_style')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontIsItalic" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.italic') }}</el-checkbox>
+          <el-checkbox v-model="sizeForm.dimensionFontIsBolder" @change="changeBarSizeCase('dimensionFontIsItalic')">{{ $t('chart.bolder') }}</el-checkbox>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionLetterSpace')" :label="$t('chart.dimension_letter_space')" class="form-item">
+          <el-select v-model="sizeForm.dimensionLetterSpace" :placeholder="$t('chart.dimension_letter_space')" @change="changeBarSizeCase('dimensionLetterSpace')">
+            <el-option v-for="option in fontLetterSpace" :key="option.value" :label="option.name" :value="option.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item v-show="showProperty('dimensionFontShadow')" :label="$t('chart.font_shadow')" class="form-item">
+          <el-checkbox v-model="sizeForm.dimensionFontShadow" @change="changeBarSizeCase('dimensionFontShadow')">{{ $t('chart.font_shadow') }}</el-checkbox>
+        </el-form-item>
+        <el-divider v-if="showProperty('spaceSplit')" />
         <el-form-item
           v-show="showProperty('spaceSplit')"
           :label="$t('chart.space_split')"
@@ -433,7 +470,7 @@
 </template>
 
 <script>
-import { DEFAULT_SIZE } from '../../chart/chart'
+import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
 
 export default {
   name: 'SizeSelectorAntV',
@@ -482,7 +519,9 @@ export default {
         { name: this.$t('chart.table_align_left'), value: 'left' },
         { name: this.$t('chart.table_align_center'), value: 'center' },
         { name: this.$t('chart.table_align_right'), value: 'right' }
-      ]
+      ],
+      fontFamily: CHART_FONT_FAMILY,
+      fontLetterSpace: CHART_FONT_LETTER_SPACE
     }
   },
   watch: {
@@ -530,6 +569,17 @@ export default {
           this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
 
           this.sizeForm.gaugeTickCount = this.sizeForm.gaugeTickCount ? this.sizeForm.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
+
+          this.sizeForm.quotaFontFamily = this.sizeForm.quotaFontFamily ? this.sizeForm.quotaFontFamily : DEFAULT_SIZE.quotaFontFamily
+          this.sizeForm.quotaFontIsBolder = this.sizeForm.quotaFontIsBolder ? this.sizeForm.quotaFontIsBolder : DEFAULT_SIZE.quotaFontIsBolder
+          this.sizeForm.quotaFontIsItalic = this.sizeForm.quotaFontIsItalic ? this.sizeForm.quotaFontIsItalic : DEFAULT_SIZE.quotaFontIsItalic
+          this.sizeForm.quotaLetterSpace = this.sizeForm.quotaLetterSpace ? this.sizeForm.quotaLetterSpace : DEFAULT_SIZE.quotaLetterSpace
+          this.sizeForm.quotaFontShadow = this.sizeForm.quotaFontShadow ? this.sizeForm.quotaFontShadow : DEFAULT_SIZE.quotaFontShadow
+          this.sizeForm.dimensionFontFamily = this.sizeForm.dimensionFontFamily ? this.sizeForm.dimensionFontFamily : DEFAULT_SIZE.dimensionFontFamily
+          this.sizeForm.dimensionFontIsBolder = this.sizeForm.dimensionFontIsBolder ? this.sizeForm.dimensionFontIsBolder : DEFAULT_SIZE.dimensionFontIsBolder
+          this.sizeForm.dimensionFontIsItalic = this.sizeForm.dimensionFontIsItalic ? this.sizeForm.dimensionFontIsItalic : DEFAULT_SIZE.dimensionFontIsItalic
+          this.sizeForm.dimensionLetterSpace = this.sizeForm.dimensionLetterSpace ? this.sizeForm.dimensionLetterSpace : DEFAULT_SIZE.dimensionLetterSpace
+          this.sizeForm.dimensionFontShadow = this.sizeForm.dimensionFontShadow ? this.sizeForm.dimensionFontShadow : DEFAULT_SIZE.dimensionFontShadow
         }
       }
     },