Реагируйте с пользовательским интерфейсом материала, не находя пользовательский шрифт

Question

Моя тема mui определена так:

export default createMuiTheme({
  typography: {
    fontFamily: '"Nunito Sans", "Helvetica", "Arial", sans-serif',
    fontWeightLight: 300,
    fontWeightMedium: 600,
    fontWeightRegular: 400
    }
  }
});

У меня загружаются шрифты с использованием App.css из локальных файлов.По сетевым запросам я вижу, что эти файлы находятся.

/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Nunito Sans Light'), local('NunitoSans-Light'), 
  url(../assets/font/pe03MImSLYBIv1o4X1M8cc8WAc5tU1E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(../assets/font/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Nunito Sans SemiBold'), local('NunitoSans-SemiBold'), 
  url(../assets/font/pe03MImSLYBIv1o4X1M8cc9iB85tU1E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Проблема в том, что пользовательский интерфейс возвращается к "Helvetica".Я не вижу причин, по которым «Nunito Sans» не используется MUI.Досадно, что раньше эта установка работала нормально, а теперь не работает.У кого-нибудь есть идеи, почему это может не сработать?Спасибо!

Answer 1

Вот рабочий пример: https://codesandbox.io/s/mzlmxpw4r8?fontsize=14

Я думаю, что у вас могут быть две возможные проблемы.

Настройка темы пользовательского интерфейса для материала

// Import the wrapper component, and the the creator function
import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

// Create a new theme using Nunito Sans
const theme = createMuiTheme({
  typography: {
    fontFamily: "Nunito Sans, Roboto, sans-serif"
  }
});

const App = function(props) {
  // Pass the theme as a prop to the theme provider
  return (
    <MuiThemeProvider theme={theme}>
      <Demo />
    </MuiThemeProvider>
  );
};

ДляРади этой демонстрации я подумал, что будет проще использовать размещенную версию Nunito Sans в Google Fonts, поэтому мой файл index.html также имеет следующее:

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

Изменение способа загрузки шрифтов

Вы упомянули, что видите запросы на поступление файлов, так что, вероятно, это не так, но я подумал, что все равно заметил бы это.

Из примера CSS, который вы предоставляете, выглядитдля меня, как будто вы скопировали объявление CSS из самого Google Fonts.Когда я захожу сейчас для Nunito Sans, я получаю точно такой же результат: https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,50

Однако, это зависит от браузера, запрашивающего CSS.Например, если вы используете браузер, который поддерживает WOFF, но не WOFF2, вам будут предоставлены файлы WOFF.

У Google Fonts есть свои собственные причины и логика для автоматической обработки, поэтому стоит подумать, стоит либудет хорошим вариантом для вас.В противном случае, если вы хотите разместить шрифты локально, их загрузка напрямую из API шрифтов Google будет менее надежной, чем получение их из другого источника со всеми необходимыми форматами (на данный момент WOFF и WOFF2 почти всегда достаточно, иВы можете поддерживать дополнительно ~ 9% используемых браузеров , добавляя форматы WOFF без особых усилий).

Например, после загрузки также WOFF:

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src:
    url('../assets/font/NunitoSans-400.woff2') format('woff2'),
    url('../assets/font/NunitoSans-400.woff') format('woff');
}

Или, поскольку Material UI работает с пакетами typefaces- на npm , вы можете установить нужные вам форматы и CSS следующим образом:

npm install typeface-nunito-sans

Затем наначало вашего файла JavaScript:

import "typeface-nunito-sans";

// Or require('typeface-nunito-sans') if you aren’t using import

Тем не менее, моим первым предложением было бы начать с живой версии Nunito Sans Google Fonts и при необходимости изменить свой подход:

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

Надеюсь, это поможет!