astro font picker

Astro Font Picker

Astro Font Picker เป็นการรวมแถบเครื่องมือ dev ที่ให้คุณลองใช้แบบอักษรที่แตกต่างกันในเว็บไซต์ของคุณ มันใช้ Google Fonts เพื่อโหลดแบบอักษรโอเพ่นซอร์สมากกว่า 1,000 แบบ ใช้คีย์ขึ้น/ลงเพื่อหมุนเวียนผ่านแบบอักษรที่แตกต่างกันอย่างรวดเร็วหรือเลือกหนึ่งจากรายการ

การติดตั้ง

การติดตั้งอัตโนมัติ:

 npx astro add astro-font-picker

การติดตั้งด้วยตนเอง:

 npm install astro-font-picker

เพิ่มไฟล์ astro.config.mjs ของคุณ:

 import astroFontPicker from 'astro-font-picker' ;

export default {
  integrations : [
    astroFontPicker ( ) ,
    // other integrations
  ] ,
} ; 

การใช้งาน

Astro Font Picker จะแสดงเป็นไอคอนใหม่ในแถบเครื่องมือ Dev ซึ่งเปิดใช้งานโดยค่าเริ่มต้นใน Astro 4.0 ขึ้นไป

กรองแบบอักษรตามประเภท (ไม่บังคับ) จากนั้นเลือกตระกูลตัวอักษร ตัวอักษรจะถูกนำไปใช้กับองค์ประกอบร่างกายของเว็บไซต์ของคุณ

หากคุณมีตระกูลแบบอักษรที่ใช้กับองค์ประกอบที่ต่ำกว่าองค์ประกอบของร่างกายมันจะไม่แทนที่แบบอักษรเหล่านั้นเว้นแต่คุณจะเปิด Override All Styles สลับ

คำแนะนำ: คุณสามารถใช้ปุ่มลูกศรขึ้น/ลงเพื่อหมุนเวียนผ่านแบบอักษรอย่างรวดเร็ว

เปิดใช้งาน

การสลับนี้ควบคุมว่าตัวอักษรที่เลือกจะถูกนำไปใช้กับหน้าหรือไม่ มันถูกเปิดใช้งานโดยค่าเริ่มต้น

แทนที่ทุกสไตล์

การสลับนี้จะแทนที่รูปแบบ font-family ทั้งหมดบนไซต์ของคุณด้วยแบบอักษรที่เลือก หากไม่มีการเปิดใช้งานสิ่งนี้ตระกูลตัวอักษรใด ๆ ที่นำไปใช้กับองค์ประกอบที่ต่ำกว่าองค์ประกอบของร่างกายจะไม่ถูกแทนที่

เหตุผลหลักในการแทนที่ Override All Styles ใช้งานคือการรักษารูปแบบตัวอักษรขององค์ประกอบเฉพาะหรือส่วนของเว็บไซต์ของคุณ ด้วยวิธีนี้เมื่อคุณใช้ตัวเลือกแบบอักษรเพื่อเลือกแบบอักษรสำหรับพื้นที่อื่น ๆ มันจะไม่แทนที่ฟอนต์ที่คุณตัดสินใจแล้ว

ตัวอักษร CSS เอาต์พุต

นี่คือลิงค์สไตล์ชีทและ CSS ที่คุณสามารถคัดลอกและวางลงในเว็บไซต์ของคุณเพื่อติดตั้งแบบอักษรอย่างถาวร ตัวอย่างเช่น:

ในองค์ประกอบ head ของคุณ:

 < link rel =" stylesheet " href =" https://fonts.googleapis.com/css2?family=Itim " />

ใน CSS ของคุณ:

 h1 {
    font-family : Itim , cursive;
}

ดูใน Google Fonts

ลิงค์นี้จะเปิดฟอนต์ที่เลือกใน Google Fonts

การตั้งค่าจะถูกเก็บไว้ในที่เก็บเซสชัน

การตั้งค่าทั้งหมด (เปิดใช้งานการแทนที่ประเภทตัวอักษรและตระกูลตัวอักษร) จะถูกบันทึกไว้ในที่เก็บเซสชันดังนั้นพวกเขาจะไม่หายไปเมื่อหน้ารีเฟรชระหว่างการพัฒนา

อื่น

โครงการนี้มีพื้นฐานมาจากห้องสมุดตัวอักษรซึ่งเป็นตัวเลือกตัวอักษรแบบสแตนด์อโลนที่สามารถใช้กับเว็บไซต์ใดก็ได้