谷歌字体+ webpack

我是新来的webpack 2.2;我想知道在我的项目中集成Google字体的最佳方法。谷歌字体+ webpack

我正在使用Webpack HTML插件从模板生成index.html。所以目前我硬编码的谷歌字体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>

来源

2017-03-10 mguijarr

没有必要使用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 */ 
}

您可以从here下载字体文件（看看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以防万一这些指示过期。

来源

2018-01-17 21:26:38 Pace

我直接导入这里面我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; 
}

这里是装载青菜样品的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 
      }] 
     }] 
    } 
};

来源

2017-03-19 00:49:39

什么是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/ –

这是否真的让你的字体文件？我想它只是将'@ import'语句添加到生成的CSS文件中... –

谷歌字体+ webpack

回答

相关问题