如何设置本地安装的字体？

[bfdyanshe]

window11 系统上已经安装了字体。

通过 window.queryLocalFonts() 可以获取到了 fontFamily 的值，然后传给 EditorFont 里的 configStore.setConfig('editorFont', e) 设置了 ，但是无法生效。

这里是获取 fontData的代码：

class ConfigStore {
   ...
  getAvailableFonts() {
    return availableFonts
  }
  async initial() {
    this.availableFonts = await window.queryLocalFonts();
  ...
  }
}

这里是设置字体的代码：

export const EditorFont = observer(() => {
  let availableFonts = [{}]
  let availableFamilySet = new Set()
  for (const fontData of configStore.getAvailableFonts()) {
    if (availableFamilySet.has(fontData.family))
    {
      continue
    }
    availableFamilySet.add(fontData.family)
    availableFonts.push({label: fontData.fullName, value: fontData.family})
  }
  console.log(availableFonts)
  const showFonts = useMemo(() => {
    if (isMac) {
      return macOptions
    } else {
      return availableFonts
    }
  }, [])
  if (configStore.config.isLinux) return null
  return (
    <div className={'flex justify-between items-center py-3'}>
      <div className={'text-sm'}>
        {configStore.zh ? '编辑区字体' : 'Edit area font'}
      </div>
      <div>
        <Select
          value={configStore.config.editorFont}
          className={'w-[220px]'}
          onChange={e => {
            e = e.replaceAll(' ', '-')
            e = e.toLowerCase()
            console.log("editorFont: " + e)
            configStore.setConfig('editorFont', e)
          }}
          options={showFonts}
        />
      </div>
    </div>
  )
})

设置微软雅黑是可以的，但是别的字体都不行。不确定是 electron 本来就支持直接设置系统安装的字体，还是我设置的字体名字有问题，求解。

[1943time]

目前我只内置了几种常用字体，通过直接设置变量是起不了作用的，因为程序没有做映射，太多的字体可能会造成困扰。

[bfdyanshe]

内置字体是内置了字体文件，还是只是 Font.tsx 里写死的 fonts 映射?

[1943time]

仅映射至类名，没有内置字体文件，你有什么场景需要其他字体么？

[bfdyanshe]

我只是想使用我自己安装的字体。所以我自己在尝试修改代码添加字体。关于映射到类，我看代码里只有 interfaceFont 好像是有拼接类名的操作，editorFont 只是调用了设置了接口，是还有其他地方要修改吗？

[bfdyanshe]

我在css里找到font-类的定义了，我大概知道怎么回事了，谢谢

[1943time]

不建议自己修改，不然会跟不上版本，并且下个版本会有非常大的变化，我可以尝试直接给应用添加自定义字体功能。

[bfdyanshe]

好的，谢谢