扩展字体

通过 config.fontFamily 配置项，您可以自定义设计器样式面板中的字体选择列表。用户可以在设计表单时选择使用这些字体样式。

数据结构

type Config = {
    //扩展字体
    fontFamily?: Array<string | {label: string, value: string}>;
}

注意

字体名称需符合 CSS font-family 规范，使用自定义字体时需确保用户环境支持或提供字体加载方案。

基础配置示例

简单字符串数组

通过配置 fontFamily 选项，为表单设计器提供一组预定义的字体家族列表

<template>
    <fc-designer :config="config" />
</template>
<script setup>
    const config = {
        fontFamily: [
            'Microsoft YaHei',
            'SimSun',
            'Helvetica Neue',
            'PingFang SC',
            'Hiragino Sans GB'
        ]
    }
</script>

带标签的字体选项

通过配置带标签的字体选项，为用户提供更直观的字体选择体验，每个选项包含显示标签和实际字体值

<template>
  <fc-designer :config="config" />
</template>
<script setup>
const config = {
  fontFamily: [
    { label: '微软雅黑', value: 'Microsoft YaHei' },
    { label: '苹方字体', value: 'PingFang SC' },
    { label: '思源黑体', value: 'Source Han Sans CN' },
    { label: '鸿蒙字体', value: 'HarmonyOS Sans SC' }
  ]
}
</script>

默认字体列表

设计器内置的默认字体配置：

const defaultFonts = [
    'Microsoft YaHei',    // 微软雅黑
    'SimSun',             // 宋体
    'SimHei',             // 黑体
    'KaiTi',              // 楷体
    'FangSong',           // 仿宋
    'Arial',              // Arial
    'sans-serif',         // 无衬线字体
    'monospace'           // 等宽字体
]