use googlefonts

use googlefonts

글꼴 다운로드

1.0.0

다운로드

@flyyer/use-googlefonts

<head /> 에서 예상 글꼴을 선험적으로 정의 할 수없는 경우 Google 글꼴 v2로드하기 위해 고리를 반응합니다.

프로젝트에 필요한 특정 글꼴을 알고 있다면이 라이브러리를 생략하고 react-helmet 또는 next/head 통해 <link /> 태그를 직접 <head /> 태그를 다음 /헤드를 사용하여 다음 /js를 삽입해야합니다.

우리는 Flyyer.io를 위해이 후크를 만들어 개발자가 각 사용자가 선호하는 글꼴 스타일링과 일치하도록 글꼴에 글꼴이있는 템플릿을 만들 수 있도록했습니다. 이러한 유혹은 소셜 및 마케팅 이미지를 만드는 데 사용됩니다.

용법

이 종속성을 설치하십시오.

yarn add @flyyer/use-googlefonts

보통 사례 사용 :

 import React from "react" ;
import { useGoogleFonts , GoogleFontsStatus } from "@flyyer/use-googlefonts" ;

function App ( ) {
  const font = useGoogleFonts ( [
    {
      family : "Cabin" , // Family Name
      styles : [
        "600..700" , // Range, if family supports it.
        "100..200italic" , // Range with italic
        "300italic" , // Weight with italic
        "regular" , // Shortcut to 400
        "italic" , // Shortcut to 400 Italic
        "500" , // Regular with weight
        444 , // Regular weight for variable font
      ] ,
    } ,
    {
      family : "Roboto" , // Family Name - Roboto doesn't support ranges
      styles : [
        "300italic" , // Weight with italic
        "regular" , // Shortcut to 400
        "italic" , // Shortcut to 400 Italic
        "500" ,
        100 ,
      ] ,
    } ,
  ] ) ;

  if ( font . status === GoogleFontsStatus . FAILED ) {
    console . log ( font . error ) ;
  } else {
    console . log ( font . href ) ;
    // https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,444;0,500;0,600..700;1,100..200;1,300;1,400;1,600..700&family=Roboto:ital,wght@0,100;0,400;0,500;1,300;1,400&display=auto
  }

  return (
    // Use .flyyer-wait class to prevent premature renders while the font is still loading.
    < div className = { googleFont . status === GoogleFontsStatus . LOADING && "flyyer-wait" } >
      < p style = { { fontFamily : "'Cabin', sans-serif" } } >
        Almost before we knew it, we had left the ground.
      </ p >
    </ div >
  ) ;
}

성능과 속도를 향상시키기 위해 HTML의 <head /> 에 다음 사전 연결 태그를 추가하는 것이 좋습니다.

@flyyer/cli를 사용하는 경우 자동으로 완료되므로 Create-Flyyer-App으로 데크를 만든 경우이 섹션을 건너 뜁니다.

 < html >
  < head >
    < link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >
    < link rel =" preconnect " href =" https://fonts.googleapis.com " crossorigin >
  </ head >
  < body >
    ...
  </ body >
</ html >