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