ForHosting KIT · قراءة المواقع ومراقبتها

إنشاء تصريح CSS @font-face من ملفات الخطوط

أنشئ تصريح CSS @font-face كاملاً من دون مراجعة علامات الترقيم أو علامات الاقتباس أو ترتيب الواصفات في كل مرة. أدخل اسم عائلة الخط وملف مصدر واحداً أو أكثر مع تنسيق كل ملف، ثم الوزن والنمط. تأتي النتيجة ثابتة وجاهزة للنسخ، وتحافظ على الترتيب الذي حددتموه كي تسبق التنسيقات الحديثة الملفات البديلة.

● Betaمجاني · داخل متصفحك

شغّل الأداة مجانًا اطّلع على الـAPI

استخدمها من الويبAPIالبريدTelegramالتطبيق قريبًا

رتبوا ملفات الخط وفق ترتيب التجربة في المتصفح

ابدؤوا بالاسم العلني لعائلة الخط الذي ستستخدمونه في خاصية font-family داخل التطبيق. ثم أضيفوا كل مصدر كسجل مستقل يضم المسار وتلميح التنسيق. للترتيب أثر مهم، إذ يقرأ المتصفح قائمة src من اليسار إلى اليمين ويختار أول مورد يدعمه. من الشائع وضع ملف WOFF2 المضغوط أولاً ثم ملف WOFF بديل. تحافظ الأداة على هذا الترتيب كما هو، ولا تعيد فرزه ولا تستنتج محتوى الملفات ولا تجلبها أو تفحصها. يمكن أن يكون المسار نسبياً مثل /fonts/newsreader.woff2 أو عنوان URL كاملاً. تصدر قيمة format كتلميح CSS صريح، ولذلك ينبغي أن تطابق الملف الفعلي. تهرّب علامات الاقتباس والشرطات المائلة العكسية داخل أسماء العائلات والمسارات والتنسيقات وفق قواعد سلاسل CSS. وترفض القيم الفارغة والمحارف التي قد تكسر الواصف بدلاً من إنتاج قاعدة تبدو سليمة ثم تفشل بعد لصقها في ورقة الأنماط. لا بد من مصدر واحد على الأقل، لأن قاعدة @font-face التي لا تحتوي على واصف src قابل للاستخدام لن تتمكن من تحميل أي خط.

اضبطوا الوزن والنمط بما يطابق ملف الخط

يخبر الواصفان font-weight وfont-style المتصفح بالطلبات التي يستطيع هذا الوجه تلبيتها. ينبغي أن يصفا البيانات الموجودة في الملف، لا المظهر الذي تتوقعون من المتصفح توليده اصطناعياً. للخط الساكن العادي يشيع استخدام الوزن 400 والنمط normal. وغالباً ما يستخدم ملف المائل الوزن نفسه مع italic، بينما قد يستخدم الملف العريض 700. يمكن للخطوط المتغيرة استعمال نطاقات مدعومة مثل 100 900 عندما يحتوي الملف فعلاً على ذلك المحور. تقبل الأداة نص واصف CSS بدلاً من حصر الحقول في قائمة قصيرة، مما يتيح القيم المعتادة والصياغة الصحيحة للخطوط المتغيرة. تزال المسافات المحيطة، وترفض فواصل الأسطر والأقواس المعقوفة والفواصل المنقوطة التي قد تخرج من الواصف. لا تحدد الأداة ما إذا كان الملف الثنائي يضم الوزن أو النمط المصرح به؛ فذلك من مسؤولية إعداد الأصل. أنشئوا قاعدة منفصلة لكل وجه ساكن، وأبقوا اسم العائلة موحداً للملفات التابعة للعائلة نفسها. وبذلك تختار مطابقة الخطوط العادية في CSS الوجه الصحيح من دون تغيير التصريحات في الموقع كله.

انسخوا النتيجة أو أنشئوها ضمن عملية البناء

تتضمن النتيجة قاعدة CSS منسقة، إلى جانب اسم العائلة بعد تنسيقه وعدد المصادر والوزن والنمط. انسخوا قيمة css إلى ورقة أنماط قبل المحددات التي تستخدم العائلة، أو استدعوا الخدمة من برنامج بناء يجمع أصول الخطوط. تركز القاعدة المنشأة على العائلة والمصادر والوزن والنمط فقط. ولا تخمّن خصائص اختيارية مثل font-display وunicode-range وsize-adjust وascent-override وdescent-override وإعدادات الميزات، لأن هذه الخيارات تعتمد على سياسة التحميل وتغطية المحارف وتوافق المقاييس. أضيفوا تلك الواصفات لاحقاً عند حاجة المشروع إليها. لا تجري الأداة أي طلب شبكي ولا تتحقق من استجابة المسار، لذا اختبروا ورقة الأنماط النهائية في المتصفحات التي تدعمونها وراجعوا لوحة الشبكة بحثاً عن أصل مفقود أو إعداد MIME غير صحيح. تفيد الصياغة الثابتة الفرق التي تنشر الخطوط معاً، فالمدخل نفسه ينتج المخرج نفسه دائماً، وتبقى أولوية المصادر قابلة للمراجعة، وتفشل القائمة الفارغة مبكراً. الاستخدام في المتصفح مجاني، أما طلب API الآلي فسعره $0.002.

حالات الاستخدام

تسجيل عائلة خطوط للويب

حوّلوا مسارات WOFF2 وWOFF إلى قاعدة جاهزة للنسخ مع تلميحات تنسيق صريحة.

التصريح بأوجه الخط الساكنة

أنشئوا قواعد متسقة للعادي والمائل والعريض والعريض المائل تحت اسم عائلة واحد.

أتمتة تجميع أوراق الأنماط

أنشئوا تصريحات خطوط ثابتة من بيانات الأصول الوصفية أثناء بناء الموقع أو نظام التصميم.

الأسئلة الشائعة

ماذا يحدث إن لم أقدم أي ملف مصدر؟

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

هل تتحقق الأداة من وجود ملف الخط؟

لا. فهي لا تجري طلبات شبكية، وإنما تتحقق من القيم التي تقدمونها وتصوغها فقط.

أي مصدر ينبغي أن يأتي أولاً؟

ضعوا التنسيق الحديث المفضل أولاً، وعادة يكون WOFF2، ثم التنسيقات البديلة التي تتطلبها سياسة دعم المتصفحات.

هل يمكنني تحديد نطاق وزن لخط متغير؟

نعم. يقبل font_weight نصاً مثل 100 900 ما دام خالياً من المحارف التي تكسر القاعدة.

هل تضيف الأداة font-display أو unicode-range؟

لا. فهي تنشئ العائلة والمصادر والوزن والنمط فقط، وتترك سياسات التحميل الاختيارية تحت إدارتكم.

ما تكلفة استخدام API؟

يطبق على كل طلب API السعر الأساسي الظاهر بصيغة $0.002، أما أداة المتصفح فمجانية.

للمطوّرين — الوصول عبر API

كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.

الـEndpoint

POSThttps://api.kit.forhosting.com/web/font-face-declaration-build

صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.

استدعِ الخدمة من بيئتك

curl -X POST https://api.kit.forhosting.com/web/font-face-declaration-build \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"font_family":"Inter","sources":[{"path":"/fonts/inter-regular.woff2","format":"woff2"},{"path":"/fonts/inter-regular.woff","format":"woff"}],"font_weight":"400","font_style":"normal"}'

const res = await fetch("https://api.kit.forhosting.com/web/font-face-declaration-build", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "font_family": "Inter",
    "sources": [
      {
        "path": "/fonts/inter-regular.woff2",
        "format": "woff2"
      },
      {
        "path": "/fonts/inter-regular.woff",
        "format": "woff"
      }
    ],
    "font_weight": "400",
    "font_style": "normal"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/font-face-declaration-build",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "font_family": "Inter",
    "sources": [
        {
            "path": "/fonts/inter-regular.woff2",
            "format": "woff2"
        },
        {
            "path": "/fonts/inter-regular.woff",
            "format": "woff"
        }
    ],
    "font_weight": "400",
    "font_style": "normal"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/font-face-declaration-build", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"font_family":"Inter","sources":[{"path":"/fonts/inter-regular.woff2","format":"woff2"},{"path":"/fonts/inter-regular.woff","format":"woff"}],"font_weight":"400","font_style":"normal"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"font_family":"Inter","sources":[{"path":"/fonts/inter-regular.woff2","format":"woff2"},{"path":"/fonts/inter-regular.woff","format":"woff"}],"font_weight":"400","font_style":"normal"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/font-face-declaration-build", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

مثال على الطلب

{
  "font_family": "Inter",
  "sources": [
    {
      "path": "/fonts/inter-regular.woff2",
      "format": "woff2"
    },
    {
      "path": "/fonts/inter-regular.woff",
      "format": "woff"
    }
  ],
  "font_weight": "400",
  "font_style": "normal"
}

مثال على الاستجابة

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.font_face_declaration_build",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.

الأسعار

لكل طلب$0.002

السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.

الحدود

`timeout_sec`	30
`max_crawl_pages`	25

الأخطاء

HTTP	الرمز	المعنى
`401`	`unauthorized`	مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك.
`402`	`insufficient_balance`	رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة.
`404`	`unknown_type`	نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب.
`429`	`rate_limited`	تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة.

اطّلع على توثيق KIT الكامل ←