Comment inclure de la police Roboto dans webpack construire pour le Matériel de l'INTERFACE utilisateur?

Pour un progressive application web basée sur Matériel de l'INTERFACE utilisateur (Réagir) et construit avec Webpack, comment dois-je inclure police Roboto(s), de sorte que l'application ne dépend pas sur les serveurs de Google et les polices aussi travailler hors ligne ?

La la page d'installation juste les références de la Google polices de la page, mais que de toute évidence, les forces de polices à télécharger depuis les serveurs de Google.
Similaire Matériau Problème d'INTERFACE utilisateur existe à l'égard de la police Roboto, mais repose toujours sur Google fournissant les fichiers de police.
J'ai trouvé un NPM paquet fournissant les fichiers de police Roboto, mais je ne suis pas sûr de la façon d'inclure ces fichiers comme beaucoup de styles et de formats de police sont fournis et je ne sais pas ce que les styles de Matériel de l'INTERFACE utilisateur vraiment besoin. Aussi, l'importation de ces familles de polices simplement via @import semble avoir les problèmes de performances.

Donc, ce qui est une bonne et simple solution de regroupement de la droit Roboto fichiers avec mon application?

InformationsquelleAutor Udo G | 2016-11-02

C'est la façon dont mon équipe a passé en dont la Roboto polices dans notre Webpack projet:

Télécharger le Roboto polices et de faire un fichier CSS dans une police de caractères spécifique dossier

Créer un dossier (/fonts).
Télécharger tous les Roboto polices de Police Écureuil et de les déplacer dans /fonts.
Créer le fichier CSS (/fonts/index.css). Nous avons obtenu le contenu de ce fichier à partir 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;
}

Utiliser le fichier-chargeur webpack module à charger dans les fichiers de police afin webpack peut les reconnaître

npm install --save file-loader (https://www.npmjs.com/package/file-loader)
Dans votre webpack de config, utiliser le chargeur comme suit:

webpack.conf.js:

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

Importer la police fichier css dans l'entrée principale de l'application

App.js:

import './fonts/index.css';

Et c'est tout. Votre application par défaut de la police doit maintenant être Roboto.

EDIT: Qui Roboto Polices ne Matériau-UI fait utiliser?

Partie de cette question est de déterminer la droit Roboto polices de caractères à inclure dans le projet puisque la totalité de la Roboto polices est de près de 5 MO.

Dans le README, les instructions, y compris pour les Roboto point pour: fonts.google.com/?selection.family=Roboto:300,400,500. Ici, 300 = Roboto-Lumière, 400 = Roboto Réguliers, et 500 = Roboto-Moyen. Ceux-ci correspondent à la police des poids définis dans le typography.js fichier. Bien que ces trois polices poids compte pour une utilisation dans la quasi-totalité de la bibliothèque, il y a une référence à la Régulière-Gras dans DateDisplay.js. Si vous n'êtes pas en utilisant le DatePicker, vous devriez être sûr de les omettre. Italique styles de police n'est pas utilisé n'importe où dans le projet de côté de l'GitHub markdown style.

Cette information est exacte au moment de la rédaction de ce document, mais il peut changer dans l'avenir.

Merci. Oui, c' travaux. Mais le problème est, je suis de la création d'un PWA ce qui signifie que tous éléments téléchargés et mis en cache. Juste les fichiers de police à lui seul la somme de 4,5 mégaoctets. Je pense (espère) que tous les styles (Mince, Léger, Moyen, ...) sont vraiment nécessaires par MUI - mais comment les trouver...?
Ah, je vois le problème maintenant. Je ne sais pas si vous avez besoin de toute autre police d'ailleurs Roboto-Régulier. Cela dépend si il y a des composants qui utilisent des font-weight ou font-style style. Je vais essayer de vérifier ça ce soir. En tout cas, j'ai trouvé un article sur le chargement différé des polices pour un gain de performance. Pourriez-vous vous charger Roboto-Régulier à l'avance et de lazy-load les autres variantes plus tard?
Article intéressant. Cependant, puisque c'est un PWA j'ai besoin d'avoir tous les fichiers de polices disponibles hors connexion (ce qui signifie qu'ils doivent être téléchargés). Je suppose qu'il n'y a pas d'autre moyen que de supprimer les styles (et donc à identifier celles qui sont inutiles)
Je voulais ajouter que le lien entre le matériel de l'interface utilisateur README points de fonts.google.com/?selection.family=Roboto:300,400,500. 300, 400 et 500 correspondent à Roboto Lumière, Roboto Régulière, et Roboto Moyen. Donc, ceux qui seraient les polices nécessaires si les documents sont dignes de confiance.
Voir ma réponse mis à jour. Roboto-Lumière, Roboto Réguliers, et Roboto-Medium sont utilisés presque exclusivement dans la bibliothèque, mais je n'ai pas trouver une seule référence à Roboto-Gras dans le DatePicker de code. Je n'ai pas trouvé des références utiles en italique font-style.
Super! Qui l'a réduit à 1 mégaoctet de fichiers de police. Merci! 🙂
Maintenant, la ligne " format: fichier?nom=fonts/[nom].[ext]' "est remplacé par le chargeur de: "fichier" -chargeur?nom=fonts/[nom].[ext]' "

InformationsquelleAutor Daniel Bank

28

Vous pouvez aussi le faire comme il est documenté dans ce numéro:
https://github.com/callemall/material-ui/issues/6256
```
npm install typeface-roboto --save
```
Puis, dans votre index.js:
```
import 'typeface-roboto'
```
Fonctionne avec webpack/créer-réagir-app.
- Fonctionne avec Gatsby trop!
- Que parce que les projets ci-dessus viennent avec le support des polices de la boîte. L'OP a été demandé comment configurer les polices dans "éjecté" ou roulés à la main webpack mode
- Pouvez vous s'il vous plaît soupçon comment spécifier les polices exactes à importer avec import typeface-roboto? Si je veux par exemple à seulement 300 et 400 polices.
- Que je sache, ce mnp forfait comprend toutes les polices de poids. Voir le dépôt git: github.com/KyleAMathews/typefaces/blob/master/packages/roboto/...
- Est-ce à dire que tout le texte dans l'application sera dans la police roboto, ou est-il encore à faire?
InformationsquelleAutor kimomat
0

Dans le cas où l'application a été commencé avec créez-réagir-app, il n'a pas un [visible] webpack configfile. Dans ce cas, vous pouvez effectuer les opérations suivantes:
1. créer /répertoire des polices dans /public
2. créer /public/fonts/fonts.css, qui définit la @font-faces
  
  @font-face { font-family: 'inglobal'; font-weight: normal; font-style: normal; src: url('./OperatorMono.ttf'); }
3. Copie des fichiers de police
4. ajouter
  <link href="%PUBLIC_URL%/fonts/fonts.css">
  d' /public/index.html's
5. Hourra!
5/b. Si, pour une raison quelconque, cela ne fonctionne toujours pas, changez les polices' extensions .css (également à la src: url('./OperatorMono.css') )
- Je ne suis pas un expert sur Webpack mais je pense que vous n'êtes pas censé ajouter des balises HTML de chargement css, webpack prend en charge que dans le cadre de l'optimisation qu'il n'donc je pense que vous êtes en contournant webpack.
- C'est vrai, en contournant est le point, puisque vous ne pouvez pas modifier le webpack fichier de configuration - sauf s'il est éjecté de manière irréversible.
InformationsquelleAutor sandorvasas

Vous devez vous connecter pour publier un commentaire.