Google字体和Webpack

Question

Google字体和Webpack

23

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

我正在使用Webpack HTML插件从模板生成一个index.html。因此，目前我直接在<script>标记中硬编码了Google字体CSS，但我并不真正喜欢这种“解决方案”，因为它并没有真正使用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>

- mguijarr

3个回答

16

我直接在我的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
            }]
        }]
    }
};

- vma

什么是Sass文件？您能展示一下使用sass-loader的webpack 2配置，并且相比于经典的CSS有哪些优势吗？能否请您解释一下Sass是什么？ - mguijarr

你可以在这里阅读有关sass-loader和示例webpack配置的更多信息：https://github.com/webpack-contrib/sass-loader。我更喜欢使用sass（实际上是scss），你可以搜索sass及其优点 - https://css-tricks.com/forums/topic/what-is-the-benefit-of-using-preprocessors-like-sass/。 - vma

13

这实际上会获取到字体文件吗？我猜它只是将@import语句添加到生成的CSS文件中…… - ssc-hrep3

0

如果以上方式不适合您/您不想使用Sass等方式，还有另一种方式可以打包样式。

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

在webpack.config.js内，在module.exports（包含entry/output）中添加：

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

阅读更多：https://webpack.js.org/guides/asset-management/#loading-css

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

- Xelphin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pace · Accepted Answer

无需使用SASS。如果您正在使用CSS，则需要使用css-loader；如果您正在使用SASS，则需要使用sass-loader。请注意，如果您使用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的Material Icons通常以字体形式呈现在网站上。然而，它们需要特殊的CSS才能使它们正常工作。如果您想打包Material Icons字体，则需要以下字体格式：

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

你可以从这里下载字体文件（在解压的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';
}

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