CSS3 خطوط الويب - و @font-face القاعدة
تسمح الخطوط على شبكة الإنترنت مصممي الويب لاستخدام الخطوط التي لم يتم تثبيتها على جهاز الكمبيوتر الخاص بالمستخدم.
عندما كنت قد وجدت / اشترى الخط الذي ترغب في استخدامه، وتشمل فقط ملف الخط على خادم الويب الخاص بك، وسوف يتم تحميلها تلقائيا للمستخدم عند الحاجة.
وتعرف الخطوط الخاصة بك "الخاصة" داخل CSS3 @font-face القاعدة.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل العقار.
| الملكية | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
تنسيقات الخط مختلفة
TrueType خطوط (الصناديق)
TrueType هو معيار الخط وضعت في أواخر 1980s، من قبل شركة آبل ومايكروسوفت. TrueType هو تنسيق الخط الأكثر شيوعا لكلا من أنظمة التشغيل ماك OS و Microsoft Windows.
OpenType خطوط (اللوبي)
OpenType هو تنسيق الخطوط كمبيوتر قابلة للتطوير. أنها بنيت على TrueType ، وهي علامة تجارية مسجلة لشركة مايكروسوفت. OpenType تستخدم الخطوط شيوعا اليوم على منصات الكمبيوتر الرئيسية.
تنسيق الويب فتح خط (WOFF)
WOFF هو تنسيق الخط لاستخدامها في صفحات الويب. تم تطويره في عام 2009، والآن هو توصية W3C. WOFF هو في الأساس OpenType أو TrueType مع ضغط والبيانات الوصفية إضافية. والهدف هو دعم توزيع الخط من ملقم إلى عميل عبر شبكة اتصال مع قيود عرض النطاق الترددي.
تنسيق الويب فتح خط (WOFF 2.0)
TrueType/OpenType الخط الذي يوفر أفضل ضغط من WOFF 1.0.
SVG الخطوط / الأشكال
تسمح الخطوط SVG SVG لاستخدامها رموزا عند عرض النص. 1.1 مواصفات SVG تحدد وحدة الخط الذي يتيح إنشاء الخطوط في وثيقة SVG. يمكنك أيضا تطبيق CSS وثائق SVG، و @font-face حكم يمكن تطبيقها على النص في وثائق SVG.
جزءا لا يتجزأ من OpenType خطوط (محكمة تكافؤ الفرص)
الخطوط محكمة تكافؤ الفرص هي شكل مضغوط من OpenType الخطوط مصممة من قبل مايكروسوفت لاستخدامها بوصفها جزءا لا يتجزأ من الخطوط على صفحات الويب.
المتصفح دعم تنسيقات الخط
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بالكامل تنسيق الخط.
| شكل الخط | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0 * | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | تسعة | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | غير معتمد | 36.0 | 35.0 * | غير معتمد | 26.0 |
| SVG | غير معتمد | 4.0 | غير معتمد | 3.2 | تسعة |
| EOT | 6.0 | غير معتمد | غير معتمد | غير معتمد | غير معتمد |
* IE: تنسيق الخط يعمل فقط عندما وضعت لتكون "للتثبيت".
* فايرفوكس: غير معتمد بشكل افتراضي، ولكن يمكن تمكين (الحاجة إلى تعيين إشارة إلى "true" لاستخدام WOFF2).
باستخدام الخط الذي تريده
في CSS3 @font-face الحكم يجب أولا تحديد اسم الخط (على سبيل المثال myFirstFont )، ثم أشر إلى ملف الخط.
 | نصيحة: دائما استخدام أحرف صغيرة ل URL الخط. يمكن الأحرف الكبيرة تعطي نتائج غير متوقعة في IE. |
|---|
لاستخدام الخط لعنصر HTML، إشارة إلى اسم الخط ( myFirstFont ) من خلال font-family الملكية:
مثال
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
انها محاولة لنفسك » باستخدام نص بولد
يجب إضافة أخرى @font-face حكم تحتوي على واصفات نص عريض:
مثال
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
انها محاولة لنفسك » ملف "sansation_bold.woff" هو ملف خط آخر، الذي يحتوي على أحرف جريئة للخط Sansation.
وسوف تستخدم متصفحات هذا كلما جزء من النص مع الخط بين أفراد الأسرة " myFirstFont " يجب أن تجعل كما غامق.
هذه الطريقة التي يمكن أن يكون لها العديد من @font-face قواعد لنفس الخط.
اختبر نفسك مع تمارين!
واصفات الخط CSS3
يسرد الجدول التالي كل واصفات الخط التي يمكن تعريفها داخل @font-face القاعدة:
| واصف | القيم | وصف |
|---|---|---|
| font-family | name | مطلوب. يعرف اسم للخط |
| src | URL | مطلوب. يحدد عنوان URL لملف الخط |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | اختياري. يحدد الكيفية التي ينبغي أن تكون الضغوط على الخط. الافتراضي هو "طبيعي" |
| font-style | normal italic oblique | اختياري. يحدد الكيفية التي ينبغي أن تكون على غرار الخط. الافتراضي هو "طبيعي" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | اختياري. يحدد جرأة الخط. الافتراضي هو "طبيعي" |
| unicode-range | unicode-range | اختياري. يحدد مجموعة أحرف Unicode يدعم الخط. الافتراضي هو "U + 0-10FFFF" |