فونت لنس

إضافة مجانية لمتصفح Chrome

ما هذا الخط؟ انقر باليمين وانسخ CSS

حدد نصًا في أي موقع، وانقر بزر الفأرة الأيمن واختر «Inspect font with FontLens». يفتح فاحص الخطوط فوق الصفحة ويعرض العائلة والحجم والسماكة وارتفاع السطر واللون، مع CSS جاهز للنسخ وزر لتنزيل الخط.

أضف إلى Chrome — مجانًا

تعمل أيضًا في متصفحات Edge و Brave و Opera وغيرها من متصفحات Chromium.

فاحص فونت لنس: عينة Ag بين أدلة ارتفاع الحروف الكبيرة وارتفاع x وخط الأساس، مع خصائص الخط ومقتطف Tailwind

نظرة سريعة

ما الذي تفعله
تعرض خط النص الذي تحدده: العائلة والحجم والسماكة وارتفاع السطر واللون والأنماط الأخرى المختلفة عن الافتراضي، مع CSS جاهز للنسخ.
كيف تبدأ
حدد نصًا، وانقر بزر الفأرة الأيمن واختر «Inspect font with FontLens». لا يظهر عنصر القائمة إلا عند تحديد نص.
النسخ بصيغة
CSS أو SCSS أو SASS أو Tailwind، مع الحجم بوحدات px أو rem أو pt أو em.
ملف الخط
ينزّل «Download font» خط الويب من مصدر @font-face. تحقق من ترخيص الخط قبل استخدامه.
لمن صُممت
لمصممي الويب ومطوري الواجهة الأمامية ومدققي إمكانية الوصول والطلاب الذين يتعلمون CSS.
السعر
مجانية. لا حساب، لا نسخة مدفوعة.
البيانات
تعمل في متصفحك. لا خوادم ولا تحليلات. الطلب الوحيد هو تنزيل الخط الذي تبدأه.
تعمل في
Chrome ومتصفحات Chromium الأخرى التي تثبت الإضافات من Chrome Web Store. لا تعمل في Firefox أو Safari.
القيود
تقرأ CSS للنصوص الفعلية على صفحات الويب. لا تقرأ نصوص الصور أو canvas أو ملفات PDF ولا صفحات Chrome نفسها.
الإصدار
2.2.0، تم التحديث في 23 أكتوبر 2026

نقرتان لمعرفة الخط

  1. 1

    حدد النص

    عنوان أو فقرة أو تسمية زر في أي صفحة ويب.

  2. 2

    انقر بزر الفأرة الأيمن

    اختر «Inspect font with FontLens». يفتح الفاحص فوق الصفحة ويعرض العائلة والحجم والسماكة وارتفاع السطر واللون.

  3. 3

    انسخ أو عدّل

    انسخ CSS أو Tailwind، أو جرّب حجمًا أو لونًا آخر في المعاينة المباشرة، أو نزّل ملف الخط.

لماذا يستخدمه الناس

Aa

اعرف اسم الخط

أعجبك عنوان؟ حدده لمعرفة عائلة الخط وسماكته ومصدره: Google Fonts أو Adobe Fonts أو الموقع نفسه.

{ }

طابق التصميم

قارن القيم في الصفحة الحية بملف التصميم، ثم انسخ القواعد بصيغة CSS أو SCSS أو SASS أو Tailwind.

4.5:1

افحص التباين

اطّلع على نسبة التباين وعلامتي AA وAAA، وجرّب نصًا أغمق أو خلفية أفتح قبل نشر التصميم.

ما الذي تفعله

  • عينة مع أدلة

    أول عائلة في المكدس، مرسومة بين أدلة ارتفاع الحروف الكبيرة وارتفاع x وخط الأساس، بقياسات مأخوذة من الخط نفسه.

  • صيغ المقتطفات

    CSS وSCSS وSASS وTailwind. انسخ المقتطف كاملًا أو سطرًا واحدًا؛ وسيُحفظ آخر تنسيق استخدمته.

  • الوحدات التي تفضلها

    اعرض الحجم بوحدات px أو rem أو pt أو em في الحقول والمقتطف. تتبع rem حجم الجذر الخاص بالصفحة.

  • مصدر الخط

    توضح شارة مصدر الخط: Google Fonts أو Adobe Fonts أو استضافة ذاتية أو خط نظام مثبت على جهازك.

  • فحص التباين

    نسبة التباين بين النص والخلفية مع علامتي AA وAAA للنص العادي والكبير، وتتحدث عند تغيير الألوان.

  • تنزيل الخط

    يجلب الملف من مصدر @font-face ويسميه باسم العائلة. إذا منع الخادم التنزيل، يفتح المصدر في علامة تبويب جديدة.

لماذا يستغرق العثور على الخط في DevTools وقتًا؟

تحدد الصفحة قائمة خطوط، ويستخدم المتصفح أول خط متاح لديه. لمعرفة أيها استُخدم، تفتح DevTools وتبحث عن العنصر وتقرأ لوحة Computed، ثم تبحث عن ملف الخط في لوحة Network. أما الحجم والسماكة وارتفاع السطر واللون فتجدها في أماكن مختلفة.

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

لا شيء يغادر متصفحك

  • لا حساب ولا خوادم

    يعمل فونت لنس في متصفحك. لا تحليلات ولا تتبع.

  • يقرأ ما تحدده

    يقرأ الفاحص أنماط النص الذي نقرت عليه باليمين. لا تُرسل أي معلومات عن الصفحة.

  • أربعة أذونات

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

Chrome DevTools أم فونت لنس؟

Chrome DevTools أم فونت لنس؟Chrome DevToolsفونت لنس
الوصول إلى خط نصافحص الصفحة وابحث عن العنصر وافتح لوحة Computedحدد النص، وانقر باليمين، واختر عنصرًا واحدًا من القائمة
النسخ بصيغة Tailwind أو SCSSلا، انسخ القيم واحدة تلو الأخرىعلامة تبويب CSS أو SCSS أو SASS أو Tailwind
مصدر الخطابحث عن ملف الخط في لوحة Networkشارة تعرض Google Fonts أو Adobe Fonts أو استضافة ذاتية أو النظام
تنزيل ملف الخطاعثر عليه في Network أو Sources واحفظهزر واحد
فحص التباينفي منتقي الألوان بلوحة Stylesعلامتا AA وAAA بجوار معاينة مباشرة
السعرمدمجمجاني

أسئلة شائعة

كيف أعرف الخط المستخدم في موقع؟

أضف فونت لنس إلى Chrome، وحدد نصًا في الموقع، وانقر بزر الفأرة الأيمن واختر «Inspect font with FontLens». سترى عائلة الخط وحجمه وسماكته وارتفاع السطر ولونه ومصدره.

كيف أنسخ CSS لخط من موقع؟

في الفاحص اختر علامة تبويب CSS أو SCSS أو SASS أو Tailwind واضغط «Copy all»، أو انسخ سطرًا واحدًا. غيّر الوحدة إلى px أو rem أو pt أو em أولًا عند الحاجة.

هل يمكنني تنزيل خط من موقع؟

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

هل يستطيع فونت لنس تحديد خط في صورة أو PDF؟

لا. فهو يقرأ CSS للنصوص الفعلية في صفحات الويب، ولا يستطيع تسمية الخطوط في الصور أو canvas أو ملفات PDF.

كيف أفحص تباين النص وفق WCAG؟

تعرض المعاينة نسبة التباين بين لون النص والخلفية، مع علامتي AA وAAA للنص العادي والكبير. غيّر أيًا من اللونين لتتحدث العلامات.

هل يمكن عرض الأحجام بوحدة rem بدل px؟

نعم. بدّل الوحدة إلى px أو rem أو pt أو em، وستتبعها الحقول والمقتطف. تُحسب rem من حجم خط الجذر للصفحة، ويُحفظ اختيارك.

هل الإضافة مجانية؟ وهل تجمع البيانات؟

هي مجانية ولا تحتاج إلى حساب. لا خوادم ولا تحليلات؛ والطلب الوحيد هو تنزيل الخط الذي تبدأه.

هل تعمل في Edge أو Brave أو Opera؟

تتيح معظم متصفحات Chromium تثبيت الإضافات من Chrome Web Store، ومنها Edge وBrave وOpera وVivaldi. لا يدعم Firefox وSafari.

المزيد من الإضافات المجانية من PYROCTAL

ما هذا الخط؟ نقرتان فقط.

أضف إلى Chrome — مجانًا