Fatal编程技术网
  • webpack-2/
  • Webpack 2 谷歌字体&x2B；网页包

Webpack 2 谷歌字体&x2B；网页包

Webpack 2 谷歌字体&x2B；网页包,webpack-2,google-webfonts,Webpack 2,Google Webfonts,我是网页2.2的新手；我想知道在我的项目中集成谷歌字体的最佳方法 我正在使用WebpackHTML插件从模板生成index.HTML。因此，目前我在标签中直接硬编码了Google字体CSS，但我并不真正喜欢这个“解决方案”，因为它根本不使用webpack： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <link href="https

我是网页2.2的新手；我想知道在我的项目中集成谷歌字体的最佳方法

我正在使用WebpackHTML插件从模板生成
index.HTML
。因此，目前我在
标签中直接硬编码了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>
我直接在我的sass文件中导入它，我的网页配置有sass加载器。如果你有更多问题，请告诉我

@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的示例网页配置：（取自）

没有必要使用SASS。您需要使用
css加载器
（如果您使用的是css）或
sass加载器
（如果您使用的是sass）。注意，如果您使用的是SASS，则需要两个加载程序

两个加载程序都将打包
url（）
语句。然而，只有当URL是一个相对URL时，这两种方法才有效（这可能就是当前答案似乎不起作用的原因）

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

在该网站中输入您想要的字体，它将为您生成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加载程序将把它打包到应用程序中。但是，您还必须下载这些URL引用的所有文件。幸运的是，上面提到的
GoogleWebFonts helper
网站为此提供了一个下载链接。下载这些字体并将它们放在
。/font
（或您想要的任何目录中。我个人使用
/assets/font
。
google webfonts helper
工具有一个输入，如果您有自定义目录，可以使用该输入）

奖励：材质图标字体

谷歌的材料图标通常以字体的形式显示在网站上。但是，它们需要特殊的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 */
}


您可以从（查看解压缩zip的
icont
目录）下载字体文件

此外您还需要在字体规则之后添加以下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';
}



注意：材料图标字体的使用说明来自于这些说明，以防这些说明过时。
还有另一种方法可以捆绑样式（如果上述内容不适合您/您不需要Sass等）

在终端运行中，
$npm安装--保存开发风格加载程序css加载程序

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

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


@导入url（'https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap'）；

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


import './style.css';


阅读更多：


对于某些人来说，这种方法可能更简单，因此我添加它的原因是
什么是sass文件？你能展示带有sass加载器的webpack 2配置吗？与经典css相比，它带来了什么好处？你能解释一下什么是sass吗？你可以在这里阅读更多关于sass加载器和示例webpack配置的信息：我更喜欢使用sass（scss真的），你可以在谷歌上搜索sass及其优点-这真的能让你得到字体文件吗？我猜它只会将
@import
语句添加到结果CSS文件中…感谢你的详细回答！关于这一部分，两个加载程序都会打包url（）语句。但是，它们只有在url是相对url时才起作用（这可能是当前答案似乎不起作用的原因）。与之相比，它似乎仍然可以从外部处理源代码？如果它可以先下载外部源代码，并由
文件加载器处理
？实际上，这与我正在处理的问题有关，任何帮助都将不胜感激！

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




import './style.css';