react font

React-Font

反応のテキストにカスタムフォントを簡単に使用する簡単なコンポーネント

現在、今のところ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 fontが読み込まれない場合、フォントのファミリ名が存在しないか、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