@hanfy/plugin-fontfamily
v2.10.5
Published
字体插件
Downloads
2
Readme
@hanfy/plugin-fontfamily
字体插件
安装
$ yarn add @hanfy/plugin-fontfamily
添加到引擎
import Engine, { EngineInterface } from '@hanfy/engine';
import Fontfamily from '@hanfy/plugin-fontfamily';
new Engine(...,{ plugins:[Fontfamily] })
可选项
粘贴过滤自定义字体
支持过滤不符合自定义的字体
/**
* @param fontFamily 当前字体
* @returns 返回 string 修改当前值,false 移除,true 保留
* */
filter?: (fontFamily: string) => string | boolean
//配置
new Engine(...,{
config:{
[Fontfamily.pluginName]: {
//配置粘贴后需要过滤的字体
filter: (fontfamily: string) => {
// fontFamilyDefaultData 从toolbar包中导出的默认字体数据
const item = fontFamilyDefaultData.find(item => fontfamily.split(",").some(name => item.value.toLowerCase().indexOf(name.replace(/"/,"").toLowerCase()) > -1))
return item ? item.value : false
}
}
}
}
快捷键
默认无快捷键
//快捷键,key 组合键,args,执行参数,[font] , font 必须
hotkey?:{key:string,args:Array<string>};//默认无
//使用配置
new Engine(...,{
config:{
"fontfamily":{
//修改快捷键
hotkey:{
key:"mod+b",
args:["微软雅黑"]
}
}
}
})
自定义字体
工具栏中内置了部分字体列表,可以通过以下方法获取
import { fontFamilyDefaultData, fontfamily } from '@hanfy/toolbar'; // 或 @hanfy/toolbar-vue
fontfamily
转换可用的下拉列表数据
/**
* 生成字体下拉列表项
* @param data key-value 键值对数据,key 名称,如果有传语言则是语言键值对的key否则就直接显示
* @param language 语言,可选
*/
fontfamily(
data: Array<{ key: string; value: string }>,
language?: { [key: string]: string },
): Array<DropdownListItem>
fontFamilyDefaultData
默认字体列表
[
{
key: 'default',
value: '',
},
{
key: 'arial',
value: 'Arial',
},
{
key: 'comicSansMS',
value: '"Comic Sans MS"',
},
{
key: 'courierNew',
value: '"Courier New"',
},
{
key: 'georgia',
value: 'Georgia',
},
{
key: 'helvetica',
value: 'Helvetica',
},
{
key: 'impact',
value: 'Impact',
},
{
key: 'timesNewRoman',
value: '"Times New Roman"',
},
{
key: 'trebuchetMS',
value: '"Trebuchet MS"',
},
{
key: 'verdana',
value: 'Verdana',
},
{
key: 'fangSong',
value: 'FangSong, 仿宋, FZFangSong-Z02S, STFangsong, fangsong',
},
{
key: 'stFangsong',
value: 'STFangsong, 华文仿宋, FangSong, FZFangSong-Z02S, fangsong',
},
{
key: 'stSong',
value: 'STSong, 华文宋体, SimSun, "Songti SC", NSimSun, serif',
},
{
key: 'stKaiti',
value: 'STKaiti, 华文楷体, KaiTi, "Kaiti SC", cursive',
},
{
key: 'simSun',
value: 'SimSun, 宋体, "Songti SC", NSimSun, STSong, serif',
},
{
key: 'microsoftYaHei',
value: '"Microsoft YaHei", 微软雅黑, "PingFang SC", SimHei, STHeiti, sans-serif;',
},
{
key: 'kaiTi',
value: 'KaiTi, 楷体, STKaiti, "Kaiti SC", cursive',
},
{
key: 'kaitiSC',
value: '"Kaiti SC"',
},
{
key: 'simHei',
value: 'SimHei, 黑体, "Microsoft YaHei", "PingFang SC", STHeiti, sans-serif',
},
{
key: 'heitiSC',
value: '"Heiti SC"',
},
{
key: 'fzHei',
value: 'FZHei-B01S',
},
{
key: 'fzKai',
value: 'FZKai-Z03S',
},
{
key: 'fzFangSong',
value: 'FZFangSong-Z02S',
},
];
我们可以按照默认数据的格式整理好数据,然后使用 fontfamily
方法生成下拉列表所需要的数据,最后覆盖工具栏的配置
items: [
['collapse'],
[
{
name: 'fontfamily',
items: fontfamily(fontFamilyDefaultData),
},
],
];
命令
//font:更改的字体
engine.command.execute('fontfamily', color);
//使用 command 执行查询当前状态,返回 Array<string> | undefined,当前光标所在处字体值集合
engine.command.queryState('fontfamily');
其它
字体是否可用,是通过设置不同字体到 HTML 标签上,然后检测 HTML 标签的宽度变化与默认字体对比来判断的
/**
* 是否支持字体
* @param font 字体名称
* @returns
*/
export const isSupportFontFamily = (font: string) => {
if (typeof font !== 'string') {
console.log('Font name is not legal !');
return false;
}
let width;
const body = document.body;
const container = document.createElement('span');
container.innerHTML = Array(10).join('wi');
container.style.cssText = [
'position:absolute',
'width:auto',
'font-size:128px',
'left:-99999px',
].join(' !important;');
const getWidth = (fontFamily: string) => {
container.style.fontFamily = fontFamily;
body.appendChild(container);
width = container.clientWidth;
body.removeChild(container);
return width;
};
const monoWidth = getWidth('monospace');
const serifWidth = getWidth('serif');
const sansWidth = getWidth('sans-serif');
return (
monoWidth !== getWidth(font + ',monospace') ||
sansWidth !== getWidth(font + ',sans-serif') ||
serifWidth !== getWidth(font + ',serif')
);
};