google polices + webpack

Je suis nouveau sur le webpack 2.2 ; je voudrais savoir la meilleure façon d'intégrer une Google de police au sein de mon projet.

Je suis en utilisant le Webpack HTML plugin pour générer un index.html à partir d'un modèle. Donc pour le moment je l'ai codé en dur, les polices Google CSS directement dans un <script> tag, mais je n'aime pas vraiment cette "solution", car il n'a pas vraiment d'utiliser webpack:

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

OriginalL'auteur mguijarr | 2017-03-10

  1. 12

    Il n'est pas nécessaire d'utiliser SASS. Vous aurez besoin d'utiliser css-loader (si vous êtes en utilisant le CSS) ou sass-loader (si vous utilisez SASS). Remarque, si vous utilisez SASS vous aurez besoin de deux chargeurs.

    Deux chargeurs pack url() consolidés. Cependant, ils ne fonctionnent que si l'URL est une URL relative (ce qui est probablement la raison pour laquelle la réponse actuelle ne semble pas fonctionner).

    Cela signifie que vous aurez besoin de télécharger les polices de caractères. Pour rendre les choses plus compliquées, chaque police est disponible en plusieurs formats et tous les formats sont nécessaires si vous souhaitez prendre en charge tous les navigateurs. Heureusement, il existe un excellent site web pour nous aider: google webfonts-helper.

    Entrer les polices que vous désirez dans ce site web et il va générer des règles CSS pour vous que de ressembler à la suivante:

    /* 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 de l'importation via url() et les Url sont relatifs. Cela signifie que le css-loader pack dans votre application. Cependant, vous devez également télécharger tous les fichiers référencés par ces Url. Heureusement, la google-webfonts-helper site mentionné ci-dessus vous propose un lien de téléchargement pour cette fin. Télécharger les polices et les placer dans ../fonts (ou tout autre répertoire que vous voulez. Personnellement, j'utilise ./assets/fonts. Le google-webfonts-helper outil dispose d'une entrée vous pouvez utiliser si vous avez un répertoire personnalisé)

    BONUS: Matériel Icônes de Police

    Google matériau icônes sont généralement exposés à un site web comme une police. Cependant, ils nécessitent des CSS pour les faire travailler. Si vous souhaitez emballer le matériel icônes de police alors vous avez besoin de la suite face à la police:

    @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 polices de ici (Regardez dans le iconfont répertoire de l'extrait du zip.

    En outre vous devrez également ajouter le code CSS suivant après que la police face à la règle:

    .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 pour l'utilisation du matériel icônes de polices viennent de ici dans le cas où ces instructions sortir de la date.

    OriginalL'auteur Pace

  2. 10

    Je l'importer directement à l'intérieur de mon fichier sass et mon webpack config a sass-loader. Laissez-moi savoir si vous avez plus de 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 webpack config pour le chargement sass: (prises 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
            }]
        }]
    }
};
    Qu'est ce qu'un fichier sass? Pouvez-vous montrer le webpack 2 config avec sass-chargeur, et quels sont les avantages qu'il apporte par rapport à la classique css ? Pourriez-vous expliquer ce qu'est le sass est?
    Vous pouvez en lire plus à propos de sass-chargeur et de l'échantillon webpack config ici: github.com/webpack-contrib/sass-loader je préfère utiliser sass(scss vraiment) , vous pouvez google pour sass et ses avantages - css-tricks.com/forums/topic/...
    Est-ce à vous les fichiers de police? Je suppose que cela ne fait qu'ajouter à la @import déclaration au fichier CSS...
    Cela a fonctionné pour moi. Merci bro

    OriginalL'auteur Vishal Malik