谷歌字體+ 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

回答

相關問題