react content font下载 - react content font源代码下载

反应内容字体

从页面内容创建自定义的Google字体！

语言

英语
日本语
中文

如何安装？

npm install react-content-font

我为什么要关心这个包装？

如果您正在为日语等语言开发React应用程序，并且想要使用非系统字体，则可能会发现此软件包有趣。

像日语这样的语言字体非常大。例如，没有日语的单一字体重量为5.7 MB。让您的用户下载如此大的文件绝对不是理想的选择。更不用说您想要超过一个字体的重量...

这件事做什么？

该软件包将检查页面，在该页面上获取唯一字符的列表，然后从Google字体上请求使用优化请求的那些字符！

在初始渲染时，它使用CreateTreeWalker有效地走DOM并获取所有字符。初始渲染后，它使用MutationObserver，并仅检查动态添加的新文本的更新节点。

如何使用它？

这就像在应用程序中高处添加上下文提供商一样简单。

例如，如果您使用应用程序路由器有Next.js应用程序，则可以更新您的app/layout.tsx文件：

 import FontProvider from 'react-content-font' ;

export default function RootLayout ( { children } : { children : React . ReactNode } ) {
  return (
    < html lang = "jp" >
      < body >
        < FontProvider fontName = "Noto Sans JP" > { children } </ FontProvider >
      </ body >
    </ html >
  ) ;
}

只需提供所需的字体，即使用fontName ，默认情况下，它将仅请求正常（含义400）重量字体。

如果我想要一个以上的字体重量怎么办？

请求额外的字体权重与添加fontWeights道具一样简单，就像这样：

 import FontProvider from 'react-content-font' ;

export default function RootLayout ( { children } : { children : React . ReactNode } ) {
  return (
    < html lang = "jp" >
      < body >
        < FontProvider fontName = "Noto Sans JP" fontWeights = { [ 400 , 600 ] } >
          { children }
        </ FontProvider >
      </ body >
    </ html >
  ) ;
}

如果我也想要一些字体重量的斜体怎么办？

我不确定是否有任何日本字体具有斜体变体，但是您想使用的字体也许是吗？如果是这样，您可以以任何您想要的重量要求斜体变体，这样这样：

 import FontProvider from 'react-content-font' ;

export default function RootLayout ( { children } : { children : React . ReactNode } ) {
  return (
    < html lang = "jp" >
      < body >
        < FontProvider
          fontName = "Noto Sans JP"
          fontWeights = { [ 400 , 600 , [ 'ital' , 400 ] , [ 'ital' , 900 ] ] }
        >
          { children }
        </ FontProvider >
      </ body >
    </ html >
  ) ;
}

在此示例中，除了常规的400和600重量字体外，我们还将获得400和900斜体。

如果我想选择字体播放怎么办？

在Google字体API文档中，它提到了“指定默认自动的值以外的其他值通常是合适的”。默认情况下，当您为Google字体生成链接标签时，它将设置display=swap 。因此，此软件包会做同样的事情。

但是，如果您想要其他东西，您需要做的就是设置display道具，例如：

 import FontProvider from 'react-content-font' ;

export default function RootLayout ( { children } : { children : React . ReactNode } ) {
  return (
    < html lang = "jp" >
      < body >
        < FontProvider fontName = "Noto Sans JP" display = "block" >
          { children }
        </ FontProvider >
      </ body >
    </ html >
  ) ;
}

display的有效值是'auto' | 'block' | 'swap' | 'fallback' | 'optional' 。

如果我想在显示内容或显示加载状态或其他内容之前等待加载字体怎么办？

幸运的是，此软件包还用标志将挂钩导出了一个挂钩，该标志将使您知道是否已加载字体。

这是PageText组件的一个示例，它基于上下文将display从hidden变为visible 。

 'use client' ;

import { useFontContext } from 'react-content-font' ;

export default function PageText ( ) {
  const { isFontLoaded } = useFontContext ( ) ;

  return (
    < p style = { { visibility : isFontLoaded ? 'visible' : 'hidden' } } >
      よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
    </ p >
  ) ;
}

重要的是要注意，您必须渲染文本，否则角色将不会被发现，也不会包含在请求的字体中。

例如，不要这样做：

 'use client' ;

import { useFontContext } from 'react-content-font' ;

export default function PageText ( ) {
  const { isFontLoaded } = useFontContext ( ) ;

  return (
    < >
      { isFontLoaded && (
        < p >
          よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
        </ p >
      ) }
    </ >
  ) ;
}

如果我想做与最后一件事相似的事情，但是在初始渲染之后，该怎么办？

幸运的是，在上下文中还有另一个标志可以让您知道是否正在更新该字体。

与上一个示例类似，您可以推迟显示更新中的内容，例如：

 'use client' ;

import { useFontContext } from 'react-content-font' ;

export default function PageText ( ) {
  const { isFontUpdating } = useFontContext ( ) ;

  return (
    < p style = { { visibility : isFontUpdating ? 'visible' : 'hidden' } } >
      よそはほかまあこの威圧心というのの後をしないう。きっと場合で仕事帰りはひょろひょろその評でたなりでするが行くたをも表裏できなけれでば、なぜにはもっなないうた。個人にできたのはついに十月から向後ますだない。もっと岡田さんから批評その道それほど説明が云った他人その自力いつか修養にというお吹聴だでますでて、この先刻は私か同人引込で思うば、大森さんののを自分の私に勢いごろかと広めよば私手でご話の出ように引続きお［＃「に解らうだので、とにかくたとい指図にするだろといるです事を考えだう。
    </ p >
  ) ;
}