JS（JavaScript）检查系统内是否安装了某个字体 - 代码实现

擦拉嘿

于 2024-04-17 11:44:44 发布

阅读量493

点赞数 2

分类专栏： JavaScript语言文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42655717/article/details/137866708

版权

JavaScript语言专栏收录该内容

4 篇文章

订阅专栏

该篇文章介绍了一个JavaScript函数，用于检查用户浏览器是否安装了指定的英文字体（如宋体），通过创建canvas并比较不同字体下的文本尺寸来实现判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 检测用户系统是否安装了某个字体，字体名需英文（宋体 => SimSun）
export function isFontInstalled(fontName: string) {
  // 创建一个比较基准的canvas元素来获取默认宽度和高度
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  // 比较的基准字体应该是系统中不可能存在的
  const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
  context.font = '72px "font that doesnt exist", monospace';

  // 获取比较基准的尺寸
  const baselineSize = context.measureText(text).width;

  // 再次设置需要检测的字体并获取其尺寸
  context.font = `72px "${fontName}", monospace`;
  const checkSize = context.measureText(text).width;

  // 如果两次返回的宽度相同，那么指定的字体可能未安装
  return checkSize !== baselineSize;
}