كيفية إضافة ملفات خط متعددة لنفس الخط؟
https://stackoverflow.com/questions/2436749
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
أنا أبحث في صفحة MDC للحصول على قاعدة CSS, ، لكنني لا أحصل على شيء واحد. لدي ملفات منفصلة ل بالخط العريض, مائل و جريئة + مائل. وبعد كيف يمكنني تضمين جميع الملفات الثلاثة في واحد @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)، لذلك سيكون الافتراضي لشيء ما لا أريده. كيف يمكنني معرفة المتصفح أن جميع المتغيرات المختلفة لدي لخط معين؟
المحلول
يبدو أن الحل هو إضافة متعددة @font-face القواعد، على سبيل المثال:
@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, oblique;
}
@font-face {
font-family: "DejaVu Sans";
src: url("fonts/DejaVuSans-BoldOblique.ttf");
font-weight: bold;
font-style: italic, oblique;
}
بالمناسبة، يبدو أن جوجل كروم لا يعرف format("ttf") حجة، لذلك قد ترغب في تخطي ذلك.
(كانت هذه الإجابة صحيحة ل CSS 2. تخصيص. CSS3. يسمح فقط بأسلوب خط واحد بدلا من قائمة مفصولة بفواصل.)
نصائح أخرى
اعتبارا من 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;
}
في معظم الحالات، من المحتمل أن تكون المائل قد تكون كافية وأن قواعد مائلة لن تكون ضرورية إذا كنت تهتم بتحديد أيهما ستستخدمه والتمسك به.
إذا كنت تستخدم Google Fonts، أقترح ما يلي.
إذا كنت تريد تشغيل الخطوط من Localhost أو خادمك، فأنت بحاجة إلى تنزيل الملفات.
بدلا من تنزيل حزم TTF في روابط التنزيل، استخدم الرابط المباشر الذي يقدمونه، على سبيل المثال:
http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic
لصق عنوان URL في متصفحك ويجب عليك الحصول على إعلان وجه الخط مشابه للإجابة الأولى.
افتح عناوين URL المقدمة، وتنزيل وإعادة تسمية الملفات.
قم بعمل تصريحات الوجه المحدثة مع المسارات النسبية إلى ملفات Woff في CSS الخاص بك، وأنت تم ذلك.
أن يكون هناك اختلاف خط يعمل بشكل صحيح، كان علي عكس ترتيب @ font-font في 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");
}
في الوقت الحاضر، 2017-12-17. لا أجد أي وصف حول ضرورة ترتيب الخطوط الجوية مواصفاتوبعد وأنا اختبار في الكروم يعمل دائما مهما كان النظام.
@font-face {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
src: url('#{$fa-font-path}/fa-solid-900.eot');
src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}
@font-face {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
src: url('#{$fa-font-path}/fa-regular-400.eot');
src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# 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-weight; ؛ بالنسبة للبفن المائل، هو font-style
