الخط

ال حقل الخط هو شقيق حقل الطباعة ذو الغرض الواحد: منسدلة واحدة، قيمة واحدة، عائلة الخطوط. يختار المحررون من خطوط النظام وقائمة خطوط Google، وتتلقى الأداة الخاصة بك اسم العائلة كسلسلة عادية. داخل الإضافات الرئيسية منشئ القطعةوهذا يجعله خيارًا خفيف الوزن عندما تحتاج الأداة فقط إلى تغيير الخط الذي يستخدمه العنصر، ولا شيء غير ذلك.

يدعم حقل الخط شروط، مفيد للكشف عنه فقط عند تشغيل تبديل “custom typography، ويتم طباعة قيمته من خلال محرك قالب بناء جملة الغصين في CSS الخاص بك. يغطي كلا الدليلين الإعداد والقيود.

على عكس مجال الطباعة، الذي يعمل من خلال محدد ولا يحتوي على رمز مميز للقالب، فإن حقل الخط هو حقل رمز مميز. تكتب font-family تحكم بنفسك في لوحة CSS واطبع قيمة الحقل فيها. هذا الاختلاف هو الذي يحدد أي من الحقلين يحتاجه عنصر واجهة مستخدم معين.

ما يفعله حقل الخط #

• يعرض القائمة المنسدلة لعائلة الخطوط في لوحة Elementor الخاصة بأداة واجهة المستخدم، ويدرج خطوط النظام وخطوط Google.
• يخزن العائلة المختارة كسلسلة عادية، على سبيل المثال Lora أو Georgia.
• يطبع تلك السلسلة من خلال {{ your_field_name }}، عادة داخل أ font-family القاعدة في لوحة CSS.
• يتحكم في خاصية واحدة بالضبط. يبقى الحجم والوزن والتباعد والباقي في ورقة الأنماط الخاصة بك أو في عناصر تحكم منفصلة.
• يأخذ اسم عائلة افتراضيًا بحيث تأتي الأداة بخط متعمد.

لم تقم ببناء القطعة بعد؟ ال نظرة عامة على منشئ القطعة هو المكان المناسب للبدء قبل المستندات على المستوى الميداني.

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ انظر دليل التثبيت.
• أداة مخصصة مفتوحة في محرر Widget Builder. مثالنا هو أداة سحب الاقتباس مع حقل خط مسمى quote_font يؤدي ذلك إلى تغيير محرف نص الاقتباس فقط.

كيفية إضافة حقل الخط #

اسحب الخط الحقل من لوحة الحقول إلى قسم أسفل أسلوب tab، موطنه الطبيعي، على الرغم من أن أي علامة تبويب تعمل. تفتح خياراته على اليسار بمجرد هبوطه.

شرح خيارات حقل الخط #

قائمة الخيارات قصيرة، وهي نقطة الحقل

• ملصق: النص الموضح بجوار القائمة المنسدلة في Elementor، على سبيل المثال “Quote Font”.
• اسم: المعرف الفريد الذي تشير إليه قوالبك. الحروف والأرقام والتسطير فقط، على سبيل المثال quote_font.
• الافتراضي: سلسلة اسم العائلة التي تبدأ بها الأداة، على سبيل المثال Georgia. اختر شيئًا يتم عرضه جيدًا قبل أن يلمس أي شخص عنصر التحكم.

قم بتوصيل حقل الخط في لوحة CSS الخاصة بك #

حقل الخط هو حقل رمز مميز، ولوحة CSS هي المكان الذي ينتمي إليه الرمز المميز الخاص به. طباعة القيمة داخل أ font-family تحكم واتبعها دائمًا بمكدس احتياطي:

/* CSS panel */
.pq-quote {
  font-family: {{ quote_font }}, Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
}

يتم عرض الرمز المميز على اسم العائلة المختار، وبالتالي تصبح القاعدة أعلاه font-family: Lora, Georgia, serif; عندما يختار المحرر لورا. يبقى الحجم وارتفاع الخط ملكك؛ يقوم عنصر التحكم بتبديل المحرف فقط.

يعمل الرمز المميز أيضًا في لوحة HTML، على سبيل المثال في حالة شرطية تقوم بتبديل فئة عندما تكون عائلة معينة نشطة، ولكن CSS هو الموطن العملي لها.

احترس: لا يؤدي اختيار خط Google في هذه القائمة المنسدلة إلى تحميل ملف الخط. على عكس عنصر التحكم في مجموعة الطباعة، لا يقوم حقل الخط بوضع خطوط Google في قائمة الانتظار تلقائيًا، لذلك يتم عرض خط الويب المختار كنسخة احتياطية له ما لم يقوم الموقع بتحميله بطريقة أخرى. إما أن يقوم عنصر واجهة المستخدم بتحميل الخط نفسه، أو يعمل حاقن لوحة JS صغير يُلحق رابط ورقة أنماط Google Fonts، أو يحد من التوقعات بمكدسات الخطوط الموجودة بالموقع بالفعل. هذه المكدس الاحتياطي بعد الرمز المميز ليس زخرفة اختيارية؛ هذا ما يراه الزوار عندما لا يتم تحميل العائلة.

يبدو اللودر البسيط في لوحة JS على النحو التالي

// JS panel
var fam = "{{ quote_font }}";
if (fam && !document.getElementById("pq-font")) {
  var l = document.createElement("link");
  l.id = "pq-font";
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" +
           encodeURIComponent(fam) + "&display=swap";
  document.head.appendChild(l);
}

دقة واحدة في هذا اللودر: getElementById مفاتيح الحماية على معرف ثابت، لذلك إذا ظهرت نفس الأداة مرتين على صفحة بها عائلتين مختلفتين، فسيتم تحميل خط المثيل الأول فقط. والثاني يتراجع بصمت. إذا كانت المثيلات المتعددة لكل صفحة عبارة عن سيناريو واقعي لعنصر واجهة المستخدم الخاص بك، فقم بإنشاء المعرف من اسم العائلة بدلاً من ذلك.

استخدم عنصر التحكم في الخط في Elementor #

أضف عنصر واجهة المستخدم المخصص الخاص بك إلى صفحة في Elementor، أو أعد تحميل المحرر إذا كانت الصفحة مفتوحة بالفعل. يظهر حقل الخط كنقطة منسدلة أسفل التسمية الخاصة بك؛ افتحه وستكون قائمة العائلة قابلة للبحث أثناء الكتابة.

اختر عائلة وتحديثات المعاينة. إذا قامت الأداة بتحميل الخط، فسيتم سحب المحرف الجديد بمجرد وصول الملف. وإلا فسيتم عرض العنصر في الجزء الاحتياطي من المكدس الخاص بك.

حالات الاستخدام الشائعة #

• الحاجيات الاقتباس والشهادة حيث يقوم نص الاقتباس فقط بتبديل الخط.
• العناوين الزخرفية في عناصر واجهة المستخدم الخاصة بالبطل والراية، مع ترك النص الأساسي دون تغيير.
• عناصر حرف واحد فقط، وغطاء منسدل، وملصق التي تحمل وجه عرض واحد.
• الأدوات التي تكشف عن اختيار علامة تجارية واحدة دون فتح لوحة طباعة كاملة للعملاء.
• تبديل الطبقة المشروطةمقارنة القيمة في لوحة HTML عندما تحتاج عائلة واحدة إلى قواعد إضافية لتباعد الأحرف.

نصائح للعمل مع حقل الخط #

• اكتب دائمًا مكدسًا احتياطيًا. font-family: {{ quote_font }}, Georgia, serif; يبقي عنصر واجهة المستخدم قابلاً للقراءة عندما لا يتم تحميل الخط المحدد.
• تذكر أنه لا يوجد قائمة انتظار تلقائية. تحتاج خطوط Google المختارة هنا إلى أداة تحميل في الأداة أو موقع يقوم بتحميلها بالفعل؛ هذه هي الحافة الحادة الوحيدة للحقل.
• الوصول إلى الطباعة عندما تحتاج إلى المزيد. الحجم والوزن والتباعد والقيم المستجيبة وتحميل الخط التلقائي كلها تنتمي إلى مجال الطباعة. الخط مخصص للحالة العائلية فقط.
• تعيين افتراضي حقيقي. تتفوق عائلة البداية الواضحة على وراثة كل ما يتوالى فيه الموضوع.
• احتفظ بالرمز المميز في CSS. تعد إحدى القواعد في لوحة CSS أسهل في الصيانة من سمات النمط المضمنة المنتشرة عبر HTML.
• لا تتوقع اختصار المحدد هنا. الأسلاك الطبيعية لهذا الحقل هي الرمز المميز الخاص بك font-family القاعدة، حيث يمكنك أيضًا التحكم في التراجعات.

الأسئلة المتداولة #

إلتحاق بالركب #

يقوم حقل خط Widget Builder بمهمة واحدة بسطح قليل جدًا: إسقاط عائلي في اللوحة، ورمز سلسلة في اللوحة الخاصة بك font-family القاعدة والتحكم الكامل في النسخ الاحتياطية المتبقية بين يديك. قم بتحميل الخط عندما تقدم عائلات Google، وترقى إلى مستوى مجال الطباعة عندما تحتاج الأداة إلى لوحة تصميم النص الكاملة. استكشف بقية عناصر واجهة المستخدم والإضافات الرئيسية، وانظر صفحة التسعير لما تتضمنه كل خطة.