use googlefonts ดาวน์โหลด - use googlefonts Source Source Download

use googlefonts

ดาวน์โหลดแบบอักษร

1.0.0

ดาวน์โหลด

@flyerer/use-googlefonts

React Hook เพื่อโหลด Google Fonts V2 เมื่อคุณไม่สามารถกำหนด ตัวอักษร ที่คาดหวังไว้บน <head />

หากคุณรู้ว่าคุณต้องการแบบอักษรเฉพาะในโครงการของคุณคุณควรละเว้นไลบรารีนี้และแทรกแท็ก <link /> โดยตรงใน <head /> ของ HTML ของคุณผ่าน react-helmet หรือ next/head หากคุณใช้ Next.js.

เราทำเบ็ดนี้สำหรับ flyer.io เพื่อให้นักพัฒนาสามารถสร้างเทมเพลตด้วยแบบอักษร ได้ทันที เพื่อให้ตรงกับสไตล์ตัวอักษรที่ผู้ใช้ต้องการแต่ละคน tempates เหล่านั้นใช้เพื่อสร้างภาพสังคมและการตลาด

การใช้งาน

ติดตั้งการพึ่งพานี้:

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

เพื่อปรับปรุงประสิทธิภาพและความเร็วขอแนะนำให้เพิ่มแท็กการเชื่อมต่อล่วงหน้าต่อไปนี้ใน <head /> ของ HTML ของคุณ

สิ่งนี้ทำได้โดยอัตโนมัติหากคุณใช้ @flyerer/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 >