react font

反應font

簡單的組件，可以輕鬆使用自定義字體作為react中的文本

目前，目前僅支持Google字體。

安裝

 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，但是如果所有字體都沒有加載，例如用戶沒有Internet並且字體不會被緩存。

用法

輕鬆應用任何字體

 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 

執照

麻省理工學院©Nwylynko