react font

반응 전기

React의 텍스트에 사용자 정의 글꼴을 쉽게 사용할 수있는 간단한 구성 요소

현재 현재 Google 글꼴 만 지원합니다.

설치하다

 npm i react-font

 yarn add react-font

구성 요소

<Font /> 아동 구성 요소에 글꼴을 적용하십시오

<Text /> div 대신 <p /> 사용합니다

소품

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 있지만 일단 모든 글꼴이로드되면. 어떤 이유로 <Text /> 구성 요소에서 작동하지 않습니다.

onAllError: () => void 있지만 모든 글꼴이로드되지 않으면 사용자가 인터넷이없고 글꼴이 캐시되지 않으면 예를 들어.

용법

글꼴을 쉽게 바르십시오

 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