nuxt webfontloader下載nuxt webfontloader源代碼下載

nuxt webfontloader

字體下載

1.0.0

下載

NUXT WebFontLoader-高效的Web字體加載從未如此簡單！

發行說明

特徵

SVG作為組件的全面支持。像您的VUE SFC一樣導入它們
建立在Google/typekit的WebFontloader之上
通過異步加載Web-Fonts來改善站點性能
NUXT 2（唯一的NUXT 2）支持
經過全面測試！

設定

將nuxt-webfontloader添加為使用紗線或npm的依賴項
將nuxt-webfontloader添加到nuxt.config.js的modules部分

 {
  modules : [
    'nuxt-webfontloader' ,
  ] ,
}

nuxt.config.js ：

 export default {
  webfontloader : {
    google : {
      families : [ 'Lato:400,700' ] //Loads Lato font with weights 400 and 700
    }
  } ,
}

從應用模板或nuxt.config.js頭部刪除舊樣式表：

 export default {
  head : {
    link : [
      // You don't need that line anymore!
      { rel : 'stylesheet' , href : 'https://fonts.googleapis.com/css?family=Lato:400,700' }
    ]
  }
}

使用字體顯示選項添加Google字體

如果您想使用帶有字體放置選項的Goggle Fonts，這是可能的。

但是，如果您只想添加一個字體家庭或多個字體家庭，則有很小的區別。

這裡是一個示例，用於添加一個具有字體顯示選項的字體族：

 export default {
  webfontloader : {
    google : {
      // Loads Open Sans font with weights 300 and 400 + display font as swap
      families : [ 'Open+Sans:300,400,600&display=swap' ]
    }
  } ,
}

在這裡，添加具有字體顯示選項的更多字體系列的示例：

 export default {
  webfontloader : {
      // add Google Fonts as "custom" | workaround required
      custom : {
          families : [
              'Open Sans:n3,n4' ,
              'Roboto:n3,n7'
          ] ,
          urls : [
              // for each Google Fonts add url + options you want
              // here add font-display option
              'https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap' ,
              'https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap'
          ]
      }
  } ,
}