أحاول الحصول على كلمة واحدة بخط معين في مكون من سمة نستخدمها - هذا لأغراض هوية العلامة التجارية.
السمة المعنية (Sublime Theme) تحتوي على مكون discourse-search-banner.
لهذه السمة، أضفت المكون Blippo-font حيث قمت بتحميل ملف الخط blippo-black.woff2. لم أقم بأي تغييرات على css/html هنا.
تعرض اللوحة هنا $blippo-black: blippo-black.woff2
في مكون discourse-search-banner الخاص بـ Sublime Theme، قمت بعد ذلك بتعديل common css لتعريف الفئة blippo-black:
.ifutures {
font-family: 'blippo-black';
}
بعد ذلك، قمت بتعديل النص الخاص بـ search_banner.headline ضمن مكون discourse-search-banner:
<span style="font-family:Poppins, Arial">Welcome to</span> <span class="ifutures">ifutures</span>!</b>
عند تحميل الصفحة في المتصفح، لا يتم تطبيق الخط الجديد (blippo-black) على النص الموجود داخل وسم span الثاني، على الرغم من أن لوحة الفحص في نافذة المتصفح تظهر أن النص يحتوي على وسم span حوله:
<span class="ifutures">ifutures</span>
وأن css يتم التقاطه:
.ifutures {
font-family: "blippo-black";
}
ماذا أفعل بشكل خاطئ؟
شكرا لك!