web-dev-qa-db-fra.com

polices google + webpack

Je suis nouveau sur webpack 2.2; Je voudrais connaître la meilleure façon d'intégrer une police Google dans mon projet.

J'utilise le plugin Webpack HTML pour générer un index.html à partir d'un modèle. Donc pour le moment, j'ai codé en dur la police Google CSS directement dans un <script> tag mais je n'aime pas vraiment cette 'solution' car elle n'utilise pas vraiment du tout webpack:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet">
  <body>
    <div id='app'/>
  </body>
</html>
webpack-2google-webfonts
12
mguijarr

Il n'est pas nécessaire d'utiliser SASS. Vous devrez soit utiliser css-loader (Si vous utilisez CSS) ou sass-loader (Si vous utilisez SASS). Notez que si vous utilisez SASS, vous aurez besoin des deux chargeurs.

Les deux chargeurs emballeront les instructions url(). Cependant, ils ne fonctionneront tous les deux que si l'URL est une URL relative (c'est probablement pourquoi la réponse actuelle ne semble pas fonctionner).

Cela signifie que vous devrez télécharger les polices. Pour compliquer les choses, chaque police est disponible en plusieurs formats et tous les formats sont requis si vous souhaitez prendre en charge tous les navigateurs. Heureusement, il existe un excellent site Web pour nous aider: google-webfonts-helper .

Entrez les polices que vous souhaitez sur ce site Web et il générera pour vous des règles CSS qui ressemblent à ceci:

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

Cette règle CSS est importée via url() et les URL sont relatives. Cela signifie que le css-loader L'intégrera dans votre application. Cependant, vous devez également télécharger tous les fichiers référencés par ces URL. Heureusement, le site Web google-webfonts-helper Mentionné ci-dessus vous propose un lien de téléchargement à cet effet. Téléchargez ces polices et placez-les dans ../fonts (Ou dans le répertoire de votre choix. J'utilise personnellement ./assets/fonts. L'outil google-webfonts-helper A une entrée que vous pouvez utiliser si vous avez un répertoire personnalisé )

BONUS: police des icônes de matériaux

Les icônes matérielles de Google sont généralement exposées à un site Web sous forme de police. Cependant, ils nécessitent un CSS spécial pour les faire fonctionner. Si vous souhaitez emballer la police des icônes matérielles, vous avez besoin de la face de police suivante:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url('../fonts/MaterialIcons-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/MaterialIcons-Regular.woff2') format('woff2'),
    url('../fonts/MaterialIcons-Regular.woff') format('woff'),
    url('../fonts/MaterialIcons-Regular.ttf') format('truetype'),
    url('../fonts/MaterialIcons-Regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
}

Vous pouvez télécharger les fichiers de police depuis ici (Regardez dans le répertoire iconfont du Zip extrait.

De plus vous devrez également ajouter le CSS suivant après la règle de police:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  Word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Remarque: Les instructions d'utilisation des polices des icônes de matériaux proviennent de ici au cas où ces instructions seraient obsolètes.

17
Pace

Je l'importe directement dans mon fichier sass et ma configuration webpack a sass-loader. Dites moi si vous avez d'autres questions

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:100,300,400");

@mixin h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 52px;
    line-height: 62px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    margin-bottom: 40px;
}

Voici un exemple de configuration de webpack pour charger sass: (extrait de https://github.com/webpack-contrib/sass-loader )

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
        }]
    }
};
10
Vishal Malik