如何用JavaScript设置本地已安装字体？代码不生效求助

嘿，我来帮你搞定这两个和JS字体相关的问题！

其实有两种实用的方式来调用本地已安装的字体：

• 直接给元素应用本地字体：如果你确定目标字体已经在用户本地安装完成，不需要额外定义@font-face，直接给目标元素设置fontFamily属性即可。比如：

  // 给页面body应用本地字体"Press Start 2P"
  document.body.style.fontFamily = "'Press Start 2P', sans-serif";
  

  注意：字体名称包含空格时要加引号，同时建议添加一个兜底字体（比如sans-serif），避免字体未安装时页面显示异常。

• 通过JS创建@font-face规则（兼容未安装场景）：如果想同时覆盖「本地已安装」和「未安装需通过URL加载」两种情况，就可以用你尝试的方法——创建style元素定义@font-face，核心是正确使用local()引用本地字体，同时提供字体文件URL作为兜底方案。

看了你贴的代码，我发现几个可能导致字体不生效的问题，逐个来梳理：

1. 字符串转义错误：你在textContent里写的\是多余的，会直接变成字符串的一部分，导致浏览器解析CSS时出现语法错误。直接去掉这些反斜杠即可。

2. 代码拼写错误：最后一行的appendChi...应该是appendChild，如果没写完的话，这个错误会导致style元素根本没插入到页面的<head>中，字体规则自然不会生效。

3. 相对路径可能不匹配：url(../fonts/...)的路径是相对于当前HTML文件的位置，而非你的custom.js文件位置。比如如果HTML文件在pages/index.html，而字体在根目录的fonts文件夹，路径就要改成../../fonts/...，得确认路径和字体文件的实际存储位置一致。

4. 未给元素应用目标字体：就算正确定义了@font-face，还需要明确告诉浏览器哪些元素要使用这个字体，比如给body或特定元素设置font-family属性。

5. 本地字体名称不准确：local('Press Start 2P')里的名称必须和系统中安装的字体名称完全一致，大小写、空格都不能错。可以在系统的字体管理器里查看字体的官方名称。

修正后的代码示例 #

把上述问题修复后，代码大概是这样的：

// 创建style元素
var headElement = document.createElement('style');
headElement.textContent = `@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: local('Press Start 2P'),
       url(../fonts/Press_start_2P/PressStart2P-Regular.ttf) format('truetype');
}`;
// 将style元素插入到页面head中
document.head.appendChild(headElement);

// 给页面元素应用这个自定义字体
document.body.style.fontFamily = "'Press Start 2P', sans-serif";

你可以先检查appendChild的拼写，去掉多余的反斜杠，再确认路径和字体名称，最后加上应用字体的代码，应该就能正常生效了。

内容的提问来源于stack exchange，提问作者Programer Full Stack