[Css] كيفية إضافة ملفات خطوط متعددة لنفس الخط؟


Answers

اعتبارا من CSS3 ، تغيرت المواصفات ، مما يسمح font-style واحد فقط. سيتم التعامل مع قائمة مفصولة بفواصل (لكل CSS2) كما لو كانت normal وتجاوز أي إدخال سابق (افتراضي). سيؤدي هذا إلى جعل الخطوط المحددة بهذه الطريقة تظهر مائلة دائمًا.

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

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

Question

أنا أبحث في صفحة MDC عن قاعدة CSS @ font-face ، لكنني لا أحصل على شيء واحد. لدي ملفات منفصلة عن غامق ، مائل وبنط غامق + مائل . كيف يمكنني تضمين جميع الملفات الثلاثة في قاعدة @ font-face واحدة؟ على سبيل المثال ، إذا كان لدي:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

لن يعرف المتصفح الخط الذي يجب استخدامه بالخط العريض (لأن هذا الملف هو DejaVuSansBold.ttf) ، لذا فإنه سيكون افتراضيًا شيء لا أريده على الأرجح. كيف يمكنني إخبار المتصفح بجميع المتغيرات المختلفة لدي لخط معين؟




/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}



لجعل تنسيق الخطوط يعمل بشكل صحيح ، اضطررت إلى عكس ترتيب @ font-face في CSS.

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}