Как включить шрифт Roboto в сборку webpack для материального интерфейса?

Для прогрессивного веб-приложения, основанного на Material UI (React) и построенного с помощью Webpack, как я правильно включают шрифты Roboto, чтобы приложение не зависело от серверов Google, а шрифты также работают в автономном режиме?

Страница просто ссылается на страницу Google fonts, но это явно заставляет шрифты загружаться с серверов Google.
Подобный материал UI Issue существует относительно шрифта Roboto, но по-прежнему полагается на Google, предоставляя файлы шрифтов.
Я обнаружил пакет NPM, предоставляющий файлы шрифтов Roboto, но я не уверен, как включить эти файлы в число стилей и форматов шрифтов, и Я не знаю, какие стили для пользовательского интерфейса действительно нужны. Кроме того, импортирование этих семейств шрифтов просто через @import имеет проблемы с производительностью.

Итак, что такое хорошее и простое решение для связывания правильных файлов Roboto с моим приложением?

Ответ 1

Вот как моя команда работала, включая шрифты Roboto в нашем проекте Webpack:

Загрузите шрифты Roboto и создайте файл CSS в папке с шрифтом

Создайте папку (/fonts).
Загрузите все шрифты Roboto из Font Squirrel и переместите их в /fonts.
Создайте файл CSS (/fonts/index.css). Мы получили содержимое этого файла из этого урока.

index.css:

* {
  font-family: Roboto, sans-serif;  
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Italic-webfont.eot');
    src: url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Italic-webfont.woff') format('woff'),
         url('Roboto-Italic-webfont.ttf') format('truetype'),
         url('Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Bold-webfont.eot');
    src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Bold-webfont.woff') format('woff'),
         url('Roboto-Bold-webfont.ttf') format('truetype'),
         url('Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-BoldItalic-webfont.eot');
    src: url('Roboto-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-BoldItalic-webfont.woff') format('woff'),
         url('Roboto-BoldItalic-webfont.ttf') format('truetype'),
         url('Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Thin-webfont.eot');
    src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Thin-webfont.woff') format('woff'),
         url('Roboto-Thin-webfont.ttf') format('truetype'),
         url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-LightItalic-webfont.eot');
    src: url('Roboto-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-LightItalic-webfont.woff') format('woff'),
         url('Roboto-LightItalic-webfont.ttf') format('truetype'),
         url('Roboto-LightItalic-webfont.svg#RobotoLightItalic') format('svg');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Medium-webfont.eot');
    src: url('Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Medium-webfont.woff') format('woff'),
         url('Roboto-Medium-webfont.ttf') format('truetype'),
         url('Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-MediumItalic-webfont.eot');
    src: url('Roboto-MediumItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-MediumItalic-webfont.woff') format('woff'),
         url('Roboto-MediumItalic-webfont.ttf') format('truetype'),
         url('Roboto-MediumItalic-webfont.svg#RobotoMediumItalic') format('svg');
    font-weight: 300;
    font-style: italic;
}

Используйте модуль webpack файла-загрузчика для загрузки файлов шрифтов, чтобы веб-пакет мог распознавать их

npm install --save file-loader (https://www.npmjs.com/package/file-loader)
В вашей конфигурации webpack используйте загрузчик следующим образом:

webpack.conf.js:

loaders: [
  ..., {
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    loader: 'file?name=fonts/[name].[ext]'
  }
]

Импортировать файл css шрифта в основную запись приложения

App.js:

import './fonts/index.css';

И что это. Теперь шрифт вашего приложения по умолчанию должен быть Roboto.

РЕДАКТИРОВАТЬ: Какие шрифты Roboto действительно используют Material-UI?

Часть этого вопроса заключается в определении правильных шрифтов Roboto для включения в проект, поскольку полнота шрифтов Roboto составляет почти 5 МБ.

В README инструкции по включению Roboto указывают на: fonts.google.com/?selection.family=Roboto:300,400,500. Здесь 300 = Roboto-Light, 400 = Roboto-Regular и 500 = Roboto-Medium. Они соответствуют весам шрифтов, определенным в файле typography.js. Хотя эти три плотности шрифтов учитывают использование почти во всей библиотеке, есть ссылка на Regular-Bold в DateDisplay.js. Если вы не используете DatePicker, вы, вероятно, должны быть в безопасности, чтобы опустить это. Стиль шрифта Italics не используется нигде в проекте, кроме стиля уценки GitHub.

Эта информация точна на момент написания этой статьи, но она может измениться в будущем.

Ответ 2

Вы также можете сделать это, как это описано в этой проблеме: https://github.com/callemall/material-ui/issues/6256

npm install typeface-roboto --save

Затем в вашем index.js:

import 'typeface-roboto'

Работает с webpack/create-react-app.

Ответ 3

В случае, если приложение было запущено с помощью create-response-app, он не имеет конфигурационного файла [visible] webpack. В этом случае вы можете сделать следующее:

создать каталог /fonts в/public
создать/public/fonts/fonts.css, который определяет @font-faces

@font-face { font-family: 'inglobal'; font-weight: normal; font-style: normal; src: url('./OperatorMono.ttf'); }
Скопировать файлы шрифтов
добавить <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> to/public/index.html
Ура!

5/б. Если по какой-либо причине он по-прежнему не работает, измените расширения шрифтов на .css(также в src: url ('./OperatorMono.css))