ใน html ขนาดตัวอักษรมีบทบาทสำคัญ ช่วยให้คุณสามารถดึงดูดความสนใจของผู้ใช้ไปยังข้อมูลสำคัญที่โพสต์บนหน้าเว็บไซต์ แม้ว่าไม่เพียงแต่ขนาดของตัวอักษรจะมีความสำคัญ แต่ยังรวมถึงสี ความหนา และแม้กระทั่งตระกูลด้วย
แท็กและคุณลักษณะเมื่อทำงานกับแบบอักษร html
ภาษาไฮเปอร์เท็กซ์มีเครื่องมือมากมายสำหรับการทำงานกับแบบอักษร ท้ายที่สุดแล้ว การจัดรูปแบบข้อความเป็นงานหลักของ html
เหตุผลในการสร้างภาษา HTML คือปัญหาในการแสดงกฎการจัดรูปแบบข้อความในเบราว์เซอร์
มาดูแท็กที่ใช้ในการทำงานกับแบบอักษรใน HTML และคุณลักษณะต่างๆ หลักคือแท็ก - ด้วยการใช้ค่าของคุณลักษณะคุณสามารถตั้งค่าลักษณะแบบอักษรได้หลายประการ:
- สี – กำหนดสีข้อความ
- ขนาด – ขนาดตัวอักษรในหน่วยทั่วไป
รองรับค่าแอตทริบิวต์ที่เป็นบวกตั้งแต่ 1 ถึง 7
- face – ใช้เพื่อตั้งค่าตระกูลแบบอักษรข้อความที่จะใช้ภายในแท็ก - รองรับหลายค่าโดยคั่นด้วยเครื่องหมายจุลภาค
เฉพาะข้อความที่อยู่ระหว่างส่วนต่างๆ ของแท็กแบบอักษรที่จับคู่เท่านั้นที่จะได้รับการจัดรูปแบบข้อความที่เหลือจะแสดงเป็นแบบอักษรเริ่มต้นมาตรฐาน
นอกจากนี้ใน html ยังมีแท็กที่จับคู่จำนวนหนึ่งซึ่งระบุกฎการจัดรูปแบบเพียงกฎเดียวเท่านั้น ซึ่งรวมถึง:
- — ตั้งค่าแบบอักษรตัวหนาใน html แท็ก คล้ายกับการกระทำก่อนหน้านี้
- — ขนาดใหญ่กว่าค่าเริ่มต้น
- - ขนาดตัวอักษรเล็กลง
- — ข้อความตัวเอียง (ตัวเอียง) แท็กที่คล้ายกัน ;
- — ข้อความที่มีการขีดเส้นใต้;
- ขีดฆ่า;- — แสดงข้อความเฉพาะตัวพิมพ์เล็กเท่านั้น
- - เป็นตัวพิมพ์ใหญ่
ข้อความธรรมดา
ข้อความตัวหนา
ข้อความตัวหนา
มากกว่าปกติ
น้อยกว่าปกติ
ตัวเอียง
ตัวเอียง
พร้อมขีดเส้นใต้
ขีดฆ่าออก
ความสามารถของแอตทริบิวต์สไตล์
นอกจากแท็กที่อธิบายแล้ว ยังมีอีกหลายวิธีในการเปลี่ยนแบบอักษรใน html หนึ่งในนั้นคือการใช้แอตทริบิวต์สไตล์ทั่วไป ด้วยการใช้ค่าของคุณสมบัติคุณสามารถกำหนดรูปแบบการแสดงผลของแบบอักษรได้:
1) ตระกูลฟอนต์ - คุณสมบัติตั้งค่าตระกูลฟอนต์ สามารถแสดงค่าได้หลายค่า
การเปลี่ยนแบบอักษรใน html เป็นค่าถัดไปจะเกิดขึ้นหากไม่ได้ติดตั้งตระกูลก่อนหน้าในระบบปฏิบัติการของผู้ใช้.
ไวยากรณ์การเขียน:
ตระกูลฟอนต์: ชื่อฟอนต์ [, ชื่อฟอนต์[, ...]]
2) ขนาดตัวอักษร – ขนาดตั้งไว้ตั้งแต่ 1 ถึง 7 นี่เป็นหนึ่งในวิธีหลักที่คุณสามารถเพิ่มแบบอักษรใน HTML
การเขียนไวยากรณ์:
ขนาดตัวอักษร: ขนาดสัมบูรณ์ | ขนาดสัมพัทธ์ | ความหมาย | ดอกเบี้ย | สืบทอด
คุณยังสามารถกำหนดขนาดตัวอักษรได้:
- เป็นพิกเซล
- ในแง่สัมบูรณ์ ( xx-เล็ก, x-เล็ก, เล็ก, กลาง, ใหญ่);
- เป็นเปอร์เซ็นต์;
- ในจุด (pt)
ขนาดตัวอักษร:7
ขนาดตัวอักษร:24px
ขนาดตัวอักษร: x-large
ขนาดตัวอักษร: 200%
ขนาดตัวอักษร:24pt
3) Font-style – กำหนดสไตล์การเขียนฟอนต์ ไวยากรณ์:
รูปแบบตัวอักษร: ปกติ | ตัวเอียง | เอียง | สืบทอด
ค่า:
- ปกติ – การสะกดปกติ
- ตัวเอียง – ตัวเอียง;
- เฉียง – แบบอักษรเอียงไปทางขวา;
- inherit – สืบทอดการสะกดขององค์ประกอบหลัก
ตัวอย่างวิธีการเปลี่ยนแบบอักษรใน html โดยใช้คุณสมบัตินี้:
รูปแบบตัวอักษร:สืบทอด
รูปแบบตัวอักษร: ตัวเอียง
รูปแบบตัวอักษร: ปกติ
รูปแบบตัวอักษร:เฉียง
4) font-variant – แปลงตัวพิมพ์ใหญ่ทั้งหมดให้เป็นตัวพิมพ์ใหญ่ ไวยากรณ์:
แบบอักษร: ปกติ | ตัวพิมพ์เล็ก | สืบทอด
ตัวอย่างวิธีการเปลี่ยนแบบอักษรใน html ด้วยคุณสมบัตินี้:
ตัวแปรแบบอักษร: สืบทอด
แบบอักษร: ปกติ
แบบอักษร: ตัวพิมพ์เล็ก
5) น้ำหนักแบบอักษร - ให้คุณกำหนดความหนาของข้อความ (ความอิ่มตัว) ไวยากรณ์:
น้ำหนักแบบอักษร: ตัวหนา|โดดเด่นยิ่งขึ้น|เบากว่า|ปกติ|100|200|300|400|500|600|700|800|900
ค่า:
- ตัวหนา – ตั้งค่าแบบอักษร html เป็นตัวหนา
- โดดเด่นยิ่งขึ้น – โดดเด่นยิ่งขึ้นเมื่อเทียบกับปกติ
- เบากว่า – อิ่มตัวน้อยกว่าเมื่อเทียบกับปกติ
- ปกติ – การสะกดปกติ
- 100-900 – ตั้งค่าความหนาของแบบอักษรให้เทียบเท่ากับตัวเลข
แบบอักษรน้ำหนัก: ตัวหนา
แบบอักษรน้ำหนัก: โดดเด่นยิ่งขึ้น
ตัวอักษรน้ำหนัก:ไฟแช็ก
แบบอักษรน้ำหนัก:ปกติ
น้ำหนักตัวอักษร:900
น้ำหนักตัวอักษร:100
คุณสมบัติฟอนต์ html และสีฟอนต์
Font เป็นอีกหนึ่งคุณสมบัติของคอนเทนเนอร์ ภายในตัวมันเองนั้นได้รวมค่าของคุณสมบัติหลายอย่างที่มีไว้เพื่อเปลี่ยนแบบอักษร ไวยากรณ์แบบอักษร:
แบบอักษร: ตระกูลแบบอักษรขนาดตัวอักษร | สืบทอด
ค่ายังสามารถตั้งค่าเป็นแบบอักษรที่ระบบใช้ในป้ายกำกับบนตัวควบคุมต่างๆ:
- คำบรรยาย – สำหรับปุ่ม;
- ไอคอน – สำหรับไอคอน
- เมนู - เมนู;
- กล่องข้อความ – สำหรับกล่องโต้ตอบ
- คำบรรยายภาพขนาดเล็ก – สำหรับการควบคุมขนาดเล็ก
- แถบสถานะ - แบบอักษรของแถบสถานะ
แบบอักษร:ไอคอน
แบบอักษร:คำบรรยายภาพ
แบบอักษร:เมนู
แบบอักษร: กล่องข้อความ
คำบรรยายภาพขนาดเล็ก
แบบอักษร:แถบสถานะ
แบบอักษร:ตัวเอียง 50px ตัวหนา "Times New Roman", Times, serif
หากต้องการเปลี่ยนแบบอักษรให้ใช้แท็ก ด้วยแอตทริบิวต์ FACE คุณสามารถระบุแบบอักษรตามชื่อ (Arial, Tahoma, Verdana) หรือประเภท (เช่น monospace) ขอแนะนำให้ระบุชื่อแบบอักษรหลาย ๆ ชื่อเพื่อหลีกเลี่ยงสถานการณ์ที่ปรากฎว่าผู้ใช้ไม่ได้ติดตั้งแบบอักษรที่จำเป็น ฉันแนะนำให้ใช้แบบอักษรที่ยอมรับโดยทั่วไปอย่างน้อยหนึ่งแบบ (เช่น Arial) ฉันไม่แนะนำให้ใช้แบบอักษรมากกว่า 2-3 แบบในหน้าเดียว ไม่เช่นนั้นหน้าจะดูงุ่มง่ามและไม่เป็นมืออาชีพ
ตัวอย่าง:
การเปลี่ยนขนาดตัวอักษรของหน้า html
หากต้องการเปลี่ยนขนาดตัวอักษร ให้ใช้แอตทริบิวต์ SIZE ยิ่งแบบอักษรมีขนาดใหญ่เท่าใด ข้อความก็จะอ่านได้ง่ายขึ้นเท่านั้น อย่างไรก็ตาม แบบอักษรขนาดเล็กช่วยให้คุณใส่ข้อมูลได้มากขึ้นภายในหน้าจอ การใช้แอตทริบิวต์นี้กับแท็ก
คุณสามารถเปลี่ยนแบบอักษรโดยใช้แท็ก และ . ขยายแบบอักษรของส่วนที่ระบุให้สัมพันธ์กับข้อความก่อนหน้า และ จึงลดตามไปด้วย
ด้วยการเปลี่ยนขนาดของตัวอักษรแต่ละตัว คุณจะได้เอฟเฟกต์ที่น่าสนใจ ตัวอย่างเช่น วิธีนี้จะทำให้คุณได้ drop cap ซึ่งเป็นตัวพิมพ์ใหญ่ขนาดใหญ่ที่ตอนต้นของย่อหน้า
ตัวอย่าง:
การเลือกสีตัวอักษรของหน้า html
การแสดงข้อความบางส่วนของเว็บเพจด้วยแบบอักษรสีต่างๆ จะทำให้ดูน่าสนใจยิ่งขึ้น
การใช้แอตทริบิวต์ TEXT ในบริบทของแท็ก
คุณสามารถเปลี่ยนสีข้อความทั้งหมดของหน้าเว็บได้ การใช้แอตทริบิวต์ COLOR กับแท็ก (มีลำดับความสำคัญสูงกว่า) ช่วยให้คุณสามารถโต้ตอบกับลักษณะที่ปรากฏของข้อความชิ้นเดียวได้หากต้องการเปลี่ยนสีข้อความ คุณต้องทราบชื่อสีหรือรหัสเลขฐานสิบหก รหัสประกอบด้วยสัญลักษณ์ปอนด์ # และตัวเลขที่แสดงถึงความเข้มขององค์ประกอบสีแดง เขียว และน้ำเงิน สามารถเรียกชื่อสีมาตรฐานได้เพียง 16 สีเท่านั้น
ชื่อสี รหัส aqua ##00FFFF สีดำ ##000000 สีฟ้า ##0000FF fuchsia ##FF00FF สีเทา ##808080 สีเขียว ##008000 มะนาว ##00FF00 maroon ##800000 สีกรมท่า ##000080 สีมะกอก ##808000 สีม่วง ##800080 สีแดง # #FF0000สีเงิน ##C0C0C0นกเป็ดน้ำ ##008080สีขาว ##FFFFFFสีเหลือง ##FFFF00
ในบทช่วยสอนนี้ เราจะดูที่แอตทริบิวต์แท็กสุดท้าย ซึ่งกำหนดสีของข้อความ ตามค่าเริ่มต้น ข้อความจะเป็นสีดำซึ่งแสดงบนพื้นหลังสีขาว เพื่อ เปลี่ยนสีข้อความใน htmlคุณต้องใช้แอตทริบิวต์สีของแท็ก :
หากต้องการตั้งค่าสี เพียงระบุชื่อ เช่น แดง เขียว น้ำเงิน ลองดูตัวอย่างเล็กๆ น้อยๆ:
ข้อความสีเขียว
ข้อความสีแดง
ข้อความสีม่วง
มาดูผลลัพธ์ในเบราว์เซอร์กัน:
ข้อความในย่อหน้าแรกเปลี่ยนเป็นสีเขียว ย่อหน้าที่สองเปลี่ยนเป็นสีแดง และย่อหน้าที่สามเปลี่ยนเป็นสีม่วง โดยรวมแล้วมีชื่อสีหลัก 16 ชื่อและชื่อสีเพิ่มเติม 130 ชื่อ คุณสามารถดูรายการสีทั้งหมดได้ในตารางสี html
วิธีการระบุสีนี้เรียบง่ายแต่มีข้อจำกัดมาก ดังนั้น ในการเปลี่ยนสีในโค้ด HTML พวกเขามักจะใช้เลขฐานสิบหกที่นำหน้าด้วยเครื่องหมายแฮช (#) เช่น:
เมื่อใช้การกำหนดนี้ คุณจะได้สีและเฉดสีมากกว่า 16 ล้านสี! คุณสามารถรับรหัสสีได้โดยใช้ตัวแปลงสี HEX ซึ่งมีอยู่บนไซต์ หรือใช้จานสีใน Photoshop ลองดูตัวอย่างและเขียนโค้ดต่อไปนี้:
ข้อความสีเขียว
ข้อความสีแดง
ข้อความสีม่วง
มาบันทึกไฟล์และดูผลลัพธ์:
อย่างที่คุณเห็น เราให้สีข้อความเหมือนกับตัวอย่างแรก เฉพาะที่นี่เท่านั้นที่เราใช้ระบบเลขฐานสิบหก หรืออีกนัยหนึ่ง เราตั้งค่าสีในรูปแบบ HEX
ตอนนี้คุณได้เรียนรู้วิธีเปลี่ยนสีข้อความใน html แล้ว และในตอนท้ายของบทเรียน ฉันขอแนะนำให้ทำซ้ำแอตทริบิวต์ของแท็กทั้งหมด และตั้งค่าพารามิเตอร์ต่างๆ ให้กับข้อความพร้อมกัน ได้แก่ แบบอักษร ขนาด และสี เขียนตัวอย่าง:
ตั้งค่าแบบอักษร ขนาด และสีของข้อความ
ตั้งค่าแบบอักษร ขนาด และสีของข้อความ
สวัสดีผู้อ่านบทความนี้และสมาชิกบล็อกของฉันทุกคน! ฉันต้องการอุทิศสิ่งพิมพ์ของวันนี้ในหัวข้อโดยไม่รู้ว่าทรัพยากรอินเทอร์เน็ตของคุณจะไม่สามารถอ่านได้และน่าสนใจ: "วิธีตั้งค่าแบบอักษรใน HTML" หัวข้อนี้เป็นเรื่องง่ายและฉันแน่ใจว่าคุณจะเชี่ยวชาญได้อย่างรวดเร็ว
อย่างไรก็ตาม เราไม่ควรลืมว่าภาษาเว็บนั้นเต็มไปด้วยเครื่องมือออกแบบฟอนต์ทุกประเภท ซึ่งตามหลักการแล้วคุณจำเป็นต้องรู้ หลังจากอ่านบทความนี้แล้ว คุณจะเชี่ยวชาญการจัดรูปแบบข้อความอย่างมั่นใจ เรียนรู้วิธีกำหนดสไตล์ ประเภทแบบอักษรและการตกแต่ง รวมถึงเปลี่ยนขนาดและสีของทั้งประโยคและตัวอักษรแต่ละตัว มาเริ่มกันเลย!
แบบอักษรจะแตกต่างกัน
ป้าย สื่อสิ่งพิมพ์ เว็บไซต์ และบริการอื่นๆ ส่วนใหญ่ใช้แบบอักษรมาตรฐาน แม้ว่าพวกเขาจะสบาย แต่ก็น่าเบื่อมานานแล้วและไม่ดึงดูดสายตา นั่นคือเหตุผลที่นักออกแบบหลายคนเปลี่ยนประเภทการออกแบบเล็กน้อยหรือสร้างสไตล์ใหม่ทั้งหมด แบบอักษรที่มีชื่อเสียงและมีอิทธิพลที่สุดคือ:
- เฮลเวติกา;
- ฟิวทูรา;
- การามอนด์;
- โบโดนี;
- เบมโบ;
- ร็อคเวลล์;
- ไทม์ส นิวโรมัน.
ความแตกต่างหลักของพวกเขาอยู่ที่ความสัมพันธ์กับบางครอบครัว มีตระกูลเซอริฟ (เซอริฟ), แซนเซอริฟ, ตกแต่ง, ตัวเอียง และตระกูลโมโนสเปซ
ฉันอยากจะย้ำด้วยว่าขนาดตัวอักษรมี 5 ขนาด
เริ่มจากภาษา html และ "ความสามารถในการสร้างสรรค์" กันก่อน
ชื่อ อันดับแรกส่วนหัว
ปซับด้วยตัวอักษรสีแดง!
ที่นี่ตั้งอยู่ อันดับแรกย่อหน้า ปัจจุบันตัวอย่าง. เพื่อความชัดเจน คำเหล่านี้จะถูกเขียนเป็นตัวเอียง
ฉันขอเตือนคุณว่าคุณลักษณะ จัดตำแหน่ง = "ศูนย์"กำหนดข้อความให้แสดงตรงกลาง
และตอนนี้ก็ถึงเวลาแล้วที่ CSS จะแสดงทักษะของมัน
แม้จะมีแท็กต่างๆ ทั้งชุดที่จัดทำโดย html แต่ css ก็เป็นเครื่องมือที่สะดวกและยืดหยุ่นกว่าสำหรับการออกแบบรูปลักษณ์ของแบบอักษร
คุณสมบัติหลักที่ใช้ในการจัดรูปแบบเนื้อหาคือ: แบบอักษรและส่วนประกอบ: การตกแต่งข้อความ.
มาดูกันก่อนครับ แบบอักษร- นี่คือพารามิเตอร์สากลซึ่งคุณสามารถตั้งค่าหลายค่าพร้อมกันได้ นอกจากนี้ พารามิเตอร์แต่ละตัวยังทำงานด้วยคีย์เวิร์ดของตัวเอง
| ชื่อคุณสมบัติ | คำหลัก |
| ตระกูลแบบอักษร | สามารถติดตั้งเป็นตระกูลฟอนต์มาตรฐานได้: · ไม่มีเซริฟ (ซานเซอริฟ) · โบราณ (เซอริฟ); ·ตกแต่ง (แฟนตาซี); · ตัวเอียง (ตัวเขียน); · พื้นที่เดียว (พื้นที่เดียว) สไตล์มาตรฐานที่มีอยู่ก็เช่นกัน (Arial, Calibri ฯลฯ) |
| ขนาดตัวอักษร | ในการตั้งค่าขนาดสัมบูรณ์ของสัญลักษณ์ จะใช้สัญลักษณ์ต่อไปนี้: xx-small, x-small, เล็ก, กลาง, ใหญ่, x-large, xx-large คุณยังสามารถระบุค่าที่ไม่ซ้ำได้ |
| น้ำหนักแบบอักษร | รับผิดชอบความอิ่มตัวของรูปแบบข้อความ การเปลี่ยนแปลงในช่วงหรือระบุโดยใช้คำว่าปกติ ตัวหนา จางลง หรือตัวหนาขึ้น |
| แบบอักษร-รูปแบบ | ระบุการแสดงตัวอักษรโดยใช้คีย์เวิร์ด: ตัวพิมพ์เล็ก, ปกติ หรือสืบทอด |
| รูปแบบตัวอักษร | ตั้งค่าแบบปกติ เฉียง ตัวเอียง หรือสืบทอดพาเรนต์ |
| ยืดแบบอักษร | ระบุความหนาแน่นของตัวอักษร สามารถระบุค่าต่อไปนี้: ย่อพิเศษ, ขยายพิเศษ, ย่อพิเศษ, ขยายพิเศษ, กึ่งย่อ, กึ่งขยาย, ปกติ, ขยาย, ย่อและสืบทอด |
คุณสมบัติ การตกแต่งข้อความช่วยตกแต่งข้อความด้วยองค์ประกอบเพิ่มเติม เช่น การขีดเส้นใต้ ( ขีดเส้นใต้) ขีดทับ ( เส้นผ่าน) โอเวอร์ไลน์ ( โอเวอร์ไลน์) และยังสืบทอดพารามิเตอร์ของพาเรนต์ ( สืบทอด) หรือยกเลิกการลงทะเบียนทั้งหมด ( ไม่มี).
ถึงเวลาสำหรับตัวอย่างที่สองแล้ว ฉันเอาโค้ดก่อนหน้ามาจัดสไตล์โดยใช้ css จึงได้แต่งชื่อเรื่องด้วยเงา (ใช้ทรัพย์ ข้อความ-เงา) และมีโครงร่างล้อมรอบ ( ชายแดน-สี- ในเวลาเดียวกัน ฉันก็ขยายคำให้ใหญ่ขึ้นอีกคำหนึ่ง ฉันต้องการใช้พารามิเตอร์ด้วย ความทึบเพื่อตั้งค่าความโปร่งใสของคำบรรยาย
ชื่อ อันดับแรกส่วนหัว
ซับโปร่งแสง!
ที่นี่ตั้งอยู่ อันดับแรกย่อหน้า ปัจจุบันตัวอย่าง. เพื่อความชัดเจน คำเหล่านี้จะถูกเขียนเป็นตัวเอียง
ขนาดตัวอักษรบนเว็บไซต์สามารถตั้งค่าได้โดยใช้ทั้ง HTML และ CSS ลองพิจารณาทั้งสองตัวเลือก
การกำหนดขนาดตัวอักษรโดยใช้ HTML
ขนาดตัวอักษรบนเพจสามารถกำหนดได้โดยใช้แท็ก แบบอักษร HTML. ในบทความเราได้ดูแท็กแล้ว แบบอักษรและคุณลักษณะของมัน คุณสมบัติอย่างหนึ่งของแท็กนี้คือ ขนาดซึ่งช่วยให้คุณกำหนดขนาดตัวอักษรได้ มันถูกใช้ดังนี้:
เครื่องมือสร้างเว็บไซต์ "นูเบ็กซ์"
ขนาดสามารถรับค่าได้ตั้งแต่ 1 ถึง 7 (ค่าเริ่มต้นคือ 3 ซึ่งสอดคล้องกับ 13.5 คะแนนสำหรับฟอนต์ Times New Roman) ตัวเลือกอื่นสำหรับการระบุแอตทริบิวต์คือ "+1" หรือ "-1" ซึ่งหมายความว่าขนาดจะเปลี่ยนไปสัมพันธ์กับฐานประมาณ 1 จุดมากหรือน้อยกว่าตามลำดับ
วิธีนี้ค่อนข้างใช้ง่ายและขาดไม่ได้ถ้าคุณต้องการเปลี่ยนขนาดตัวอักษรของข้อความชิ้นเล็กๆ มิฉะนั้น ขอแนะนำให้จัดรูปแบบข้อความโดยใช้ CSS
การกำหนดขนาดตัวอักษรโดยใช้ CSS
ใน CSS คุณสามารถเปลี่ยนขนาดตัวอักษรได้โดยใช้คุณสมบัติ ขนาดตัวอักษรซึ่งใช้ดังนี้:
ในตัวอย่างด้านล่าง ขนาดแบบอักษรจะกำหนดเป็นพิกเซล แต่มีวิธีอื่นในการกำหนดขนาด:
- ใหญ่เล็กกลาง- กำหนดขนาดสัมบูรณ์ (เล็ก, กลาง, ใหญ่) สามารถใช้ค่าขนาดเล็กพิเศษ (x-small, xx-small), ใหญ่พิเศษ (x-large, xx-large) ได้
- ใหญ่กว่าเล็กกว่า- ตั้งค่าขนาดสัมพัทธ์ (เล็กกว่าหรือใหญ่กว่าสัมพันธ์กับองค์ประกอบหลัก)
- 100% - มีการตั้งค่าขนาดสัมพัทธ์ (เป็นเปอร์เซ็นต์ที่สัมพันธ์กับพาเรนต์) ตัวอย่างเช่น: h1 ( font-size: 180%; ) ซึ่งหมายถึงขนาดของแท็ก H1จะเป็น 180% ของขนาดตัวอักษรพื้นฐาน
- ตัวเลือกอื่นๆ สำหรับการตั้งค่าขนาดสัมพัทธ์:
- 5ex- หมายความว่าขนาดจะมีความสูง 5 ตัวอักษร xจากแบบอักษรพื้นฐาน
- 14แต้ม- 14 คะแนน;
- 22px- 22 พิกเซล;
- 1vw- 1% ของความกว้างหน้าต่างเบราว์เซอร์
- 1vh- 1% ของความสูงของหน้าต่างเบราว์เซอร์
