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 >
  ) ;
}