ดาวน์โหลด nuxt webfontloader - nuxt webfontloader Source Source Download Download

nuxt webfontloader

ดาวน์โหลดแบบอักษร

1.0.0

ดาวน์โหลด

NUXT WebFontLoader - การโหลดเว็บแบบฟอนต์ที่มีประสิทธิภาพไม่เคยง่ายกว่านี้!

บันทึกย่อ

คุณสมบัติ

การสนับสนุนอย่างเต็มที่ของ SVGs เป็นส่วนประกอบ นำเข้าเช่น vue sfcs ของคุณ
สร้างขึ้นบน webfontloader ของ Google/TypeKit
ปรับปรุงประสิทธิภาพของไซต์โดยการโหลดเว็บแบบอะซิงโครนัสแบบอะซิงโครนัส
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 ส่วนหัว:

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

การเพิ่ม Google 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'
          ]
      }
  } ,
}