谷歌字体 + webpack答案

【问题标题】：google fonts + webpack谷歌字体 + webpack
【发布时间】：2017-07-31 04:48:39
【问题描述】：

我是 webpack 2.2 的新手；我想知道在我的项目中集成 Google 字体的最佳方式。

我正在使用 Webpack HTML 插件从模板生成index.html。所以目前我将 Google 字体 CSS 直接硬编码在 <script> 标签中，但我不太喜欢这种“解决方案”，因为它根本不使用 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-2 google-webfonts

【解决方案1】：

我将它直接导入到我的 sass 文件中，并且我的 webpack 配置具有 sass-loader。如果您还有其他问题，请告诉我

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

这是一个用于加载 sass 的示例 webpack 配置：（取自 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
            }]
        }]
    }
};

【讨论】：

什么是 sass 文件？你能用 sass-loader 展示 webpack 2 的配置吗，与经典的 css 相比，它带来了哪些好处？你能解释一下什么是 sass 吗？
你可以在这里阅读更多关于 sass-loader 和示例 webpack 配置的信息：github.com/webpack-contrib/sass-loader我更喜欢使用 sass(scss really)，你可以通过谷歌搜索 sass 及其优势 - css-tricks.com/forums/topic/…
这真的让你得到字体文件吗？我猜它只是将 @import 语句添加到生成的 CSS 文件中......

【解决方案2】：

没有必要使用 SASS。您将需要使用css-loader（如果您使用CSS）或sass-loader（如果您使用SASS）。请注意，如果您使用的是 SASS，您将需要两个加载器。

两个加载器都会打包url() 语句。但是，它们只有在 URL 是相对 URL 时才有效（这可能是当前答案似乎不起作用的原因）。

这意味着您需要下载字体。更复杂的是，每种字体都有多种格式，如果您想支持所有浏览器，则需要所有格式。幸运的是，有一个很棒的网站可以帮助我们：google-webfonts-helper。

在该网站中输入您想要的字体，它会为您生成如下所示的 CSS 规则：

/* 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 */
}

此 CSS 规则是通过 url() 导入的，并且 URL 是相对的。这意味着css-loader 会将其打包到您的应用程序中。但是，您还必须下载这些 URL 引用的所有文件。幸运的是，上面提到的google-webfonts-helper 网站为此提供了一个下载链接。下载这些字体并将它们放在../fonts（或您想要的任何目录。我个人使用./assets/fonts。google-webfonts-helper 工具有一个输入，如果您有自定义目录，您可以使用）

奖励：Material Icons 字体

Google 的材料图标通常以字体的形式出现在网站上。但是，它们需要特殊的 CSS 才能使它们工作。如果要打包素材图标字体则需要如下字体：

@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 */
}

您可以从here 下载字体文件（在解压后的zip 的iconfont 目录中查找。

此外您还需要在字体规则之后添加以下 CSS：

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

注意：使用材料图标字体的说明来自here，以防这些说明过时。

【讨论】：

感谢您的详细解答！关于这部分 两个加载器都会打包 url() 语句。但是，它们只有在 URL 是相对 URL 时才有效（这可能是当前答案似乎不起作用的原因）。 与 documentation 相比，它似乎仍然可以处理来自外部的？是否可以先下载外部源，由file-loader处理？实际上，这与我正在处理的问题有关，不胜感激！
stackoverflow.com/questions/56632884/…

【解决方案3】：

还有另一种方法可以捆绑样式（以防上述不适合您/您不想要 Sass 等）。

在终端运行$ npm install --save-dev style-loader css-loader

在webpack.config.js 中，在module.exports 内（带输入/输出）添加：

module: {
   rules: [
     {
       test: /\.css$/i,
       use: ['style-loader', 'css-loader'],
     },
   ],
 },

在您的 css 文件中（即与捆绑的 .js 文件位于同一文件夹中，例如在 src 中，如果您保留它的话）将 Google 字体导入添加到顶部（示例）：

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');

并确保您的主要 .js 文件（由 webpack 捆绑的文件）导入 style.css 路径：

import './style.css';

这种方法对某些人来说可能更容易，所以我要添加它

【讨论】：