ในการพัฒนาเว็บไซต์ การใช้รูปแบบตัวอักษรที่ถูกต้องจะทำให้แอปพลิเคชันดูน่าสนใจ รูปแบบฟอนต์เหล่านี้ให้เบาะแสที่มองเห็นได้เกี่ยวกับลำดับการอ่านเอกสาร ตัวอย่างเช่น รูปแบบฟอนต์ของหัวเรื่องเอกสารต้องเป็นตัวหนาและมีความหมายแตกต่างจากที่อื่น สไตล์ยังช่วยแยกแยะเนื้อหาที่สำคัญจากเนื้อหาอื่นๆ
ผลลัพธ์การเรียนรู้ของบทความนี้คือ:
- Google Web Fonts คืออะไร?
- จะนำเข้า Google Fonts ใน HTML ได้อย่างไร
- วิธีใช้ประโยชน์จาก Google Fonts ในไฟล์ CSS
Google Web Fonts คืออะไร?
แบบอักษรบนเว็บของ Google เป็นไลบรารีแบบโอเพ่นซอร์สที่มีรูปแบบหรือตระกูลแบบอักษรหลายร้อยแบบ นอกจากนี้ยังมี API ที่ช่วยให้เราใช้เว็บฟอนต์กับ Android และ CSS Google Fonts นั้นเบากว่าไลบรารี่ฟอนต์อื่นๆ มากและใช้งานได้ฟรีสำหรับการใช้งานทางธุรกิจ ง่ายต่อการติดตั้งบนเว็บไซต์ใดๆ
ตามค่าเริ่มต้น CSS นำเสนอรูปแบบฟอนต์แฟนตาซี เซอริฟ ซานเซอริฟ เล่นหาง และโมโนสเปซ สามารถใช้ Google Fonts ได้หากคุณต้องการใช้รูปแบบตัวอักษรอื่นๆ
จะนำเข้า Google Fonts ใน HTML ได้อย่างไร
หากต้องการใช้ Google Fonts บนหน้า HTML ให้ทำตามขั้นตอนต่อไปนี้
ขั้นตอนที่ 1: เลือกตระกูลแบบอักษร
ก่อนอื่นให้เปิด Google แบบอักษร เว็บไซต์ทางการ แล้วเลือกฟอนต์ที่คุณชอบ ตัวอย่างเช่น เราได้เลือก ' กุ้งมังกรสอง ” ตระกูลแบบอักษร:
ขั้นตอนที่ 2: เลือกสไตล์
ถัดไป เลื่อนลงเพื่อดูรายการสไตล์ เพิ่มลงในคอลเลกชันของคุณโดยคลิกที่ “ + ' เข้าสู่ระบบ:
ขั้นตอนที่ 3: ดูครอบครัวที่เลือก
หากต้องการดูตระกูลที่เลือก ให้คลิกที่ไอคอนที่ไฮไลต์ด้านล่าง:
ขั้นตอนที่ 4: คัดลอกลิงก์เพื่อฝังใน HTML
หลังจากนั้นให้เลื่อนลงและคัดลอกลิงก์ของตระกูลฟอนต์โดยใช้ ' สำเนา ” ไอคอน:
วิธีใช้ประโยชน์จาก Google Fonts ในไฟล์ CSS
หากต้องการใช้สำเนาของ Google Fonts ใน CSS เพื่อจัดรูปแบบ ให้ทำตามตัวอย่างที่กำหนด
ตัวอย่างที่ 1
รวม ' ” องค์ประกอบเพื่อระบุเนื้อหาหรือย่อหน้า:
< หน้า > “เว็บไซต์กวดวิชาที่ดีที่สุด” หน้า >หากต้องการนำเข้า Google Fonts ให้วางโค้ดที่คัดลอกไว้ใน ' <สไตล์> ” แท็กของไฟล์ HTML:
@ นำเข้า URL ( 'https://fonts.googleapis.com/css2?family=Lobster+Two:ital@1&display=swap' ) ;สไตล์องค์ประกอบ 'p'
หน้า {ครอบครัวแบบอักษร: 'ล็อบสเตอร์ทู' , เล่นหาง;
จัดข้อความ: กึ่งกลาง;
ขนาดตัวอักษร: 45px;
สี: rgba ( 64 , 3 , 162 , 0.8 ) ;
}
คุณสมบัติ CSS ที่อธิบายต่อไปนี้ถูกนำไปใช้กับ HTML ' แท็ก:
- “ ครอบครัวแบบอักษร ” ถูกกำหนดด้วยค่า “ 'Lobster Two' เล่นหาง '. ตระกูลแบบอักษรนี้นำเข้าจาก Google Fonts
- “ จัดข้อความ ” ปรับการจัดตำแหน่งข้อความ
- “ ขนาดตัวอักษร ” กำหนดขนาดตัวอักษร
- “ สี ” กำหนดสีตัวอักษร
รูปภาพแสดงว่าใช้ตระกูลฟอนต์สำเร็จแล้ว:
ตัวอย่างที่ 2
ลองใช้ตัวอย่างอื่นเพื่อนำเข้า ' เนอโกวัน ” แบบอักษรของกูเกิล เพื่อจุดประสงค์นี้ ให้วางโค้ดสำหรับ URL แบบอักษร Google “Nerko One” อีกครั้งในช่อง “ <สไตล์> ' องค์ประกอบ:
@ นำเข้า URL ( 'https://fonts.googleapis.com/css2?family=Nerko+One&family=Oswald:wght@500&family=Pacifico&display=swap' ) ;สไตล์องค์ประกอบ 'p'
หน้า {ครอบครัวแบบอักษร: 'เนอโกวัน' , เล่นหาง;
น้ำหนักตัวอักษร: 300 ;
ขนาดตัวอักษร: 30px;
}
“ ครอบครัวแบบอักษร ”, “ ตัวอักษรน้ำหนัก ', และ ' ขนาดตัวอักษร ” คุณสมบัติถูกนำไปใช้กับ HTML “ ' องค์ประกอบ.
เอาต์พุต
เราได้สอนวิธีนำเข้าเว็บฟอนต์ของ Google ในไฟล์ CSS
บทสรุป
หากต้องการนำเข้า Google Fonts ใน CSS ก่อนอื่นให้ไปที่ Google แบบอักษร เว็บไซต์อย่างเป็นทางการ และเลือกรูปแบบตัวอักษร จากนั้นคัดลอกโค้ดที่มี “ @นำเข้า ” คำหลักและวางลงในไฟล์ CSS หรือใน “ <สไตล์> ” องค์ประกอบของไฟล์ HTML การศึกษานี้ได้แสดงขั้นตอนที่สมบูรณ์ในการนำเข้า Google Fonts ลงในไฟล์ CSS