ستسهّل عليك السمة initial-letter في خدمة مقارنة الأسعار (CSS) هذه العملية بشكل كبير.
المتصفحات المتوافقة
أين يمكنك تجربة "initial-letter"؟ وتتوفّر هذه الميزة في متصفّح Safari ومن الإصدار 110 من Chrome. في متصفّح 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;
}
ولكنك بعد ذلك ستحتاج على الأرجح إلى الوصول إلى خصائص مثل "عائم" أثناء حساب الحجم لذلك الحرف الأول.
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 التحكّم بشكل أدق في نمط الحد الأقصى للانخفاض في السعر. يتطلب الأمر قيمتين مفصولتين بمسافات:
p::first-letter {
initial-letter: 3.5 3;
}
- تحدد الوسيطة الأولى حجم الحرف وعدد الأسطر التي ستشغلها. سيتم تكبير حجم الحرف مع الحفاظ على نسبة العرض إلى الارتفاع. لا يمكنك استخدام قيمة سالبة، ولكن يمكنك استخدام قيم أعداد عشرية.
- تحدد الوسيطة الثانية مصدر الحرف. يمكن اعتبار هذا إزاحة لمكان وجود الحرف. القيمة الثانية اختيارية ولا يمكن أن تكون سالبة. وإذا لم تتوفر هذه القيمة، تفترض قيمة حجم الحرف الذي أقرب إلى أقرب عدد صحيح. يعادل ذلك استخدام الكلمة الرئيسية "انخفاض"، ويقبل الأحواض أيضًا قيمة أخرى للكلمة الرئيسية، وهي "رفع" تساوي 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;
}
لديك الكثير من الاحتمالات!
بهذه الطريقة، يمكنك التحكّم بشكل أفضل في نمط الكتابة بالأحرف اللاتينية الكبيرة باستخدام "initial-letter". هل تريد إضافة أحرف كبيرة إلى أسلوب الخط؟ كيف يمكنك تنسيقها؟ يُرجى إعلامنا.