กฎ CSS ของตระกูลแบบอักษรช่วยให้คุณกำหนดแบบอักษรของเอกสารเว็บ HTML หากต้องการอ้างถึงฟอนต์ภายนอก คุณสามารถใช้เมธอด url() เพื่อกำหนดฟอนต์ฟอนต์ หรือจะฝังไฟล์ CSS ของฟอนต์จากเว็บไซต์อย่าง Google Fonts ก็ได้
ในฐานะนักพัฒนา จะมีบางครั้งที่เราไม่ต้องการใช้แบบอักษรเริ่มต้นที่เติมไว้เมื่อประมวลผล HTML ของเรา บทความนี้มีจุดมุ่งหมายเพื่อแสดงวิธีเปลี่ยนแบบอักษรในเอกสาร HTML โดยใช้แนวทางปฏิบัติที่ดีที่สุด
วิธีการเปลี่ยนแบบอักษรใน HTML
มีสามวิธีในการเปลี่ยนแบบอักษรของหน้าเว็บใน HTML:
- การใช้แบบอักษรในตัวกับกฎชุดแบบอักษร
- การใช้กฎแบบอักษรเพื่ออ้างถึงแบบอักษรภายนอก
- การใช้สไตล์ชีต CSS ภายนอกเพื่อจัดรูปแบบฟอนต์บนหน้าเว็บ
ในบทความนี้ เราจะพูดถึงวิธีการเปลี่ยนแบบอักษรแต่ละวิธี
HTML เปลี่ยนแบบอักษร:แบบอักษรในตัว-ตระกูล
วิธีแรกที่เราสามารถเปลี่ยนแบบอักษรได้คือการใช้คุณสมบัติ font-family ในการจัดรูปแบบอินไลน์ของเรา สามารถทำได้ดังนี้:
<p style="font-family:wingdings;" id="wingdings">New York</p>
เราเพียงแค่ใช้ font-family คุณสมบัติเพื่อระบุแบบอักษรที่เราต้องการใช้ในบล็อกข้อความของเรา แบบอักษรมาตรฐานจำนวนมากพร้อมใช้งาน
ควรมีแบบอักษรสำรองไว้เผื่อในกรณีที่ไม่สามารถโหลดตัวเลือกแบบอักษรแรกได้ ง่ายเหมือนการเพิ่มเครื่องหมายจุลภาคและชื่อชุดแบบอักษรใหม่ ฉันมักจะลงท้ายด้วยการจัดกลุ่มทั่วไปเช่นกันในกรณี edge ที่ไม่มีสองตัวแรก
<p style="font-family: Roboto, Lato, sans-serif" id="roboto-plus-backups">New York</p>
การจัดกลุ่มทั่วไปในตอนท้ายเป็นเพียงฟอนต์ sans-serif เริ่มต้นสำหรับอุปกรณ์ใดก็ตามที่ไคลเอ็นต์ใช้ นามสกุลทั่วไปที่เราสามารถใช้ได้:monospace , serif , sans-serif , ตัวสะกด และ แฟนตาซี . คุณยังเข้าถึงแบบอักษรเฉพาะบางอย่างได้ เช่น Times New Roman
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
HTML เปลี่ยนแบบอักษร:การใช้แบบอักษรหน้า
คุณสามารถใช้กฎแบบอักษรเพื่อนำเข้าแบบอักษรจากแหล่งภายนอกมายังหน้าเว็บของคุณได้
เมื่อต้องการใช้วิธีนี้ คุณต้องมีสิทธิ์เข้าถึงเอกสารแบบอักษรภายนอก เอกสารแบบอักษรมักจะมีนามสกุล “.ttf”
มาดูวิธีการเปลี่ยนแบบอักษรโดยใช้แอตทริบิวต์ font-face นี่คือกฎสไตล์ CSS ที่เราต้องใช้:
@font-face {
font-family: "Open Sans";
src: url(yoururl);
} เราใช้แอตทริบิวต์ font-face style เพื่อประกาศแบบอักษรใหม่ของเรา แอตทริบิวต์ font-family กำหนดชื่อแบบอักษรใหม่ของเรา src:url() สั่งให้เอกสาร CSS ของเราทราบว่าจะหาแบบอักษรได้ที่ไหน ค่าของ “yoururl” ควรเป็น URL ของแบบอักษรข้อความของคุณ
แบบอักษรของเราจะยังไม่เปลี่ยนหน้าเว็บของเรา เราต้องบอก CSS สไตล์ชีตว่าองค์ประกอบใดควรใช้แบบอักษรใหม่ของเรา:
h1, h2, h3 {
font-family: "Open Sans";
} รหัสนี้บอกให้สไตล์ชีต CSS ของเราใช้แบบอักษร "Open Sans" กับองค์ประกอบบางอย่างบนหน้าเว็บของเรา h1, h2, h3 คือตัวเลือก CSS ที่ใช้สไตล์ของเรากับองค์ประกอบที่แสดง องค์ประกอบเหล่านี้เป็นส่วนหัวของ HTML
เปลี่ยนแบบอักษร HTML:แบบอักษร CSS ภายนอก
บางไซต์ เช่น Google Fonts ให้คุณฝังแบบอักษรลงในไซต์ของคุณโดยใช้สไตล์ชีต CSS สไตล์เหล่านี้ช่วยให้คุณกำหนดประเภทฟอนต์โดยใช้แอตทริบิวต์ CSS ในกรณีนี้ เราจะพยายามใช้แบบอักษร "Bangers" และ "Yellowtail" จาก Google Fonts:
<p id="sans-serif" style="font-family: Bangers, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p>
หากคุณต้องเรียกใช้โค้ดด้านบนใน IDE ที่คุณเลือกและโหลด โค้ดดังกล่าวจะใช้ค่าเริ่มต้นเป็นฟอนต์ทั่วไป หากคุณต้องการใช้แบบอักษรเหล่านี้ คุณสามารถทำได้ด้วยการคลิกเพียงไม่กี่ครั้ง:
- ไปที่ Google Fonts
- ใช้เวลาทดลองกับเว็บไซต์หากต้องการ มีตัวเลือกมากมายสำหรับแบบอักษรที่นี่ คุณสามารถปรับแต่งข้อความตัวอย่างด้วยสิ่งที่คุณต้องการ มีอินพุตอยู่ที่ด้านบนของหน้าเว็บเพื่อให้คุณป้อนสิ่งที่คุณต้องการ
- ค้นหา 'Yellowtail' และคลิกที่มัน คุณควรมาที่หน้าจอพร้อมข้อมูลโดยละเอียดเกี่ยวกับแบบอักษร มองหา “+ เลือกสไตล์นี้ ” และคลิกที่มัน
- ลิ้นชักแถบด้านข้างควรมีข้อมูลเกี่ยวกับการเลือกของคุณ จะยังคงเปิดอยู่ในขณะที่คุณเรียกดูแบบอักษรเพิ่มเติม คลิก เรียกดูแบบอักษร ที่ด้านบนของหน้าจอและค้นหา 'Bangers' ทำตามขั้นตอนเดียวกับที่ทำกับ "Yellowtail"
- ที่แถบด้านข้าง คุณจะเห็นแท็บสำหรับ "ฝัง" คลิกเลย
- ตัว ควรเน้นตัวเลือกแล้ว คัดลอกและวาง ลงในส่วนหัวของ HTML
- ปฏิบัติตามหลักเกณฑ์สำหรับวิธีใช้แบบอักษรแต่ละแบบใน CSS มีแบบอักษรสำรองที่แนะนำด้วย
- แค่นั้นแหละ! คุณพร้อมที่จะใช้แบบอักษรเหล่านี้ในเอกสารของคุณแล้ว
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Yellowtail&display=swap" rel="stylesheet"> </head> <body> <p id="courier">New York</p> <p id="roboto">New York</p> <p id="raleway" style="font-family: Raleway, sans-serif">New York</p> <p id="serif" style="font-family: Courier New">New York</p> <p id="monospace" style="font-family: Roboto Monospace, monospace">New York</p> <p id="sans-serif" style="font-family: Bangers, Anton, sans-serif" >New York</p> <p id="cursive" style="font-family: Yellowtail, cursive" >New York</p> <p id="roboto-condensed" style="font-family: Roboto Condensed, sans-serif">New York</p> </body> </html>
การสาธิตการทำงานด้านบนแสดงทั้งฟอนต์ในตัวและฟอนต์ของบุคคลที่สามที่กำลังใช้งานอยู่ ลองใช้มือของคุณในการนำเข้าแบบอักษรอื่น ๆ !
บทสรุป
คุณสามารถเปลี่ยนแบบอักษร HTML ได้โดยใช้แอตทริบิวต์ตระกูลแบบอักษรหรือโดยใช้สไตล์ชีต CSS ภายนอกที่มีแบบอักษรที่กำหนดเอง หากต้องการฝังแบบอักษรที่กำหนดเองลงใน CSS ของไซต์ คุณสามารถใช้กฎแบบอักษรได้
คุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการเข้ารหัสใน HTML หรือไม่? อ่านคู่มือวิธีการเรียนรู้ HTML ของเรา ในคู่มือนี้ คุณจะได้พบกับเคล็ดลับยอดนิยมเกี่ยวกับวิธีการเรียนรู้ HTML รวมทั้งคำแนะนำเกี่ยวกับหลักสูตรออนไลน์ที่ดีที่สุด
