next.js 如何在TinyMCE中更改字体?

50pmv0ei  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(129)

例如,我们可以使用content_styles属性来更改字体:

content_style: `
  body {
    font-family: whateva;
  }
`,

字符串
这种方法的问题是,编辑器被加载到iframe中,因此,已经加载到页面中的字体不可用。
这就是我如何将字体加载到页面中:

import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}


如何将Inter字体作为TinyMCE的默认字体?

ibrsph3r

ibrsph3r1#

在此期间,我自己找到了解决办法:
使用新的App Router,我们可以确定性地确定css文件的URI,并像这样使用它

content_style: `
  @import url("/_next/static/css/app/layout.css");
  body {
    font-family: ${inter.style.fontFamily};
  }
`,

字符串
(This是一个简单的例子)。

相关问题