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 编辑器中就可以选择使用阿里普惠体的各种字体样式了。
推荐阅读
-
2025/3/25 0:00:00• 次
-
2025/3/13 0:00:00• 次
-
2025/3/12 0:00:00• 次
-
2025/3/4 0:00:00• 次
-
2025/3/4 17:30:19• 次
-
2024/6/2 18:32:58• 次
-
2024/6/2 18:32:01• 次
-
2024/6/2 18:30:45• 次
-
2024/6/2 18:29:31• 次
-
2024/6/2 18:28:37• 次
-
2024/6/2 18:25:21• 次
-
2024/6/2 18:24:54• 次
-
2024/6/2 18:23:02• 次
-
2024/6/2 18:21:44• 次
-
2024/6/2 18:20:38•0 次
-
2024/6/2 18:19:44• 次