react font

ตอบกลับ

ส่วนประกอบง่าย ๆ ในการใช้แบบอักษรที่กำหนดเองสำหรับข้อความใน React

ปัจจุบันรองรับ Google Fonts เท่านั้นในตอนนี้

ติดตั้ง

 npm i react-font

 yarn add react-font

ส่วนประกอบ

<Font /> ใช้ตัวอักษรกับส่วนประกอบเด็ก

<Text /> ใช้ <p /> แทน div

อุปกรณ์ประกอบฉาก

family="Kufam" ชื่อของแบบอักษรที่คุณต้องการใช้

weight={700} น้ำหนักของแบบอักษร 400 เป็นปกติ 700 เป็นตัวหนาไม่ใช่แบบอักษรทั้งหมดที่รองรับน้ำหนักทั้งหมดตรวจสอบแบบอักษรของ Google

italic={true} หากตัวอักษรควรเป็นตัวเอียงไม่ใช่แบบอักษรทั้งหมดที่รองรับ แต่ CSS จะยังคงทำแบบอักษรใด ๆ ที่จะปลอมให้ปลอม

onLoad: (family: string, style: string) => void เรียกว่าเมื่อโหลดตัวอักษรนั้นแยกวิเคราะห์และแสดงผลมีประโยชน์ในการซ่อนข้อความจนกว่าจะโหลด

onError: (family: string, style: string) => void เรียกว่าฟอนต์ไม่สามารถโหลดได้ชื่อตระกูลตัวอักษรถูกใส่ไว้ในนั้นไม่มีอยู่หรือแบบอักษรของ Google ไม่สามารถตอบสนองกับแบบอักษรได้

onAllLoad: () => void เช่น ONLOAD แต่เมื่อแบบอักษรทั้งหมดโหลดแล้ว ไม่ทำงานกับส่วนประกอบ <Text /> ด้วยเหตุผลบางอย่าง

onAllError: () => void ชอบ onError แต่ถ้าแบบอักษรทั้งหมดไม่โหลดเช่นถ้าผู้ใช้ไม่มีอินเทอร์เน็ตและตัวอักษรจะไม่ถูกแคช

การใช้งาน

ใช้แบบอักษรใด ๆ ได้อย่างง่ายดาย

 import React from 'react'
import Font , { Text } from 'react-font'

const Example = ( ) => {
  return (
    < Font family = 'Viga' onAllLoad = { ( ) => console . log ( 'all loaded' ) } >
      < Font family = 'Ultra' >
        < h3 > Easily apply fonts </ h3 >
      </ Font >
      < Font family = 'Press Start 2P' >
        < p > Use any font from google fonts with ease </ p >
        < p >
          Either wrap a large portion of the app in a Font or just use the font
          where you want
        </ p >
      </ Font >
      < p >
        No hassle with putting the link in the head tag or importing with css
      </ p >
      < Text family = 'Monoton' style = { { fontSize : 50 , margin : 0 } } onLoad = { ( ) => console . log ( 'loaded Monoton' ) } >
        Super simple :)
      </ Text >
    </ Font >
  )
}

export default Example 

รองรับตัวเอียงและน้ำหนักตัวอักษร

 import React from 'react'
import Font , { Text } from 'react-font'

const RobotoExample = ( ) => {
  return (
    < >
      < Font family = 'Roboto' >
        < p > Roboto :) </ p >
      </ Font >
      < Text family = 'Roboto' italic >
        Roboto Italic :/
      </ Text >
      < Font family = 'Roboto' weight = { 700 } >
        < p > Roboto Bold :| </ p >
      </ Font >
      < Text family = 'Roboto' italic weight = { 700 } >
        Roboto Italic Bold ;)
      </ Text >
    </ >
  )
}

export default RobotoExample 

ใบอนุญาต

mit © nwylynko