使用JS判断用户操作系统是否安装某字体

在开发水印功能的时候需要罗列出安装软件的电脑系统里都安装了哪些字体以供用户选择，参考了张鑫旭大神的文章，以下是我对该功能的实现。

export var dataFont = {

'windows': [{

ch: '宋体',

en: 'SimSun'

}, {

ch: '黑体',

en: 'SimHei'

}, {

ch: '微软雅黑',

en: 'Microsoft Yahei'

}, {

ch: '微软正黑体',

en: 'Microsoft JhengHei'

}, {

ch: '楷体',

en: 'KaiTi'

}, {

ch: '新宋体',

en: 'NSimSun'

}, {

ch: '仿宋',

en: 'FangSong'

}],

'OS X': [{

ch: '苹方',

en: 'PingFang SC'

}, {

ch: '华文黑体',

en: 'STHeiti'

}, {

ch: '华文楷体',

en: 'STKaiti'

}, {

ch: '华文宋体',

en: 'STSong'

}, {

ch: '华文仿宋',

en: 'STFangsong'

}, {

ch: '华文中宋',

en: 'STZhongsong'

}, {

ch: '华文琥珀',

en: 'STHupo'

}, {

ch: '华文新魏',

en: 'STXinwei'

}, {

ch: '华文隶书',

en: 'STLiti'

}, {

ch: '华文行楷',

en: 'STXingkai'

}, {

ch: '冬青黑体简',

en: 'Hiragino Sans GB'

}, {

ch: '兰亭黑-简',

en: 'Lantinghei SC'

}, {

ch: '翩翩体-简',

en: 'Hanzipen SC'

}, {

ch: '手札体-简',

en: 'Hannotate SC'

}, {

ch: '宋体-简',

en: 'Songti SC'

}, {

ch: '娃娃体-简',

en: 'Wawati SC'

}, {

ch: '魏碑-简',

en: 'Weibei SC'

}, {

ch: '行楷-简',

en: 'Xingkai SC'

}, {

ch: '雅痞-简',

en: 'Yapi SC'

}, {

ch: '圆体-简',

en: 'Yuanti SC'

}],

'office': [{

ch: '幼圆',

en: 'YouYuan'

}, {

ch: '隶书',

en: 'LiSu'

}, {

ch: '华文细黑',

en: 'STXihei'

}, {

ch: '华文彩云',

en: 'STCaiyun'

}, {

ch: '方正舒体',

en: 'FZShuTi'

}, {

ch: '方正姚体',

en: 'FZYaoti'

}],

'open': [{

ch: '思源黑体',

en: 'Source Han Sans CN'

}, {

ch: '思源宋体',

en: 'Source Han Serif SC'

}, {

ch: '文泉驿微米黑',

en: 'WenQuanYi Micro Hei'

}, {

ch: '文泉驿正黑',

en: 'WenQuanYi Zen Hei'

}, {

ch: '文泉驿点阵正黑',

en: 'WenQuanYi Zen Hei Sharp'

}, {

ch: '文泉驿等宽正黑',

en: 'WenQuanYi Zen Hei Mono'

}, {

ch: '文泉驿等宽微米黑',

en: 'WenQuanYi Micro Hei Mono'

}],

'hanyi': [{

ch: '汉仪旗黑',

en: 'HYQihei 40S'

}, {

ch: '汉仪旗黑',

en: 'HYQihei 50S'

}, {

ch: '汉仪旗黑',

en: 'HYQihei 60S'

}, {

ch: '汉仪大宋简',

en: 'HYDaSongJ'

}, {

ch: '汉仪楷体',

en: 'HYKaiti'

}, {

ch: '汉仪家书简',

en: 'HYJiaShuJ'

}, {

ch: '汉仪PP体简',

en: 'HYPPTiJ'

}, {

ch: '汉仪乐喵体简',

en: 'HYLeMiaoTi'

}, {

ch: '汉仪小麦体',

en: 'HYXiaoMaiTiJ'

}, {

ch: '汉仪程行体',

en: 'HYChengXingJ'

}, {

ch: '汉仪黑荔枝',

en: 'HYHeiLiZhiTiJ'

}, {

ch: '汉仪雅酷黑W',

en: 'HYYaKuHeiW'

}, {

ch: '汉仪大黑简',

en: 'HYDaHeiJ'

}, {

ch: '汉仪尚魏手书W',

en: 'HYShangWeiShouShuW'

}],

'fangzheng': [{

"ch": "方正粗雅宋简体",

"en": "FZYaSongS-B-GB"

}, {

"ch": "方正报宋简体",

"en": "FZBaoSong-Z04S"

}, {

"ch": "方正粗圆简体",

"en": "FZCuYuan-M03S"

}, {

"ch": "方正大标宋简体",

"en": "FZDaBiaoSong-B06S"

}, {

"ch": "方正大黑简体",

"en": "FZDaHei-B02S"

}, {

"ch": "方正仿宋简体",

"en": "FZFangSong-Z02S"

}, {

"ch": "方正黑体简体",

"en": "FZHei-B01S"

}, {

"ch": "方正琥珀简体",

"en": "FZHuPo-M04S"

}, {

"ch": "方正楷体简体",

"en": "FZKai-Z03S"

}, {

"ch": "方正隶变简体",

"en": "FZLiBian-S02S"

}, {

"ch": "方正隶书简体",

"en": "FZLiShu-S01S"

}, {

"ch": "方正美黑简体",

"en": "FZMeiHei-M07S"

}, {

"ch": "方正书宋简体",

"en": "FZShuSong-Z01S"

}, {

"ch": "方正舒体简体",

"en": "FZShuTi-S05S"

}, {

"ch": "方正水柱简体",

"en": "FZShuiZhu-M08S"

}, {

"ch": "方正宋黑简体",

"en": "FZSongHei-B07S"

}, {

"ch": "方正宋三简体",

"en": "FZSong"

}, {

"ch": "方正魏碑简体",

"en": "FZWeiBei-S03S"

}, {

"ch": "方正细等线简体",

"en": "FZXiDengXian-Z06S"

}, {

"ch": "方正细黑一简体",

"en": "FZXiHei I-Z08S"

}, {

"ch": "方正细圆简体",

"en": "FZXiYuan-M01S"

}, {

"ch": "方正小标宋简体",

"en": "FZXiaoBiaoSong-B05S"

}, {

"ch": "方正行楷简体",

"en": "FZXingKai-S04S"

}, {

"ch": "方正姚体简体",

"en": "FZYaoTi-M06S"

}, {

"ch": "方正中等线简体",

"en": "FZZhongDengXian-Z07S"

}, {

"ch": "方正准圆简体",

"en": "FZZhunYuan-M02S"

}, {

"ch": "方正综艺简体",

"en": "FZZongYi-M05S"

}, {

"ch": "方正彩云简体",

"en": "FZCaiYun-M09S"

}, {

"ch": "方正隶二简体",

"en": "FZLiShu II-S06S"

}, {

"ch": "方正康体简体",

"en": "FZKangTi-S07S"

}, {

"ch": "方正超粗黑简体",

"en": "FZChaoCuHei-M10S"

}, {

"ch": "方正新报宋简体",

"en": "FZNew BaoSong-Z12S"

}, {

"ch": "方正新舒体简体",

"en": "FZNew ShuTi-S08S"

}, {

"ch": "方正黄草简体",

"en": "FZHuangCao-S09S"

}, {

"ch": "方正少儿简体",

"en": "FZShaoEr-M11S"

}, {

"ch": "方正稚艺简体",

"en": "FZZhiYi-M12S"

}, {

"ch": "方正细珊瑚简体",

"en": "FZXiShanHu-M13S"

}, {

"ch": "方正粗宋简体",

"en": "FZCuSong-B09S"

}, {

"ch": "方正平和简体",

"en": "FZPingHe-S11S"

}, {

"ch": "方正华隶简体",

"en": "FZHuaLi-M14S"

}, {

"ch": "方正瘦金书简体",

"en": "FZShouJinShu-S10S"

}, {

"ch": "方正细倩简体",

"en": "FZXiQian-M15S"

}, {

"ch": "方正中倩简体",

"en": "FZZhongQian-M16S"

}, {

"ch": "方正粗倩简体",

"en": "FZCuQian-M17S"

}, {

"ch": "方正胖娃简体",

"en": "FZPangWa-M18S"

}, {

"ch": "方正宋一简体",

"en": "FZSongYi-Z13S"

}, {

"ch": "方正剪纸简体",

"en": "FZJianZhi-M23S"

}, {

"ch": "方正流行体简体",

"en": "FZLiuXingTi-M26S"

}, {

"ch": "方正祥隶简体",

"en": "FZXiangLi-S17S"

}, {

"ch": "方正粗活意简体",

"en": "FZCuHuoYi-M25S"

}, {

"ch": "方正胖头鱼简体",

"en": "FZPangTouYu-M24S"

}, {

"ch": "方正铁筋隶书简体",

"en": "FZTieJinLiShu-Z14S"

}, {

"ch": "方正北魏楷书简体",

"en": "FZBeiWeiKaiShu-Z15S"

}, {

"ch": "方正卡通简体",

"en": "FZKaTong-M19S"

}, {

"ch": "方正艺黑简体",

"en": "FZYiHei-M20S"

}, {

"ch": "方正水黑简体",

"en": "FZShuiHei-M21S"

}, {

"ch": "方正古隶简体",

"en": "FZGuLi-S12S"

}, {

"ch": "方正幼线简体",

"en": "FZYouXian-Z09S"

}, {

"ch": "方正启体简体",

"en": "FZQiTi-S14S"

}, {

"ch": "方正小篆体",

"en": "FZXiaoZhuanTi-S13T"

}, {

"ch": "方正硬笔楷书简体",

"en": "FZYingBiKaiShu-S15S"

}, {

"ch": "方正毡笔黑简体",

"en": "FZZhanBiHei-M22S"

}, {

"ch": "方正硬笔行书简体",

"en": "FZYingBiXingShu-S16S"

}],

'mips': [{

ch: '仿宋-GB18030',

en: 'CESI_FS_GB18030'

}, {

ch: '小标宋-GB2312',

en: 'CESI_XBS_GB2312'

}, {

ch: '宋体-GB13000',

en: 'CESI_SS_GB13000'

}, {

ch: '仿宋-GB13000',

en: 'CESI_FS_GB13000'

}, {

ch: '宋体-GB2312',

en: 'CESI_SS_GB2312'

}, {

ch: '仿宋-GB2312',

en: 'CESI_FS_GB2312'

}, {

ch: '小标宋-GB18030',

en: 'CESI_XBS_GB18030'

}, {

ch: '黑体-GB2312',

en: 'CESI_HT_GB2312'

}, {

ch: 'CESI楷体-GB18030',

en: 'CESI_KT_GB18030'

}, {

ch: '楷体-GB13000',

en: 'CESI_KT_GB13000'

}, {

ch: '小标宋-GB13000',

en: 'CESI_XBS_GB13000'

}, {

ch: '楷体-GB2312',

en: 'CESI_KT_GB2312'

}, {

ch: '黑体-GB18030',

en: 'CESI_HT_GB18030'

}, {

ch: '宋体-GB18030',

en: 'CESI_SS_GB18030'

}, {

ch: '黑体-GB13000',

en: 'CESI_HT_GB13000'

}],

};

export function isSupportFontFamily(f) { if (typeof f != "string") { return false } var h = "Arial"; if (f.toLowerCase() == h.toLowerCase()) { return true } var e = "a"; var d = 100; var a = 100, i = 100; var c = document.createElement("canvas"); var b = c.getContext("2d"); c.width = a; c.height = i; b.textAlign = "center"; b.fillStyle = "black"; b.textBaseline = "middle"; var g = function (j) { b.clearRect(0, 0, a, i); b.font = d + "px " + j + ", " + h; b.fillText(e, a / 2, i / 2); var k = b.getImageData(0, 0, a, i).data; return [].slice.call(k).filter(function (l) { return l != 0 }) }; return g(h).join("") !== g(f).join("") };

然后引用方法把系统中安装的字体展示出来

queryFontList(){

this.options=[];

// 数据

var arrFont = dataFont['windows'].concat(dataFont['OS X'], dataFont['office'],dataFont['open'],dataFont['mips']);

arrFont.forEach( (obj)=> {

var fontFamily = obj.en;

if (isSupportFontFamily(fontFamily)) {

this.options.push({label:obj.ch,value:obj.en});

}

});

使用JS判断用户操作系统是否安装某字体相关推荐

JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)
//平台.设备和操作系统var system ={win : false,mac : false,xll : false};//检测平台var p = navigator.platform;syste ...
js判断手机上是否安装某APP
前两天,产品给我又给我提了一个需求,就是给我看了一下人家的功能,说我们也想要这个功能,于是,我就开始实现这个功能了..... js判断手机上是否安装某APP,如果有的话直接打开App,否则打开App ...
js判断移动端是否安装某款app的多种方法
本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下第一种方法: 一:判断是那种设备 var isAndroid = u.indexOf('Android') ...
JS判断服务端是win还是Linux,js 判断当前操作系统是ios还是android还是电脑端
js判断客户端是否是IOS或者是Android //如果返回true 则说明是Android function is_weixin() { var ua = window.navigator.user ...
js判断移动端是否安装某款app的方法
以下js代码是判断移动端是否安装某款app的方法,分享给大家供大家参考,具体内容如下: if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { ...
Android 微信支付判断用户手机是否安装微信客户端
微信支付不像支付宝支付那样. 对于支付宝支付,当我们的APP程序开始调用支付宝SDK去支付的时候,它会自动去判断你手机是否已经安装了支付宝客户端,有的话直接调起客户端进行支付:没有的话,会调用sdk自 ...
html5 判断是否安装app,js判断手机上是否安装app
通过js进行判断,判断手机上是否安装某一app,因为js并不能操作手机原生的API,所以它判断的方法只是通过动态生成iframe,用它打开app,看能不能打开,通过这个时间进行判断,下面有两段代码: ...
js判断Lodop驱动是否安装
//判断驱动是否已经安装完成$.ajax({type: "GET",cache: false,url: "http://localhost:18000/CLodopfun ...
登录注册页面，JS判断用户手机号码是否已经存在，或者格式不正确
现在的网站使用手机号码注册的越来越多,这就涉及到要在登录注册页面,判断用户手机号码是否已经存在,或者格式不正确,最近的系统里面正好遇到了,已经实现成功,在这里记录一下如果电话号码已经存在,页面: 如 ...

使用JS判断用户操作系统是否安装某字体

使用JS判断用户操作系统是否安装某字体相关推荐

最新文章

热门文章