diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js
index ddd6e8b781..b10e87ca1c 100644
--- a/core/frontend/src/lang/en.js
+++ b/core/frontend/src/lang/en.js
@@ -1466,6 +1466,7 @@ export default {
     dimension_text_style: 'Name Style',
     dimension_letter_space: 'Name Letter Space',
     font_family: 'Font Family',
+    font_family_tip: 'The font will only take effect if it is installed on the operating system',
     letter_space: 'Letter Space',
     font_shadow: 'Font Shadow',
     chart_area: 'Area',
diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js
index 7843fc63e1..9f374754f6 100644
--- a/core/frontend/src/lang/tw.js
+++ b/core/frontend/src/lang/tw.js
@@ -1465,6 +1465,7 @@ export default {
     dimension_text_style: '名稱樣式',
     dimension_letter_space: '名稱字間距',
     font_family: '字體',
+    font_family_tip: '只有操作系統上已安裝該字體才能生效',
     letter_space: '字間距',
     font_shadow: '字體陰影',
     chart_area: '面積圖',
diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js
index 574a1bcb54..a39ad85887 100644
--- a/core/frontend/src/lang/zh.js
+++ b/core/frontend/src/lang/zh.js
@@ -1464,6 +1464,7 @@ export default {
     dimension_text_style: '名称样式',
     dimension_letter_space: '名称字间距',
     font_family: '字体',
+    font_family_tip: '只有操作系统上已安装该字体才能生效',
     letter_space: '字间距',
     font_shadow: '字体阴影',
     chart_area: '面积图',
diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js
index 6eb7fa837e..1af8b92939 100644
--- a/core/frontend/src/views/chart/chart/chart.js
+++ b/core/frontend/src/views/chart/chart/chart.js
@@ -1146,6 +1146,13 @@ export const CHART_FONT_FAMILY = [
   { name: '楷体', value: 'KaiTi' }
 ]
 
+export const CHART_CONT_FAMILY_MAP = {
+  'Microsoft YaHei': 'Microsoft YaHei',
+  'SimSun': 'SimSun, "Songti SC", STSong',
+  'SimHei': 'SimHei, Helvetica',
+  'KaiTi': 'KaiTi, "Kaiti SC", STKaiti'
+}
+
 export const CHART_FONT_LETTER_SPACE = [
   { name: '0px', value: '0' },
   { name: '1px', value: '1' },
diff --git a/core/frontend/src/views/chart/components/ChartComponentG2.vue b/core/frontend/src/views/chart/components/ChartComponentG2.vue
index 086615a457..1ae307cfba 100644
--- a/core/frontend/src/views/chart/components/ChartComponentG2.vue
+++ b/core/frontend/src/views/chart/components/ChartComponentG2.vue
@@ -55,7 +55,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'
+import { CHART_CONT_FAMILY_MAP, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
 import { equalsAny } from '@/utils/StringUtils'
@@ -429,7 +429,7 @@ export default {
           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.fontFamily = customStyle.text.fontFamily ? CHART_CONT_FAMILY_MAP[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'
         }
diff --git a/core/frontend/src/views/chart/components/ChartComponentS2.vue b/core/frontend/src/views/chart/components/ChartComponentS2.vue
index deb834afdc..31d5e3ca22 100644
--- a/core/frontend/src/views/chart/components/ChartComponentS2.vue
+++ b/core/frontend/src/views/chart/components/ChartComponentS2.vue
@@ -97,7 +97,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, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
+import { CHART_CONT_FAMILY_MAP, DEFAULT_TITLE_STYLE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
 import ChartTitleUpdate from './ChartTitleUpdate.vue'
 import { mapState } from 'vuex'
 import DePagination from '@/components/deCustomCm/pagination.js'
@@ -459,7 +459,7 @@ export default {
             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.fontFamily = customStyle.text.fontFamily ? CHART_CONT_FAMILY_MAP[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'
           // 表格总计与分页颜色，取标题颜色
diff --git a/core/frontend/src/views/chart/components/componentStyle/TitleSelector.vue b/core/frontend/src/views/chart/components/componentStyle/TitleSelector.vue
index d5691cc72e..0d52ad248e 100644
--- a/core/frontend/src/views/chart/components/componentStyle/TitleSelector.vue
+++ b/core/frontend/src/views/chart/components/componentStyle/TitleSelector.vue
@@ -50,6 +50,20 @@
                 :value="option.value"
               />
             </el-select>
+            <el-tooltip
+                class="item"
+                effect="dark"
+                placement="bottom"
+            >
+              <div
+                  slot="content"
+                  v-html="$t('chart.font_family_tip')"
+              />
+              <i
+                  class="el-icon-info"
+                  style="cursor: pointer;color: #606266;margin-left: 4px;"
+              />
+            </el-tooltip>
           </el-form-item>
           <el-form-item
             v-show="showProperty('fontSize')"
diff --git a/core/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue b/core/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue
index c48046f890..2c5eefbc23 100644
--- a/core/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/componentStyle/TitleSelectorAntV.vue
@@ -51,6 +51,20 @@
                 :value="option.value"
               />
             </el-select>
+            <el-tooltip
+              class="item"
+              effect="dark"
+              placement="bottom"
+            >
+              <div
+                slot="content"
+                v-html="$t('chart.font_family_tip')"
+              />
+              <i
+                class="el-icon-info"
+                style="cursor: pointer;color: #606266;margin-left: 4px;"
+              />
+            </el-tooltip>
           </el-form-item>
           <el-form-item
             v-show="showProperty('fontSize')"
diff --git a/core/frontend/src/views/chart/components/normal/LabelNormal.vue b/core/frontend/src/views/chart/components/normal/LabelNormal.vue
index c874c21a4d..b20f8f2f91 100644
--- a/core/frontend/src/views/chart/components/normal/LabelNormal.vue
+++ b/core/frontend/src/views/chart/components/normal/LabelNormal.vue
@@ -49,7 +49,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'
+import { CHART_CONT_FAMILY_MAP, DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import ChartTitleUpdate from '../ChartTitleUpdate.vue'
 
 export default {
@@ -209,7 +209,7 @@ export default {
           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.fontFamily = customStyle.text.fontFamily ? CHART_CONT_FAMILY_MAP[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'
         }
diff --git a/core/frontend/src/views/chart/components/normal/LabelNormalText.vue b/core/frontend/src/views/chart/components/normal/LabelNormalText.vue
index c31a4dba2b..21064e0580 100644
--- a/core/frontend/src/views/chart/components/normal/LabelNormalText.vue
+++ b/core/frontend/src/views/chart/components/normal/LabelNormalText.vue
@@ -61,7 +61,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'
+import { CHART_CONT_FAMILY_MAP, DEFAULT_SIZE, DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
 import ChartTitleUpdate from '../ChartTitleUpdate.vue'
 
 export default {
@@ -236,7 +236,7 @@ export default {
           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.fontFamily = customStyle.text.fontFamily ? CHART_CONT_FAMILY_MAP[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'
         }
diff --git a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
index 1005301e69..3a01dbacc2 100644
--- a/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
+++ b/extensions/dataease-extensions-view/view-chartmix/view-chartmix-frontend/src/views/antv/chartmix/index.vue
@@ -140,6 +140,12 @@ export default {
       },
       linkageActiveParam: null,
       linkageActiveHistory: false,
+      CHART_CONT_FAMILY_MAP: {
+        'Microsoft YaHei': 'Microsoft YaHei',
+        'SimSun': 'SimSun, "Songti SC", STSong',
+        'SimHei': 'SimHei, Helvetica',
+        'KaiTi': 'KaiTi, "Kaiti SC", STKaiti'
+      }
     }
   },
 
@@ -248,7 +254,7 @@ export default {
           this.titleClass.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
           this.titleClass.fontSize = customStyle.text.isBolder ? 'bold' : 'normal'
 
-          this.titleClass.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : 'Microsoft YaHei'
+          this.titleClass.fontFamily = customStyle.text.fontFamily ? this.CHART_CONT_FAMILY_MAP[customStyle.text.fontFamily] : 'Microsoft YaHei'
           this.titleClass.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : '0') + 'px'
           this.titleClass.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
@@ -257,23 +263,6 @@ export default {
           this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
         }
 
-        if (customStyle.text) {
-          this.title_show = customStyle.text.show
-          this.title_class.fontSize = customStyle.text.fontSize + 'px'
-          this.title_class.color = customStyle.text.color
-          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)
-          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
-        }
-
       }
       this.initRemark()
     },
diff --git a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/index.vue b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/index.vue
index 799b4aa88e..e3d6aa98db 100644
--- a/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/index.vue
+++ b/extensions/dataease-extensions-view/view-sankey/view-sankey-frontend/src/views/antv/sankey/index.vue
@@ -133,6 +133,12 @@ export default {
       },
       linkageActiveParam: null,
       linkageActiveHistory: false,
+      CHART_CONT_FAMILY_MAP: {
+        'Microsoft YaHei': 'Microsoft YaHei',
+        'SimSun': 'SimSun, "Songti SC", STSong',
+        'SimHei': 'SimHei, Helvetica',
+        'KaiTi': 'KaiTi, "Kaiti SC", STKaiti'
+      }
     }
   },
 
@@ -240,7 +246,7 @@ export default {
           this.titleClass.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
           this.titleClass.fontSize = customStyle.text.isBolder ? 'bold' : 'normal'
 
-          this.titleClass.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : 'Microsoft YaHei'
+          this.titleClass.fontFamily = customStyle.text.fontFamily ? this.CHART_CONT_FAMILY_MAP[customStyle.text.fontFamily] : 'Microsoft YaHei'
           this.titleClass.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : '0') + 'px'
           this.titleClass.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
         }
@@ -249,23 +255,6 @@ export default {
           this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
         }
 
-        if (customStyle.text) {
-          this.title_show = customStyle.text.show
-          this.title_class.fontSize = customStyle.text.fontSize + 'px'
-          this.title_class.color = customStyle.text.color
-          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)
-          this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
-        }
-
       }
       this.initRemark()
     },
diff --git a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/index.vue b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/index.vue
index b85247228f..a8a7cb31dc 100644
--- a/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/index.vue
+++ b/extensions/dataease-extensions-view/view-symbolmap/view-symbolmap-frontend/src/views/antv/symbolmap/index.vue
@@ -107,7 +107,13 @@
           content: ''
         },
         buttonTextColor: null,
-        loading: true
+        loading: true,
+        CHART_CONT_FAMILY_MAP: {
+          'Microsoft YaHei': 'Microsoft YaHei',
+          'SimSun': 'SimSun, "Songti SC", STSong',
+          'SimHei': 'SimHei, Helvetica',
+          'KaiTi': 'KaiTi, "Kaiti SC", STKaiti'
+        }
       }
     },
 
@@ -175,7 +181,7 @@
         }
       }
 
-      
+
       this.myChart.destroy()
       this.pointLayer.layerPickService.layer.textureService.destroy()
       this.pointLayer.layerPickService.layer.textureService.rendererService.destroy()
@@ -200,7 +206,7 @@
       if (this.textLayer) {
         this.textLayer.configService.clean() // GlobalConfigService
       }
-      
+
       if (this.pointLayer) {
         for (const key in this.pointLayer) {
           this.pointLayer[key] = null
@@ -574,7 +580,7 @@
             this.titleClass.fontStyle = customStyle.text.isItalic ? 'italic' : 'normal'
             this.titleClass.fontWeight = customStyle.text.isBolder ? 'bold' : 'normal'
 
-            this.titleClass.fontFamily = customStyle.text.fontFamily ? customStyle.text.fontFamily : 'Microsoft YaHei'
+            this.titleClass.fontFamily = customStyle.text.fontFamily ? this.CHART_CONT_FAMILY_MAP[customStyle.text.fontFamily] : 'Microsoft YaHei'
             this.titleClass.letterSpacing = (customStyle.text.letterSpace ? customStyle.text.letterSpace : '0') + 'px'
             this.titleClass.textShadow = customStyle.text.fontShadow ? '2px 2px 4px' : 'none'
           }