พร็อพเพอร์ตี้ CSS initial-letter จะช่วยให้คุณทําสิ่งต่างๆ ได้ง่ายขึ้นมาก
การสนับสนุนเบราว์เซอร์
คุณลองใช้ initial-letter ได้ที่ใด ซึ่งพร้อมใช้งานใน Safari และ Chrome 110 ใน Safari พร็อพเพอร์ตี้ต้องมีคำนำหน้า -webkit- ยังมีปัญหาที่รอแก้ไขอยู่สำหรับการใช้งานใน Firefox
ทดสอบการรองรับ initial-letter ด้วย
@supports (initial-letter: 1 1) { /* Your supported styles */ }
โซลูชันปัจจุบัน
คุณอาจกำหนดสไตล์ตัวแรกแบบตัวพิมพ์ใหญ่ใน CSS อย่างไร
องค์ประกอบจำลอง ::first-letter ช่วยแก้ปัญหาได้บางส่วน
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
แต่คุณอาจต้องใช้พร็อพเพอร์ตี้อย่าง "float" ขณะคำนวณขนาดของตัวอักษรแรก
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
การใช้หน่วย CSS ใหม่อย่าง lh อาจช่วยบรรเทาปัญหานี้ได้บ้าง แต่การดําเนินการเหล่านี้ก็มีการรองรับแบบจํากัดเช่นกัน (ปัจจุบัน lh ใช้ได้เฉพาะใน Chrome)
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
ขอแนะนำ initial-letter
พร็อพเพอร์ตี้ initial-letter ช่วยให้คุณควบคุมการจัดรูปแบบตัวพิมพ์แรกแบบตัวห้อยนี้ได้ละเอียดยิ่งขึ้น โดยจะมีค่า 2 ค่าที่คั่นด้วยเว้นวรรค ดังนี้
p::first-letter {
initial-letter: 3.5 3;
}
- อาร์กิวเมนต์แรกจะกำหนดขนาดของตัวอักษรและจำนวนบรรทัดที่จะใช้ โดยระบบจะปรับขนาดตัวอักษรให้ใหญ่ขึ้นโดยคงสัดส่วนภาพไว้ คุณใช้ค่าติดลบไม่ได้ แต่จะใช้ค่าทศนิยมได้
- อาร์กิวเมนต์ที่ 2 จะกำหนดอ่างรับตัวอักษร ซึ่งอาจถือว่าเป็นออฟเซตของตําแหน่งที่ตัวอักษรจะแสดง ค่าที่ 2 ไม่บังคับและต้องเป็นค่าบวก หากไม่มีค่านี้ ระบบจะถือว่าค่าสำหรับขนาดตัวอักษรเป็นจำนวนเต็มต่ำสุดที่ใกล้ที่สุด ซึ่งเทียบเท่ากับการใช้คีย์เวิร์ด "drop" นอกจากนี้ Sink ยังยอมรับค่าคีย์เวิร์ดอื่นอย่าง "raise" ซึ่งเทียบเท่ากับ Sink 1 ด้วย
ดูการสาธิตนี้ซึ่งคุณสามารถเปลี่ยนค่าเพื่อดูว่าค่าดังกล่าวส่งผลต่อการจัดรูปแบบอักษรตัวแรกอย่างไร
เมื่อรวมกับ ::first-line คุณจะได้ผลลัพธ์ประมาณนี้
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
หรือให้ border โปรดดูตัวอย่างต่อไปนี้ที่ใช้คีย์เวิร์ด "drop" ซึ่งจะเป็นค่าเริ่มต้นหากละไว้และมีค่าเท่ากับ 3
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
เพิ่ม background หรือ box-shadow บางส่วน เช่น
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
หรือตัดพื้นหลังให้อยู่ภายในข้อความ
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
คุณมีทางเลือกมากมาย
เพียงเท่านี้คุณก็ควบคุมการจัดรูปแบบอักษรตัวแรกแบบตัวพิมพ์ใหญ่ขึ้นได้ดียิ่งขึ้นด้วย initial-letter คุณต้องการเพิ่มตัวพิมพ์ใหญ่ขึ้นต้นย่อลงในแบบอักษรไหม คุณอาจแต่งตัวอย่างไร โปรดแจ้งให้เราทราบ