Question

我使用Material-UI及其字体块渲染第一页。默认情况下，如果我没有加载任何字体，materialui使用Helvetica字体。主要的想法是使用它直到下载Roboto。

/signup (localhost)
    …media/roboto-latin-500.4b218fc7.woff2 (localhost) - 763,7ms, 14,5KB
    …media/roboto-latin-400.a2647ffe.woff2 (localhost) - 769,5ms, 14,5KB

如何异步导入字体而不是

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">

或

import 'typeface-roboto'

我尝试使用'media'属性和@ font-face observer

实现一个方法

<link rel="stylesheet" href="fonts.css" media="bogus"/>

但它不起作用。我还使用了fontfaceobserver.com的插件字体加载器

我使用的是Material-UI的1.0.0-beta.3版本。

Answer 1

webfontloader库可用于推迟应用程序的启动，直到下载了字体。这是有益的，因为它允许你avoid FOUT (Flash of Unstyled Text)，这是由于在下载预期的网络字体时使用默认字体呈现页面引起的

以下是使用webfontloader推迟应用程序启动的示例：

import React from 'react';
import { render } from 'react-dom';
import WebFont from 'webfontloader';

// callback that mounts the application
const app = () => {
    render(
        <div>Instead of this div, render your initial component/routes here</div>,
        document.querySelector('#main'),
    );
};

// postpone initiation of app until fonts are active
const webFontConfig = {
    google: {
        families: ['Roboto'],
    },
    custom: {
        families: ['FontAwesome'],
        urls: [
            'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
            'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
            'https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css',
        ],
    },
    classes: false,
    timeout: 1000,
    active: app, // invoked when fonts are active
};

// application entry point
WebFont.load(webFontConfig);

在Web字体配置中，active属性设置为一个函数，该函数将在下载并准备使用字体时调用。请注意，在您的应用程序的初始使用中，这似乎很慢，但有了缓存的好处，后续访问应该更快。

Answer 2

为了正确加载<link/>异步（没有太多黑客攻击），我建议您阅读：https://codepen.io/tigt/post/async-css-without-javascript

它提供了非阻塞link加载解决方案，就像（当然，if IE条件存在一样简单，因为浏览器可能无法正常工作）：

<head>
  <!--[if IE]>
    <link rel="stylesheet" href="style.css"> 
  <![endif]-->
</head>
<body>
    <!--[if !IE]> -->
        <link rel="stylesheet" href="style.css" lazyload>
  <!-- <![endif]-->
</body>

如何异步加载材料ui字体？

2 个答案: