web-dev-qa-db-fra.com

Comment inclure la police Roboto dans la compilation Webpack pour Material UI?

Pour un progressif application Web basée sur I Material (React) et construite avec Webpack , comment inclure correctement les polices Roboto afin que l’application ne dépende pas des serveurs de Google et que les polices fonctionnent également hors connexion?

Alors, quelle est une solution simple et efficace pour regrouper les fichiers right Roboto avec mon application?

webpackwebfontsmaterial-uiroboto
36
Udo G

Voici comment mon équipe a décidé d’inclure les polices Roboto dans notre projet Webpack:

Téléchargez les polices Roboto et créez un fichier CSS dans un dossier spécifique à la police.

  • Créer un dossier (/fonts).
  • Téléchargez toutes les polices Roboto de Font Squirrel et déplacez-les dans /fonts.
  • Créez le fichier CSS (/fonts/index.css). Nous avons obtenu le contenu de ce fichier de ce tutoriel .

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;
}

Utilisez le module Webpack du chargeur de fichiers pour charger les fichiers de polices afin que Webpack puisse les reconnaître.

webpack.conf.js: 

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

Importer le fichier css de polices dans l'entrée principale de l'application

App.js: 

import './fonts/index.css';

Et c'est tout. La police par défaut de votre application devrait maintenant être Roboto.

EDIT: Quelles sont les polices Roboto utilisées par Material-UI?

Une partie de cette question consiste à déterminer right Les polices Roboto à inclure dans le projet, car l’ensemble des polices Roboto fait presque 5 Mo.

Dans le README , les instructions pour inclure Roboto indiquent: fonts.google.com/?selection.family=Roboto:300,400,5 . Ici, 300 = Roboto-Light, 400 = Roboto-Regular et 500 = Roboto-Medium. Celles-ci correspondent aux poids de police définis dans le fichier fichier typography.js . Bien que ces trois poids de police soient utilisés dans la quasi-totalité de la bibliothèque, il existe une référence à Regular-Bold dans DateDisplay.js . Si vous n'utilisez pas le DatePicker, vous devriez probablement pouvoir l'omettre en toute sécurité. Le style de police en italique n'est utilisé nulle part dans le projet, mis à part le style de démarquage GitHub.

Cette information est exacte au moment d'écrire ces lignes, mais elle pourrait changer dans le futur.

38
Daniel Bank

Vous pouvez également le faire comme indiqué dans ce numéro: https://github.com/callemall/material-ui/issues/6256

npm install typeface-roboto --save

Ensuite, dans votre index.js:

import 'typeface-roboto'

Fonctionne avec webpack/create-react-app.

32
kimomat

Si l'application a été démarrée avec create-react-app, elle ne possède pas de fichier de configuration Webpack [visible]. Dans ce cas, vous pouvez effectuer les opérations suivantes:

  1. créer le répertoire/fonts dans/public

  2. créez /public/fonts/fonts.css, qui définit le @font-faces

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

  3. Copier les fichiers de polices

  4. ajouter <link rel="stylesheet" href="%PUBLIC_URL%/fonts/fonts.css"> à /public/index.html

  5. Hourra!

5/b. Si, pour une raison quelconque, cela ne fonctionne toujours pas, modifiez les extensions des polices en .css (également à l'adresse src: url ('./ OperatorMono.css'))

0
sandorvasas