พร็อพเพอร์ตี้ CSS initial-letter จะทำให้สิ่งต่างๆ ง่ายขึ้นมาก
การสนับสนุนเบราว์เซอร์
คุณลองใช้ initial-letter ได้ที่ไหน โดยพร้อมใช้งานใน Safari และจาก Chrome 110 พร็อพเพอร์ตี้ต้องมีคำนำหน้า -webkit- ใน Safari มีปัญหาที่ยังไม่ได้รับการแก้ไขเพื่อให้ดำเนินการใน 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;
}
แต่คุณต้องเข้าถึงพร็อพเพอร์ตี้ เช่น "ทศนิยม" ขณะคำนวณขนาดสำหรับตัวอักษรแรกนั้น
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 ช่วยให้คุณควบคุมการจัดรูปแบบของขีดจำกัดได้ละเอียดยิ่งขึ้น ใช้เว้นวรรค 2 ค่าแยกกัน ดังนี้
p::first-letter {
initial-letter: 3.5 3;
}
- อาร์กิวเมนต์แรกจะกำหนดขนาดของตัวอักษรและจำนวนบรรทัดที่จะใช้ในตัวอักษร ตัวอักษรจะใหญ่ขึ้นโดยที่ยังรักษาสัดส่วนภาพไว้ คุณใช้ค่าลบไม่ได้ แต่ใช้ค่าทศนิยมได้
- อาร์กิวเมนต์ที่ 2 กำหนดซิงก์ตัวอักษร ซึ่งอาจถือเป็นการชดเชยตำแหน่งสำหรับตัวอักษร ค่าที่ 2 เป็นค่าที่ไม่บังคับและต้องไม่เป็นค่าลบ หากไม่ได้ระบุ จะถือว่าค่าของขนาดตัวอักษรพื้นเป็นจำนวนเต็มที่ใกล้ที่สุด ซึ่งเทียบเท่ากับการใช้คีย์เวิร์ด "ลดลง" ซิงก์ยังยอมรับค่าคีย์เวิร์ดอีกค่าหนึ่ง "ยกระดับ" ซึ่งเทียบเท่ากับซิงก์ที่มีค่าเป็น 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 ก็ได้ โปรดสังเกตวิธีที่ตัวอย่างต่อไปนี้ใช้คีย์เวิร์ด "ลดลง" ซึ่งจะเป็นค่าเริ่มต้นหากละไว้และเท่ากับ 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;
}
คุณทำได้มากมาย
เพียงเท่านี้ คุณก็จะควบคุมการจัดรูปแบบของ Drop Cap ได้ละเอียดยิ่งขึ้นด้วย initial-letter คุณจะเพิ่มตัวพิมพ์ใหญ่ในการพิมพ์ไหม คุณจะจัดสไตล์อย่างไร โปรดแจ้งให้เราทราบ