วิธีการใช้ฟอนต์ใน CSS ให้ดีที่สุด

บทความนี้จะแนะนำให้คุณรู้จักกับหัวข้อที่เรียบง่าย แต่มีความสำคัญนั่นคือ Fonts In และยังจะให้คุณสาธิตเชิงปฏิบัติในเรื่องนี้ คำแนะนำต่อไปนี้จะกล่าวถึงในบทความนี้

• แบบอักษรใน CSS
• แอตทริบิวต์ในแบบอักษร CSS
• แอตทริบิวต์แบบอักษร
• font-weight แอตทริบิวต์
• แอตทริบิวต์ขนาดตัวอักษร
• font-family แอตทริบิวต์

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

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

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

สำหรับบทช่วยสอน CSS ที่ครอบคลุมโปรดไปที่ Edureka CSS Tutorial For Beginners คุณจะได้รับความก้าวหน้าที่ยอดเยี่ยมเกี่ยวกับวิธีใช้ CSS เพื่อเพิ่มการออกแบบเว็บ HTML

ไปต่อกับบทความนี้เกี่ยวกับ Fonts ใน CSS

แบบอักษรใน CSS

แบบอักษรเป็นชุดของลักษณะเฉพาะที่เกี่ยวข้องกับการแสดงข้อความ แบบอักษรมีความแตกต่างกันตามขนาดการเยื้องความกว้างการเอียงและอื่น ๆ เริ่มต้นด้วยการแสดงข้อความพื้นฐานในแบบอักษรต่างๆ

ตัวอย่างที่ 1: หัวเรื่องและย่อหน้าในแบบอักษรต่างๆ

เนื้อความ {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
ย่อหน้าในแบบอักษรจอร์เจียตัวเอียงตัวหนา
 

 ตัวอย่างที่ 1: เอาต์พุต 

ในตัวอย่างที่ 1 เรามีข้อความ 3 บรรทัดในแบบอักษรที่แตกต่างกัน คุณจะสังเกตเห็นว่าแบบอักษรแต่ละแบบแตกต่างกันไปตามความกว้างของอักขระการเยื้อง ฯลฯ

ไปต่อกับบทความนี้เกี่ยวกับ Fonts ใน CSS

แอตทริบิวต์ในแบบอักษร CSS

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

วิธีใช้ trim ใน java

ในตัวอย่างที่ 1 เราได้ใช้ชื่อแบบอักษรที่แตกต่างกันสำหรับส่วนหัวและย่อหน้า ภายใต้แท็ก h1 และ p เราจะเห็นชื่อฟอนต์สองชื่อในขณะที่แท็ก h2 ตั้งชื่อฟอนต์เพียงตัวเดียว นี่คือคำจำกัดความของตระกูลฟอนต์เพิ่มเติมเกี่ยวกับเรื่องนี้ในภายหลัง

ไปต่อกับบทความนี้เกี่ยวกับ Fonts ใน CSS

คุณลักษณะแบบอักษร:

คุณสามารถตั้งค่ารูปแบบหลักได้ 2 แบบคือ 'ปกติ' และ 'ตัวเอียง' ตัวเอียงควรจะเล่นหางตามธรรมชาติด้วยการเอียง Normal เป็นตัวเลือกเริ่มต้นซึ่งตรง มีตัวเลือกที่ใช้น้อยอีกตัวหนึ่งเรียกว่า 'เฉียง' ซึ่งคล้ายกับตัวเลือกตัวเอียงในแบบอักษรส่วนใหญ่ คุณยังสามารถตั้งค่าสไตล์เป็น 'สืบทอด' เพื่อให้ใช้สไตล์แบบอักษรจากองค์ประกอบหลัก

ไปต่อกับบทความนี้เกี่ยวกับ Fonts ใน CSS

แอตทริบิวต์น้ำหนักตัวอักษร:

แอตทริบิวต์นี้จะตัดสินว่าแบบอักษรควรมีลักษณะหนาหรือบาง สามารถตั้งค่าเป็น 'ปกติ' หรือ 'ตัวหนา' ค่าดีฟอลต์เป็นค่าปกติ ค่านี้สามารถตั้งเป็นตัวเลขได้ น้ำหนัก 400 หมายถึงปกติและ 700 สำหรับตัวหนา มีการตั้งค่าอื่น ๆ อีกเล็กน้อย (ตั้งแต่ 100 - เบามากถึง 900 - หนามาก) แต่แบบอักษรทั้งหมดไม่รองรับ ตัวเลือกน้ำหนักทั้งหมดแสดงอยู่ในตัวอย่างที่ 3

ไปต่อกับบทความนี้เกี่ยวกับ Fonts ใน CSS

แอตทริบิวต์ขนาดตัวอักษร:

แอตทริบิวต์ขนาดสามารถตั้งค่าได้หลายวิธี มาดูวิธีการเหล่านี้ด้านล่าง
●ค่าที่แจกแจงเช่น 'medium', 'large' ในความเป็นจริงเช่นเดียวกับขนาดของเสื้อผ้าค่าต่างๆมีตั้งแต่ XX Small ไปจนถึง XX Large!
●ตั้งค่าที่สัมพันธ์กับองค์ประกอบหลักเป็น 'ใหญ่กว่า' หรือ 'เล็กกว่า'
●เปอร์เซ็นต์ของขนาดองค์ประกอบหลัก
●ตั้งค่าเป็น 'สืบทอด' เพื่อใช้ขนาดขององค์ประกอบหลักโดยตรง
●เป็นค่าสัมบูรณ์ในหน่วยพิกเซล (พิกเซล), pt (จุด) หรือซม. (เซนติเมตร)
'Medium' คือค่าเริ่มต้นที่กำหนดไว้สำหรับพารามิเตอร์นี้

ไปต่อกับบทความนี้เกี่ยวกับ Fonts ใน CSS

font-family แอตทริบิวต์:

ใน HTML ตระกูลฟอนต์ CSS มีไว้สำหรับตั้งชื่อฟอนต์ คุณสามารถใส่ชื่อแบบอักษรเดียวพร้อมกับแท็ก หรือคุณสามารถกำหนดค่าหลายค่าเป็นรายการตระกูลแบบอักษรที่กำหนดลำดับความสำคัญที่เบราว์เซอร์ควรเลือกแบบอักษร
รายการจะถูกจัดลำดับความสำคัญจากซ้ายไปขวาในรูปแบบของระบบถอยกลับ ค่าแรกหากมีให้เลือกหรือตัวควบคุมจะไปที่ค่าถัดไปจนกว่าจะถึงจุดสิ้นสุดของรายการ ตระกูลฟอนต์เริ่มต้นถูกกำหนดโดยค่ากำหนดของเบราว์เซอร์
ตระกูลฟอนต์ CSS มี 2 ประเภทคือตระกูลทั่วไปและตระกูลฟอนต์
●ตระกูลทั่วไป - ตามลักษณะทั่วไปบางแบบฟอนต์จะถูกจัดกลุ่มเป็น 'serif', 'sans serif', 'monospace' เป็นต้นตัวอย่างเช่น Sans serif หมายถึงแบบอักษรที่ไม่มีรูปแบบ serif
●ชื่อครอบครัว - แบบอักษรที่อยู่ในลำดับชั้นของครอบครัวที่เฉพาะเจาะจง Times, Arial, Courier เป็นตระกูลฟอนต์ทั้งหมดและ Times New Roman เป็นฟอนต์ตัวอย่างของตระกูล Times
ตัวเลือกการใช้ตระกูลฟอนต์ต่างๆแสดงอยู่ในตัวอย่างที่ 4 ด้านล่าง

หมายเลข fibonacci c ++

ประเด็นทั่วไปที่ควรทราบ

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

หวังว่าคุณจะพบข้อมูลที่คุณต้องการใน Fonts In CSS แบ่งปันประสบการณ์ของคุณกับเราในส่วนความคิดเห็นด้านล่าง มีความสุขในการออกแบบ!

หากคุณสนใจเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บโปรดดูที่ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)