UEditor 阿里普惠体字体配置

更新时间:2025/9/29 0:00:00点击: 技术文章

UEditor 阿里普惠体字体配置
1. ueditor.css 配置
在 ueditor.css 中添加以下字体定义:

css
复制
/* 阿里普惠体字体定义 */
@font-face {
    font-family: 'AlibabaPuHuiTi';
    font-weight: 100;
    src: url('../font/AlibabaPuHuiTi-3-35-Thin.woff2')  format('woff2'),
         url('../font/AlibabaPuHuiTi-3-35-Thin.woff')  format('woff'),
         url('../font/AlibabaPuHuiTi-3-35-Thin.ttf')  format('truetype'),
         url('../font/AlibabaPuHuiTi-3-35-Thin.eot')  format('embedded-opentype'),
         url('../font/AlibabaPuHuiTi-3-35-Thin.otf')  format('opentype');
}
 
@font-face {
    font-family: 'AlibabaPuHuiTi';
    font-weight: 300;
    src: url('../font/AlibabaPuHuiTi-3-45-Light.woff2')  format('woff2'),
         url('../font/AlibabaPuHuiTi-3-45-Light.woff')  format('woff'),
         url('../font/AlibabaPuHuiTi-3-45-Light.ttf')  format('truetype'),
         url('../font/AlibabaPuHuiTi-3-45-Light.eot')  format('embedded-opentype'),
         url('../font/AlibabaPuHuiTi-3-45-Light.otf')  format('opentype');
}
 
@font-face {
    font-family: 'AlibabaPuHuiTi';
    font-weight: 400;
    src: url('../font/AlibabaPuHuiTi-3-55-Regular.woff2')  format('woff2'),
         url('../font/AlibabaPuHuiTi-3-55-Regular.woff')  format('woff'),
         url('../font/AlibabaPuHuiTi-3-55-Regular.ttf')  format('truetype'),
         url('../font/AlibabaPuHuiTi-3-55-Regular.eot')  format('embedded-opentype'),
         url('../font/AlibabaPuHuiTi-3-55-Regular.otf')  format('opentype');
}
 
@font-face {
    font-family: 'AlibabaPuHuiTi';
    font-weight: 500;
    src: url('../font/AlibabaPuHuiTi-3-65-Medium.woff2')  format('woff2'),
         url('../font/AlibabaPuHuiTi-3-65-Medium.woff')  format('woff'),
         url('../font/AlibabaPuHuiTi-3-65-Medium.ttf')  format('truetype'),
         url('../font/AlibabaPuHuiTi-3-65-Medium.eot')  format('embedded-opentype'),
         url('../font/AlibabaPuHuiTi-3-65-Medium.otf')  format('opentype');
}
 
@font-face {
    font-family: 'AlibabaPuHuiTi';
    font-weight: 600;
    src: url('../font/AlibabaPuHuiTi-3-75-SemiBold.woff2')  format('woff2'),
         url('../font/AlibabaPuHuiTi-3-75-SemiBold.woff')  format('woff'),
         url('../font/AlibabaPuHuiTi-3-75-SemiBold.ttf')  format('truetype'),
         url('../font/AlibabaPuHuiTi-3-75-SemiBold.eot')  format('embedded-opentype'),
         url('../font/AlibabaPuHuiTi-3-75-SemiBold.otf')  format('opentype');
}
 
@font-face {
    font-family: 'AlibabaPuHuiTi';
    font-weight: 700;
    src: url('../font/AlibabaPuHuiTi-3-85-Bold.woff2')  format('woff2'),
         url('../font/AlibabaPuHuiTi-3-85-Bold.woff')  format('woff'),
         url('../font/AlibabaPuHuiTi-3-85-Bold.ttf')  format('truetype'),
         url('../font/AlibabaPuHuiTi-3-85-Bold.eot')  format('embedded-opentype'),
         url('../font/AlibabaPuHuiTi-3-85-Bold.otf')  format('opentype');
}
 
@font-face {
    font-family: 'AlibabaPuHuiTi';
    font-weight: 800;
    src: url('../font/AlibabaPuHuiTi-3-95-ExtraBold.woff2')  format('woff2'),
         url('../font/AlibabaPuHuiTi-3-95-ExtraBold.woff')  format('woff'),
         url('../font/AlibabaPuHuiTi-3-95-ExtraBold.ttf')  format('truetype'),
         url('../font/AlibabaPuHuiTi-3-95-ExtraBold.eot')  format('embedded-opentype'),
         url('../font/AlibabaPuHuiTi-3-95-ExtraBold.otf')  format('opentype');
}
 
@font-face {
    font-family: 'AlibabaPuHuiTi';
    font-weight: 900;
    src: url('../font/AlibabaPuHuiTi-3-105-Heavy.woff2')  format('woff2'),
         url('../font/AlibabaPuHuiTi-3-105-Heavy.woff')  format('woff'),
         url('../font/AlibabaPuHuiTi-3-105-Heavy.ttf')  format('truetype'),
         url('../font/AlibabaPuHuiTi-3-105-Heavy.eot')  format('embedded-opentype'),
         url('../font/AlibabaPuHuiTi-3-105-Heavy.otf')  format('opentype');
}
 
@font-face {
    font-family: 'AlibabaPuHuiTi';
    font-weight: 950;
    src: url('../font/AlibabaPuHuiTi-3-115-Black.woff2')  format('woff2'),
         url('../font/AlibabaPuHuiTi-3-115-Black.woff')  format('woff'),
         url('../font/AlibabaPuHuiTi-3-115-Black.ttf')  format('truetype'),
         url('../font/AlibabaPuHuiTi-3-115-Black.eot')  format('embedded-opentype'),
         url('../font/AlibabaPuHuiTi-3-115-Black.otf')  format('opentype');
}
2. zh-cn.js 配置
在 zh-cn.js 中添加字体选择器的中文标签:

javascript
复制
// 在 labelMap 中添加字体名称 
labelMap: {
    // 其他已有配置...
    'AlibabaPuHuiTi': '阿里普惠体',
    'AlibabaPuHuiTi-Thin': '阿里普惠体-细体',
    'AlibabaPuHuiTi-Light': '阿里普惠体-轻体',
    'AlibabaPuHuiTi-Regular': '阿里普惠体-常规',
    'AlibabaPuHuiTi-Medium': '阿里普惠体-中等',
    'AlibabaPuHuiTi-SemiBold': '阿里普惠体-半粗',
    'AlibabaPuHuiTi-Bold': '阿里普惠体-粗体',
    'AlibabaPuHuiTi-ExtraBold': '阿里普惠体-特粗',
    'AlibabaPuHuiTi-Heavy': '阿里普惠体-重体',
    'AlibabaPuHuiTi-Black': '阿里普惠体-黑体'
},
 
// 在 fontfamily 中添加字体选项
fontfamily: [
    // 其他已有字体...
    {name: 'AlibabaPuHuiTi', val: "'AlibabaPuHuiTi', sans-serif"},
    {name: 'AlibabaPuHuiTi-Thin', val: "'AlibabaPuHuiTi', sans-serif; font-weight: 100"},
    {name: 'AlibabaPuHuiTi-Light', val: "'AlibabaPuHuiTi', sans-serif; font-weight: 300"},
    {name: 'AlibabaPuHuiTi-Regular', val: "'AlibabaPuHuiTi', sans-serif; font-weight: 400"},
    {name: 'AlibabaPuHuiTi-Medium', val: "'AlibabaPuHuiTi', sans-serif; font-weight: 500"},
    {name: 'AlibabaPuHuiTi-SemiBold', val: "'AlibabaPuHuiTi', sans-serif; font-weight: 600"},
    {name: 'AlibabaPuHuiTi-Bold', val: "'AlibabaPuHuiTi', sans-serif; font-weight: 700"},
    {name: 'AlibabaPuHuiTi-ExtraBold', val: "'AlibabaPuHuiTi', sans-serif; font-weight: 800"},
    {name: 'AlibabaPuHuiTi-Heavy', val: "'AlibabaPuHuiTi', sans-serif; font-weight: 900"},
    {name: 'AlibabaPuHuiTi-Black', val: "'AlibabaPuHuiTi', sans-serif; font-weight: 950"}
]
3. ueditor.config.js 配置
在 ueditor.config.js 中启用字体选择器并添加阿里普惠体:

javascript
复制
// 在 toolbars 数组中添加 'fontfamily' 工具(如果尚未添加)
toolbars: [
    // 其他工具...
    'fontfamily',
    // 其他工具...
],
 
// 配置字体选择器 
fontfamily: [
    // 其他已有字体...
    {
        name: '阿里普惠体',
        val: "'AlibabaPuHuiTi', sans-serif"
    },
    {
        name: '阿里普惠体-细体',
        val: "'AlibabaPuHuiTi', sans-serif; font-weight: 100"
    },
    {
        name: '阿里普惠体-轻体',
        val: "'AlibabaPuHuiTi', sans-serif; font-weight: 300"
    },
    {
        name: '阿里普惠体-常规',
        val: "'AlibabaPuHuiTi', sans-serif; font-weight: 400"
    },
    {
        name: '阿里普惠体-中等',
        val: "'AlibabaPuHuiTi', sans-serif; font-weight: 500"
    },
    {
        name: '阿里普惠体-半粗',
        val: "'AlibabaPuHuiTi', sans-serif; font-weight: 600"
    },
    {
        name: '阿里普惠体-粗体',
        val: "'AlibabaPuHuiTi', sans-serif; font-weight: 700"
    },
    {
        name: '阿里普惠体-特粗',
        val: "'AlibabaPuHuiTi', sans-serif; font-weight: 800"
    },
    {
        name: '阿里普惠体-重体',
        val: "'AlibabaPuHuiTi', sans-serif; font-weight: 900"
    },
    {
        name: '阿里普惠体-黑体',
        val: "'AlibabaPuHuiTi', sans-serif; font-weight: 950"
    }
]
完成以上配置后,UEditor 编辑器中就可以选择使用阿里普惠体的各种字体样式了。