前端网页字体进行全局更换

前端小凯

已于 2024-01-02 10:26:39 修改

阅读量611

点赞数 9

文章标签：前端 javascript 开发语言

于 2024-01-02 10:18:42 首次发布

本文链接：https://blog.csdn.net/qq_43235503/article/details/135334569

版权

该篇文章介绍了如何在Vue的mounted生命周期钩子中，遍历页面所有元素，根据元素内容的中英文特性，动态设置楷体（SimHei）和Arial字体。

摘要由CSDN通过智能技术生成

在mounted( )中使用：

// 获取页面中的所有元素
const elements = document.querySelectorAll('*');
// 遍历每个元素
elements.forEach((element) => {
  // 处理包含中文和英文混合的元素
  if (element.innerHTML && /[a-zA-Z\u4e00-\u9fa5]/.test(element.innerHTML)) {
    // 判断文字内容中是否包含中文
    if (/[\u4e00-\u9fa5]/.test(element.innerHTML)) {
      // 替换中文为楷体
      element.style.fontFamily = 'SimHei, "黑体"';
    }
   
    // 判断文字内容中是否包含英文数字
    if (/[a-zA-Z0-9]/.test(element.innerHTML)) {
      // 替换英文为 Arial
      element.style.fontFamily = 'Arial, sans-serif';
    }
  }
});