فونت لنس

حدّد أي نص، انقر باليمين، وافحص فورًا الخط والحجم والوزن واللون وخصائص CSS. انسخ، عدّل، عاين، وحمّل.

هل سبق لك أن زرت صفحة ويب، وأعجبت بتصميم حروفها، وتساءلت "ما هو هذا الخط؟". أداة "عدسة الخط" تجيب على سؤالك بنقرة واحدة. حدد أي نص على أي موقع ويب، انقر بزر الماوس الأيمن، واختر "فحص الخط باستخدام عدسة الخط". ستُفتح لوحة عرض نظيفة ومركزة فوق الصفحة مباشرةً لتكشف لك بالضبط عن كيفية تنسيق هذا النص: نمط الخط، حجمه، وزنه، ارتفاع السطر، لونه، وكل التفاصيل الأخرى وراء التصميم. سواء كنت مصمماً يقوم بالهندسة العكسية لتخطيط ما، أو مطوراً يطابق مواصفات تصميم، أو ببساطة لديك فضول حول عنوان جميل، فإن هذه الأداة تحول أي صفحة ويب إلى كتاب مفتوح في فن الطباعة. "عدسة الخط" هي أداة للعثور على الخطوط ومفتش CSS في آن واحد. فهي لا تخبرك باسم عائلة الخط فحسب، بل تمنحك كوداً جاهزاً للاستخدام، ومساحة تفاعلية لاختبار الأفكار، وأدوات لإمكانية الوصول للتأكد من أن نصك قابل للقراءة. لا حاجة لإنشاء حساب. لا حاجة للتسجيل. فقط حدد، انقر بزر الماوس الأيمن، وافحص. 🔍 ما يمكنك فعله • الكشف عن تفاصيل الطباعة الكاملة لأي كلمات محددة: عائلة الخط، حجم الخط، وزن الخط، ارتفاع السطر، واللون بلمحة واحدة. • رؤية التنسيقات الإضافية التي يسهل تفويتها، مثل تباعد الأحرف، وتحويل النص، ونمط الخط. • نسخ أي خاصية فردية بنقرة واحدة، أو الحصول على مجموعة القواعد بأكملها كمقتطف CSS كامل. • تحويل هذا المقتطف إلى Tailwind أو SCSS أو SASS من خلال علامات تبويب بسيطة، ثم نسخه بالكامل أو سطراً بسطر. • التجربة في معاينة حية وقابلة للتعديل: أعد كتابة الكلمات النموذجية، وعدّل القيم، وغير الخلفية، وشاهد التحديثات فورياً. • تحديد مصدر خط الويب من خلال شارة المزوّد (خطوط جوجل، خطوط أدوبي، مستضاف ذاتيًا، أو خط نظام مضمّن). • حفظ خط ويب على جهاز الكمبيوتر الخاص بك باستخدام زر "تنزيل الخط"، حيث يتم جلبه مباشرة من مصدره. • التحقق من تباين الألوان وفقًا لمعايير WCAG، مع النسبة الدقيقة بالإضافة إلى نتائج النجاح أو الفشل للمستويين AA و AAA. • اختيار وأخذ عينات من الألوان باستخدام منتقي ألوان كامل، يتضمن أداة القطارة لالتقاط أي بكسل على الشاشة. • التبديل بين وحدات القياس (بكسل، rem، نقطة، و em)، ويتم تطبيقها على كل من الحقول والكود المصدّر. 🖱️ كيف تعمل يستغرق استخدام "عدسة الخط" ثوانٍ معدودة. ظلل الكلمات التي تريد دراستها، وانقر بزر الماوس الأيمن على التحديد، واختر "فحص الخط باستخدام عدسة الخط" من القائمة. تظهر اللوحة فوق الصفحة الحالية، بتصميم أنيق لا يتعارض أبدًا مع مظهر الموقع نفسه. من هناك يمكنك قراءة التفاصيل، أو نسخ ما تحتاجه، أو البدء في التعديل. المعاينة الحية هي الجزء الممتع. غيّر الكلمات لاختبار عنوان حقيقي، أو عدّل الحجم قليلاً، أو اضبط الوزن، أو عيّن لون خلفية جديد لترى كيف يبدو الخط. تظل تعديلاتك محفوظة أثناء تنقلك بين الصفحات وعند عودتك لاحقًا، لذا فإن الفكرة التي بدأتها على موقع ما ستكون في انتظارك على الموقع التالي. عندما تريد استعادة القيم الأصلية، يقوم زر "إعادة التعيين إلى الموقع" باستعادة كل شيء يستخدمه الموقع بالفعل. هل تحتاج إلى الأصل الخام؟ بالنسبة لخط الويب القابل للتنزيل، يقوم زر واحد بجلب الملف الحقيقي من موقعه المحدد في @font-face. أما بالنسبة لنمط الخط الذي يأتي مسبقًا مع نظام التشغيل لديك، فإن "عدسة الخط" تخبرك بأنه خط مضمّن، لتعرف أنه متاح دون أي تنزيل. 🔒 الخصوصية أولاً تعمل "عدسة الخط" بالكامل داخل متصفحك. لا يوجد جمع للبيانات، ولا تتبع، ولا تحليلات، ولا خوادم خارجية تشارك في فحص النص. كل ما تفحصه يبقى على جهازك. تقوم الإضافة بطلب شبكة واحد فقط، وفقط عندما تضغط عمدًا على "تنزيل الخط"، وعند هذه النقطة تتصل بمصدر الخط نفسه لجلب الملف. لا يغادر أي شيء آخر جهازك. الأذونات محدودة بشكل متعمد. يضيف إذن القائمة السياقية (context-menu) الخيار في قائمة النقر بزر الماوس الأيمن. يسمح إذن علامة التبويب النشطة (active-tab) للأداة بقراءة النص الذي حددته في علامة التبويب التي تستدعيها فيها، وليس في أي مكان آخر. يحتفظ إذن التخزين (storage) بنص المعاينة الخاص بك وتفضيلات الوحدة والصيغة لتذكرها في المرة القادمة. لا يوجد وصول واسع إلى سجل التصفح الخاص بك ولا أذونات شاملة للوصول إلى المواقع. 👥 لمن هذه الأداة • مصممو الويب الذين يرغبون في تحديد أنماط الخطوط، والتقاط لوحة ألوان، وإعادة استخدام الأنماط بسرعة. • مطورو الواجهة الأمامية الذين يطابقون نموذجًا أوليًا أو ينقلون قيم عائلة الخط والتباعد الدقيقة إلى الكود. • مهندسو واجهة المستخدم وتجربة المستخدم الذين يبنون أنظمة طباعة متسقة ومتوافقة مع العلامة التجارية. • الطلاب الذين يتعلمون CSS وفن الطباعة ويريدون رؤية كيف يتم بناء المواقع الحقيقية. • مدققو إمكانية الوصول الذين يتحققون من أن النص يفي بمتطلبات تباين WCAG قبل الإطلاق. • المدونون والمسوقون والقراء الفضوليون الذين يريدون ببساطة معرفة الخط الذي يستخدمه موقع ما. ✨ لماذا يستمر الناس في استخدامها • نقرة يمينية واحدة تمنحك الإجابة بدلاً من البحث في أدوات المطور. • الكود جاهز للنسخ بصيغة CSS العادية، أو Tailwind، أو SCSS، أو SASS، لذا يمكنك إدراجه مباشرة في مشروعك. • تتيح لك المعاينة القابلة للتعديل عمل نماذج أولية لخيارات الخطوط دون لمس سطر واحد من الكود. • يقوم مدقق التباين بدمج إمكانية الوصول في سير عملك بدلاً من تركها كفكرة لاحقة. • يعني منتقي الألوان وأداة القطارة أنه يمكنك أخذ عينات وإعادة استخدام الألوان الدقيقة من أي مكان على الصفحة. • تتبع السمات الفاتحة والداكنة نظام التشغيل الخاص بك تلقائيًا، لذا تبدو الأداة مألوفة ليلاً أو نهارًا. • يضمن التبديل بين الوحدات (بكسل، rem، نقطة، و em) أن يظل الناتج متوافقًا مع طريقة كتابة قاعدة الكود الخاصة بك. 🎨 نظرة أقرب على التفاصيل فن الطباعة هو أكثر من مجرد اسم. تكشف "عدسة الخط" عن القرارات الصغيرة التي تجعل النص يبدو صحيحًا، من وزن العنوان إلى مساحة التنفس في ارتفاع السطر والتتبع الدقيق لتباعد الأحرف. تساعدك رؤية هذه القيم جنبًا إلى جنب على فهم سبب نجاح التصميم وكيفية إعادة إنشائه. تضيف شارة المزوّد سياقًا أيضًا، حيث تخبرك بلمحة ما إذا كنت تنظر إلى خط من خطوط جوجل، أو من خطوط أدوبي، أو ملف مستضاف ذاتيًا، أو خط افتراضي للنظام، وهو ما يكون غالبًا الدليل الأول عندما تبدأ في محاولة مطابقة أو تحديد مصدر نمط خط معين. تتجاوز أدوات الألوان مجرد قراءة ثابتة. يقدم منتقي الألوان مربع HSV مع منزلقات لتدرج اللون والشفافية، وهو يدعم صيغ HEX و RGB و HSL حتى تتمكن من العمل بأي صيغة تناسبك. قم بإقران ذلك مع أداة القطارة ويمكنك التقاط الظل الدقيق لأي عنصر وإدراجه في المعاينة أو ملاحظاتك. 🚀 ابدأ الفحص أضف أداة "عدسة الخط"، وظلل بعض الكلمات، وانقر بزر الماوس الأيمن للكشف عن فن الطباعة والأنماط والألوان وراء أي صفحة. إنها أداة مصاحبة سريعة وخاصة ومفيدة حقًا لأي شخص يهتم بكيفية قراءة الويب. قم بتثبيتها، واجعلها في متناول يدك، ولن تتساءل مرة أخرى عن خط غامض.