ForHosting KIT · أدوات المطورين

تحويل البكسل إلى نسبة مئوية لحجم خط CSS

تحوّل حاسبة البكسل إلى نسبة مئوية قياس الخط الثابت إلى نسبة تعتمد على حجم خط العنصر الأب.

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

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

أدخلوا حجم الخط المطلوب بالبكسل وحجم العنصر الأب، فتعرض الحاسبة القيمة المئوية العددية وقيمة CSS جاهزة للاستخدام. تفيد هذه العملية عند استبدال الخطوط ذات الأحجام الثابتة بأحجام قابلة للتوارث، أو مطابقة تصميم قائم من دون تغيير مقياسه المرئي، أو توثيق العلاقة بين النص المتداخل والسياق المحيط به.

حوّلوا تصميمًا قائمًا بالبكسل بدقة

ابدؤوا بحجم الخط الذي تريدون مطابقته وبحجم الخط المحسوب للعنصر الذي سيصبح أبًا له. تقسم الحاسبة حجم البكسل على حجم العنصر الأب، ثم تضرب تلك النسبة في 100. فعلى سبيل المثال، يصبح حجم عنصر ابن مقداره 18 بكسل داخل أب حجمه 16 بكسل مساويًا لـ112.5 بالمئة. يمكنكم لصق قيمة CSS الناتجة مباشرة في تعريف font-size. ويهم قياس العنصر الأب لأن النسب المئوية لا تصف حجمًا ماديًا مطلقًا، بل تصف علاقة ضمن سلسلة التوارث. فإذا تغير الأب لاحقًا من 16 بكسل إلى 20 بكسل، كبر معه الابن المعرّف بنسبة 112.5 بالمئة. استخدموا حجم الخط الفعلي للأب المباشر، لا قيمة root أو body غير المرتبطة به، إلا إذا كان ذلك العنصر هو فعلًا الأب الذي يرث الابن حجم خطه المحسوب. يحدد خيار الدقة عدد المنازل العشرية المحتفظ بها، بما يوازن بين مطابقة التصميم ووضوح قيم ورقة الأنماط. وتبقى النتائج الصحيحة موجزة من دون أصفار زائدة في نهايتها.

افهموا كيفية عمل نسب حجم الخط في CSS

يُحتسب حجم الخط المعبر عنه بنسبة مئوية استنادًا إلى حجم الخط المحسوب للعنصر الأب. تعني 100 بالمئة الحجم نفسه، وتعني 50 بالمئة نصفه، وتعني 150 بالمئة مرة ونصفًا منه. يجعل هذا السلوك الخطوط تستجيب طبيعيًا للتغييرات الموروثة، لكن التداخل قد يؤدي أيضًا إلى تراكم النسب. فإذا ضُبطت حاوية على 125 بالمئة وضُبط ابن داخلها كذلك على 125 بالمئة، صار حجم الابن 156.25 بالمئة من الحجم خارج المستويين. تحسب الأداة علاقة واحدة في كل مرة، لذلك أدخلوا دائمًا حجم الأب في المستوى الدقيق الذي سيوضع فيه التعريف الجديد. تعبّر النسب المئوية ووحدات em عن النسبة نفسها إلى الأب في خاصية font-size، غير أن الصياغة والأعراف المتبعة في أنظمة التصميم تختلف. تعيد هذه الأداة صياغة مئوية تحديدًا، مما يجعل علاقات المقاييس واضحة فورًا لمن يراجع ورقة أنماط أو يحول مواصفات بالبكسل إلى قواعد CSS قابلة للتوارث.

استخدموا النتيجة بأمان في نظام الخطوط

تعاملوا مع القيمة المحوّلة بوصفها نقطة بداية دقيقة، ثم اختبروها في التخطيط الفعلي. فقد يؤثر تكبير المتصفح وتفضيلات المستخدم والخطوط البديلة وارتفاع السطر والعرض المتاح في مظهر النص، حتى عندما يكون الحجم الحسابي صحيحًا. تلائم النسب المئوية خصوصًا المكونات التي ينبغي أن تتبع مقياس النص المحيط، مثل الشروح والشارات وتسميات التنقل والعناوين المتداخلة. وقد تكون أقل ملاءمة عندما يجعل تكرار التداخل المقياس النهائي صعب التوقع. في تلك الحالات، قد يسهل الحفاظ على وحدة مرتبطة بالجذر أو رمز تصميم. احتفظوا بدقة عشرية تكفي لمنع الانحراف المرئي، وتجنبوا الأرقام غير ذات الدلالة الناتجة من قياسات تصميم تقريبية. ترفض الحاسبة حجم أب يساوي صفرًا أو قيمة سالبة لأنه لا يمكن اشتقاق نسبة CSS مفيدة منه، وترفض حجم الابن السالب لأن CSS لا يجيز أحجام خطوط سالبة. وتتيح الصيغة والمدخلات الموحّدة الناتجة مراجعة التحويلات الآلية قبل إضافة التعريفات المولدة إلى ورقة الأنماط.

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

تحديث ورقة أنماط ثابتة

استبدلوا تعريفات الخط بالبكسل بنسب مئوية مرتبطة بالأب مع الحفاظ على الحجم المرئي الحالي.

تنفيذ تسليم التصميم

حوّلوا قياسات ملف التصميم بالبكسل إلى قيم CSS موروثة من حاوية المكوّن.

توثيق مقياس المكوّنات

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

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

ما الصيغة التي تستخدمها الحاسبة؟

تقسم حجم البكسل على حجم العنصر الأب، ثم تضرب الناتج في 100.

ما القيمة التي ينبغي استخدامها لحجم الأب؟

استخدموا حجم الخط المحسوب للعنصر الأب المباشر الذي سيشير إليه التعريف المئوي.

هل تساوي 100 بالمئة دائمًا 16 بكسل؟

لا. تساوي 100 بالمئة حجم خط العنصر الأب مهما كانت قيمته المحسوبة.

هل نسب الخط مماثلة لوحدات em؟

في خاصية font-size تعبّر كلتاهما عن نسبة إلى الأب، لكن هذه الحاسبة تعيد صياغة مئوية.

ما تكلفة طلب API؟

تبلغ تكلفة كل طلب API مقدار $0.002، ويمكن أيضًا تشغيل الحاسبة في المتصفح.

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

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

الـEndpoint

POSThttps://api.kit.forhosting.com/str/px-to-percent

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

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

curl -X POST https://api.kit.forhosting.com/str/px-to-percent \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"pixel_size":18,"parent_size":16}'

const res = await fetch("https://api.kit.forhosting.com/str/px-to-percent", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "pixel_size": 18,
    "parent_size": 16
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/str/px-to-percent",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "pixel_size": 18,
    "parent_size": 16
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/px-to-percent", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"pixel_size":18,"parent_size":16}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"pixel_size":18,"parent_size":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/px-to-percent", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

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

{
  "pixel_size": 18,
  "parent_size": 16
}

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

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

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

الأسعار

لكل طلب$0.002

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

الأخطاء

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

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