Можем ли мы загружать только определенные варианты семейства шрифтов с помощью webfontloader? - PullRequest
2 голосов
/ 18 марта 2019

Контекст: Я начал устранять характер шрифтов, блокирующий рендеринг, как поведение браузера, провел некоторые исследования и выяснил, используя webfontloader , мы можем загружать их асинхронно.

Проблема: Мне нужно загрузить только определенные (400,500,500i) варианты Roboto, используя webfontloader , асинхронно

Метод: Я попытался решить с помощью приведенного ниже фрагмента:

class MyPage extends React.Component {
  render() {
    return <RootPage {...this.props}/>
  }
}

const options = {
  google: {
    families: ['Roboto:400,500,500i']
  }
}
export default WithWebFontLoaderHOC({ options })(MyPage)

ExpectedOutput: Фрагмент должен загружать только три указанных варианта Roboto.

RealOutput: Он загружает все двенадцать вариантов Roboto.

ПРИМЕЧАНИЕ : Я не упоминал нигде в кодовой базе

семейство шрифтов: Roboto;

Так это правильный путь? или что за недостающий кусок?

ExtraInfo:

const WithWebFontLoaderHOC = ({ options }) => (WrappedComponent: any) => {
  class RenderComponent extends Component<WithWebFontLoaderHOCProps> {
    componentDidMount() {
      // This will make sure WebFont.load is only used in the browser.
      if (typeof window !== 'undefined') {
        const WebFont = require('webfontloader') //eslint-disable-line
        WebFont.load(options)
      }
    }
    render() {
      return <WrappedComponent {...this.props} />
    }
  }
  RenderComponent.displayName = `WithWebFontLoaderHOC(${WrappedComponent.displayName ||
    WrappedComponent.name})`
  return RenderComponent
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...