nuxt webfontloader

Nuxt Webfontloader - Эффективная загрузка веб -шрифта никогда не была проще!

Выпуск заметок

Функции

• Полная поддержка SVG в качестве компонентов. Импортируйте их как ваши Vue SFC
• Построенный на вершине Google/Typekit Webfontloader
• Улучшает производительность сайта, загружая веб-филосовые фигуры асинхронно
• Nuxt 2 (и только Nuxt 2) Поддержка
• Полностью протестирован!

Настраивать

• Добавить nuxt-webfontloader в качестве зависимости, используя пряжу или NPM в ваш проект
• Добавить nuxt-webfontloader в раздел modules nuxt.config.js

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

• Включите ваши параметры WebFontLoader в nuxt.config.js , например:

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

• Удалите старые таблицы стилей с шаблона вашего приложения или nuxt.config.js Head Part:

 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 с опцией Font-Display, это возможно.

Но есть небольшая разница, если вы хотите добавить только одну семью шрифтов или более одного .

Здесь пример для добавления одной семьи шрифтов с опцией разрыва шрифта:

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

Разработка

• Клонировать это хранилище
• Установите зависимости, используя yarn install или npm install
• Начать сервер разработки с помощью npm run dev

Лицензия

MIT Лицензия

Авторские права (в) Александр Лихтер