google 字体 + webpack
google fonts + webpack
我是 webpack 2.2 的新手;我想知道在我的项目中集成 Google 字体的最佳方法。
我正在使用 Webpack HTML 插件从模板生成 index.html
。所以目前我直接在 <script>
标签中硬编码 Google 字体 CSS 但我不太喜欢这个 'solution' 因为它根本没有真正使用 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 文件中,我的 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。您将需要使用 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
网站为此提供了下载 link。下载这些字体并将它们放在 ../fonts
(或任何你想要的目录。我个人使用 ./assets/fonts
。如果你有自定义目录,google-webfonts-helper
工具有一个输入,你可以使用)
奖励:Material 图标字体
Google 的 material 图标通常作为字体显示给网站。但是,它们需要特殊的 CSS 才能工作。如果要打包 material 图标字体,则需要以下字体:
@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';
}
注意:material 图标字体的使用说明来自 here,以防这些说明过时。
还有另一种方法可以捆绑样式(以防上述方法不适合您/您不想要 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
这种方法对某些人来说可能更容易,所以我要添加它
我是 webpack 2.2 的新手;我想知道在我的项目中集成 Google 字体的最佳方法。
我正在使用 Webpack HTML 插件从模板生成 index.html
。所以目前我直接在 <script>
标签中硬编码 Google 字体 CSS 但我不太喜欢这个 'solution' 因为它根本没有真正使用 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 文件中,我的 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。您将需要使用 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
网站为此提供了下载 link。下载这些字体并将它们放在 ../fonts
(或任何你想要的目录。我个人使用 ./assets/fonts
。如果你有自定义目录,google-webfonts-helper
工具有一个输入,你可以使用)
奖励:Material 图标字体
Google 的 material 图标通常作为字体显示给网站。但是,它们需要特殊的 CSS 才能工作。如果要打包 material 图标字体,则需要以下字体:
@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';
}
注意:material 图标字体的使用说明来自 here,以防这些说明过时。
还有另一种方法可以捆绑样式(以防上述方法不适合您/您不想要 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
这种方法对某些人来说可能更容易,所以我要添加它