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'
          ]
      }
  } ,
}