mgu*_*arr 13 google-webfonts webpack-2
我是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>
Pac*_*ace 18
没有必要使用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如果您有自定义目录,该工具有一个输入可以使用)
奖励:材料图标字体
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 */
}
您可以从这里下载字体文件(查看iconfont解压缩的zip目录.
此外,您还需要在字体面规则之后添加以下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';
}
注:关于使用材料图标字体都来自这里的情况下,这些指令得到过时.
vma*_*vma 10
我直接在我的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
}]
}]
}
};