home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

CSS Font Family

การจัดรูปแบบข้อความบนหน้าเว็บเป็นส่วนสำคัญของการออกแบบเว็บ ตัวอย่างเช่น คุณอาจต้องการให้ส่วนหัวปรากฏในแบบอักษรเฉพาะ หรือข้อความทั้งหมดบนหน้าเว็บเพื่อใช้ serif แบบอักษร

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

บทช่วยสอนนี้จะกล่าวถึง โดยอ้างอิงถึงตัวอย่าง พื้นฐานของคุณสมบัติตระกูลฟอนต์ CSS และวิธีที่คุณสามารถใช้คุณสมบัติเพื่อจัดรูปแบบข้อความบนหน้าเว็บ

ตระกูลแบบอักษร CSS

มีหลายแง่มุมที่เกี่ยวข้องกับการกำหนดสไตล์ฟอนต์ใน CSS ตั้งแต่การตั้งค่าสีไปจนถึงขนาดของฟอนต์ ส่วนที่สำคัญที่สุดอย่างหนึ่งของการกำหนดสไตล์ฟอนต์คือการตั้งค่าตระกูลฟอนต์ ซึ่งเป็นสไตล์ที่ใช้โดยข้อความบนหน้าเว็บ

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

font-family: fontFamilyOne, fontFamilyTwo, …;

คุณสมบัติ font-family ยอมรับแบบอักษรเดียวหรือรายการแบบอักษร หากคุณระบุฟอนต์มากกว่าหนึ่งฟอนต์ คุณควรแยกฟอนต์แต่ละฟอนต์ด้วยเครื่องหมายจุลภาค

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

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

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

เมื่อคุณใช้คุณสมบัติ font-weight คุณควรใส่ชื่อกลุ่มแบบอักษรทั่วไปอย่างน้อยหนึ่งชื่อ (เช่น serif, sans-serif หรือ monospace) เพื่อให้แน่ใจว่าหากไม่มีแบบอักษรอื่นในรายการของคุณ เบราว์เซอร์จะยังสามารถเลือกแบบอักษรสำหรับข้อความบนเว็บเพจที่จะแสดงได้

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

  • serif:ตัวละครใช้แบบอักษร serif (เช่น Lucida Bright, Palladio)
  • sans-serif:ตัวละครใช้แบบอักษร sans-serif (เช่น Open Sans, Trebuchet MS)
  • monospace:อักขระทั้งหมดมีความกว้างเท่ากัน (เช่น monospace, Menlo)
  • ตัวสะกด:ตัวละครมีเส้นเชื่อม (เช่น Lucida Calligraphy)
  • แฟนตาซี:แบบอักษรตกแต่งที่ใช้เพื่อดึงดูดความสนใจให้กับตัวละคร (เช่น Papyrus)

มีตระกูลฟอนต์ทั่วไปอื่นๆ ให้เลือก ซึ่งคุณสามารถอ่านรายละเอียดเพิ่มเติมได้ในเอกสารประกอบตระกูลฟอนต์ Mozilla CSS

ตอนนี้เรารู้พื้นฐานของคุณสมบัติฟอนต์-แฟมิลี่แล้ว เราสามารถอธิบายตัวอย่างการทำงานบางส่วนได้

ตัวอย่างแบบอักษร CSS

เราได้รับการร้องขอจากชมรมแสตมป์ท้องถิ่น The Seattle Stamp Club ให้ปรับแต่งแบบอักษรของบางส่วนบนเว็บไซต์ของพวกเขา

อันดับแรก เราถูกขอให้เปลี่ยนแบบอักษรของส่วนหัว

ทั้งหมดในหน้า "ติดต่อ" เพื่อใช้แบบอักษร "Open Sans" ตัวอย่างเช่น หัวข้อ "ติดต่อเรา" ในหน้า "ติดต่อ" ของเว็บไซต์ของตนควรปรากฏใน Open Sans หากไม่มีแบบอักษรนั้น ควรใช้กลุ่ม "sans-serif" ทั่วไป เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

<html>

<h1>Contact Us</h1>

<style>

h1 {
	font-family: "Open Sans", sans-serif;
}

CSS Font Family ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในโค้ด HTML ของเรา เราได้ระบุหัวข้อโดยใช้แท็ก

ซึ่งมีข้อความว่า Contact Us . จากนั้น ในโค้ด CSS ของเรา เราได้ใช้ตระกูลฟอนต์เพื่อกำหนดฟอนต์ขององค์ประกอบ

บนหน้าเว็บของเรา

ค่าที่เรากำหนดให้กับคุณสมบัติ font-family จะตั้งค่าแบบอักษรขององค์ประกอบ

ทั้งหมดเป็น Open Sans และหากไม่มีแบบอักษรนั้น sans-serif . ทั่วไป ใช้ในครอบครัว. เพื่อให้บรรลุสิ่งนี้ เราได้ระบุแบบอักษรสองแบบ โดยคั่นด้วยเครื่องหมายจุลภาค

ทีนี้ สมมติว่าเราต้องการจัดรูปแบบองค์ประกอบ

ทั้งหมดใน Contact . ของสโมสรตราประทับ หน้าเพื่อใช้แบบอักษร Times หากไม่มีฟอนต์นั้น ควรใช้ฟอนต์ serif เริ่มต้น เราสามารถใช้รหัสต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

<html>

<p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p>

<style>

p {
	font-family: "Times", serif;
}

CSS Font Family ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

ในตัวอย่างของเรา เราประกาศย่อหน้าของข้อความโดยใช้แท็ก

จากนั้น เราตั้งค่ากลุ่มแบบอักษรของแท็ก

ทั้งหมดในสไตล์ชีต CSS ของเราเพื่อใช้ Times และ serif แบบอักษร โดยค่าเริ่มต้น เบราว์เซอร์จะพยายามแสดงแท็ก

ทั้งหมดใน Times แบบอักษร หากไม่มีแบบอักษรนี้ serif ใช้แบบอักษร

บทสรุป

คุณสมบัติตระกูลฟอนต์ CSS ช่วยให้คุณสามารถระบุรูปแบบของข้อความบนหน้าเว็บได้ ตัวอย่างเช่น คุณสามารถใช้คุณสมบัติ font-family เพื่อใช้แบบอักษร "Arial" หรือแบบอักษรทั่วไป "cursive" สำหรับข้อความทั้งหมดบนหน้าเว็บ

บทช่วยสอนนี้กล่าวถึงโดยอ้างอิงถึงตัวอย่าง พื้นฐานของคุณสมบัติตระกูลฟอนต์ CSS และวิธีที่คุณสามารถใช้เพื่อจัดรูปแบบข้อความบนหน้าเว็บ ตอนนี้คุณพร้อมที่จะเริ่มใช้คุณสมบัติตระกูลฟอนต์เหมือนนักออกแบบเว็บไซต์ระดับปรมาจารย์แล้ว!