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

Question

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

• The installation page просто ссылается на Google fonts page, но это, очевидно, заставляет шрифты для загрузки с серверов Google.

• Существует аналогичный Material UI Issue существует относительно шрифта Roboto, но по-прежнему полагается на Google, предоставляя файлы шрифтов.

• Я нашел NPM package providing the Roboto font files, но я не знаю, как включить эти файлы как множество стилей и форматов шрифтов предоставляются и я не знаю, какие стили Материал UI действительно нуждается в. Кроме того, импортирование этих семейств шрифтов просто через @import, похоже, имеет performance issues.

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

Answer 1

Это как моя команда пошла о включении шрифтов Roboto в нашем WebPack проекте:

Скачать шрифты Roboto и сделать файл CSS в папку шрифтов конкретных

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

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 для загрузки в файлы шрифтов так 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 действительно используют интерфейс-интерфейс?

Часть этого вопроса определяет право 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 file. Хотя эти три плотности шрифтов учитывают использование почти во всей библиотеке, есть одна ссылка на Regular-Bold в DateDisplay.js. Если вы не используете DatePicker, вы, вероятно, должны быть в безопасности, чтобы опустить это. Стиль шрифта Italics не используется нигде в проекте, кроме стиля уценки GitHub.

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

Answer 2

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

1. создать каталог/шрифты в/общественном

2. создать /public/fonts/fonts.css, что определяет @font-faces

   @font-face { font-family: 'inglobal'; font-weight: normal; font-style: normal; src: url('./OperatorMono.ttf'); }

3. Скопируйте файлы шрифтов

4. добавить <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> в/p ublic/index.html's

5. Ура!

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

Answer 3

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

npm install typeface-roboto --save 

Тогда в вашем index.js:

import 'typeface-roboto' 

Работает с WebPack/создать реагирующий-приложение.