مثال
تحديد خط اسمه "myFirstFont" ، وتحديد عنوان URL حيث يمكن العثور عليها
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
مع @ حكم الخط وجه، ومصممي المواقع لا لم يعد لديك لاستخدام واحد من "web-safe" الخطوط.
في @ جديدة حكم الخط وجه يجب أولا تحديد اسم الخط (eg myFirstFont) ، ثم أشر إلى ملف الخط.
نصيحة: استخدم أحرف صغيرة للURL الخط. يمكن الأحرف الكبيرة تعطي نتائج غير متوقعة في شركة آي إي!
لاستخدام الخط لعنصر HTML، إشارة إلى اسم الخط (myFirstFont) من خلال الخاصية الخط بين أفراد الأسرة:
div
{
font-family: myFirstFont;
}دعم المتصفح
يتم اعتماد @ حكم الخط وجه في انترنت اكسبلورر، فايرفوكس، أوبرا، وكروم، وسفاري.
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بالكامل تنسيق الخط.
| شكل الخط | |||||
|---|---|---|---|---|---|
| الصناديق / OTF | 4.0 | 9.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 | تسعة |
| محكمة تكافؤ الفرص | غير معتمد | 6.0 | غير معتمد | غير معتمد | غير معتمد |
* الحافة وIE: تنسيق الخط يعمل فقط عندما وضعت لتكون "installable" .
* فايرفوكس: تعطيل افتراضيا، ولكن يمكن تمكين (الحاجة إلى تعيين إشارة إلى "true" لاستخدام WOFF2).
بناء الجملة
@font-face
{
font-properties
}| واصف الخط | القيم | وصف |
|---|---|---|
| خط العائلة | name | مطلوب. يحدد اسم الخط. |
| SRC | URL | مطلوب. يحدد URL(s) حيث يجب أن يتم تحميل الخط من |
| الخط تمتد | عادي تكثف فائقة مكثف خارج مكثف شبه مكثف موسع شبه موسعة خارج المملوءة فائقة المملوءة | اختياري. يحدد الكيفية التي ينبغي أن تكون الضغوط على الخط. القيمة الافتراضية هي "normal" |
| نوع الخط | عادي مائل منحرف - مائل | اختياري. يحدد الكيفية التي ينبغي أن تكون على غرار الخط. القيمة الافتراضية هي "normal" |
| الخط الوزن | عادي بالخط العريض 100 200 300 400 500 600 700 800 900 | اختياري. يحدد جرأة الخط. القيمة الافتراضية هي "normal" |
| يونيكود المدى | unicode-range | اختياري. يحدد مجموعة أحرف Unicode يدعم الخط. القيمة الافتراضية هي "U+0-10FFFF" |
انها محاولة لنفسك - أمثلة
مثال
يجب إضافة @ قاعدة أخرى الخط وجه تحتوي على واصفات نص عريض:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
انها محاولة لنفسك » ملف "sansation_bold.woff" هو ملف خط آخر، الذي يحتوي على أحرف جريئة للخط Sansation.
وسوف تستخدم متصفحات هذا كلما جزء من النص مع الخط بين أفراد الأسرة "myFirstFont" يجب أن تجعل كما غامق.
هذه الطريقة التي يمكن أن يكون لها العديد من القواعد @ الخط وجها لنفس الخط.
صفحات ذات صلة
CSS3 البرنامج التعليمي: CSS3 الخطوط