Question

上下文：我已经开始消除字体在浏览器中的呈现阻塞特性，进行了一些研究，发现使用webfontloader，我们可以异步加载它们。

问题：我必须异步使用webfontloader来加载Roboto的特定（400,500,500i）变体

方法：我尝试使用以下代码段进行解决：

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；

这是正确的方法吗？还是缺少的东西？

附加信息：

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
}

我们可以使用webfontloader加载字体家族的特定变体吗？

0 个答案: