diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts
index 685ffa2ef..17224b048 100644
--- a/packages/@core/preferences/src/types.ts
+++ b/packages/@core/preferences/src/types.ts
@@ -239,12 +239,12 @@ interface ThemePreferences {
   colorSuccess: string;
   /** 警告色 */
   colorWarning: string;
+  /** 字体大小（单位：px） */
+  fontSize: number;
   /** 当前主题 */
   mode: ThemeModeType;
   /** 圆角 */
   radius: string;
-  /** 字体大小（单位：px） */
-  fontSize: number;
   /** 是否开启半深色header（只在theme='light'时生效） */
   semiDarkHeader: boolean;
   /** 是否开启半深色菜单（只在theme='light'时生效） */
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue b/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
new file mode 100644
index 000000000..b1aaa2d81
--- /dev/null
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/theme/font-size.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  NumberField,
+  NumberFieldContent,
+  NumberFieldDecrement,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'PreferenceFontSize',
+});
+
+const modelValue = defineModel<number>({
+  default: 16,
+});
+
+const min = 15;
+const max = 22;
+const step = 1;
+
+// 限制输入值在 min 和 max 之间
+watch(
+  modelValue,
+  (newValue) => {
+    if (newValue < min) {
+      modelValue.value = min;
+    } else if (newValue > max) {
+      modelValue.value = max;
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <NumberField
+        v-model="modelValue"
+        :max="max"
+        :min="min"
+        :step="step"
+        class="w-full"
+      >
+        <NumberFieldContent>
+          <NumberFieldDecrement />
+          <NumberFieldInput />
+          <NumberFieldIncrement />
+        </NumberFieldContent>
+      </NumberField>
+      <span class="text-muted-foreground whitespace-nowrap text-xs">px</span>
+    </div>
+    <div class="text-muted-foreground text-xs">
+      {{ $t('preferences.theme.fontSizeTip') }}
+    </div>
+  </div>
+</template>
diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
index a90c27dc0..c88a9bc45 100644
--- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -43,8 +43,8 @@ import {
   ColorMode,
   Content,
   Copyright,
-  Footer,
   FontSize,
+  Footer,
   General,
   GlobalShortcutKeys,
   Header,