عندما نتصفح الويب ، نسأل أنفسنا أحيانا السؤال: "ما هو الخط المستخدم هنا?". في بعض الأحيان يمكن أن تكون هذه معلومات مهمة بالنسبة لنا ، خاصة إذا أردنا استخدام نفس الخط على موقعنا أو في مشروعنا. ولكن كيف يمكننا معرفة الخط المستخدم في صفحة معينة?
لحسن الحظ ، هناك طرق مختلفة لمعرفة الخط على صفحة ويب باستخدام التعليمات البرمجية. إحدى هذه الطرق هي استخدام أدوات مطور متصفح الويب. معظم متصفحات الويب شعبية ، مثل جوجل كروم ، وموزيلا فايرفوكس وسفاري ، وظائف التفتيش عرض عنصر الصفحة التي تسمح لك لمعرفة أنماط من العناصر ، بما في ذلك الخطوط.
لاستخدام أدوات المطور ، تحتاج إلى فتح الصفحة التي تريد معرفة الخط فيها والنقر بزر الماوس الأيمن على النص الذي يهمك. ثم حدد خيار" فحص العنصر " أو عنصر قائمة مشابه. في أدوات المطور ، ستجد معلومات حول أنماط النص ، بما في ذلك الخطوط المستخدمة في الصفحة.
- كيفية تحديد الخط المستخدم على صفحة ويب
- طرق تحديد الخط من خلال المتصفح
- إعدادات المتصفح للكشف عن الخط
- كيفية الحصول على معلومات حول الخط من خلال وحدة تحكم المطور
- استخدام الإضافات لتحديد الخطوط
كيفية تحديد الخط المستخدم على صفحة ويب
يلعب الخط دورا مهما في التصميم المرئي لصفحة الويب. غالبا ما يكون من الضروري معرفة الخط المستخدم في صفحة معينة. في هذا القسم ، سننظر في عدة طرق لتحديد الخط المستخدم.
- عرض شفرة المصدر للصفحة:
- تحتوي معظم المتصفحات الحديثة على أدوات مطور تتيح لك رؤية الأنماط المستخدمة ، بما في ذلك الخطوط. لفتح أدوات المطور ، انقر بزر الماوس الأيمن على الصفحة وحدد "فحص العنصر" أو اضغط على اختصار لوحة المفاتيح
. داخل هذه العلامات يمكنك العثور على معلومات حول الخطوط المتصلة. على سبيل المثال:
استخدام أدوات مطور المتصفح:
السيطرة + التحول + أنا
. ثم حدد علامة التبويب" الأنماط "أو" المحسوبة "وابحث عن خاصية" عائلة الخط " للعنصر المطلوب.
استخدام الأدوات عبر الإنترنت:
هناك أدوات عبر الإنترنت تسمح لك بتحليل الخطوط المستخدمة على صفحات الويب. تحتاج فقط إلى إدخال عنوان ورل للصفحة وستعرض الأداة معلومات حول الخطوط. وتشمل بعض الأدوات شعبية على الانترنت الخط السنجاب ماتشراتور و واتفونتيس.
- باستخدام هذه الطرق ، ستتمكن من تحديد الخط المستخدم على صفحة الويب.
- طرق تحديد الخط من خلال المتصفح
هناك عدة طرق لمعرفة الخط على صفحة الويب ، باستخدام الأدوات المضمنة في المتصفح نفسه:
مفتش العنصر
ملحقات المتصفح
1. مفتش العنصر
مفتش العنصر هو أداة مطور مدمجة في معظم المتصفحات الحديثة. لفتح المفتش ، انقر بزر الماوس الأيمن على الصفحة وحدد "فحص العنصر". في نافذة المفتش التي تفتح ، يمكنك العثور على معلومات حول الخط المطبق على عنصر النص المحدد.
للقيام بذلك ، حدد العنصر المطلوب في التسلسل الهرمي دوم (بنية المستند) ، ثم ابحث عن قسم "الأنماط" أو "الأنماط" في اللوحة اليمنى للمفتش. يسرد هذا القسم جميع الأنماط المطبقة ، بما في ذلك الخط.
2. ملحقات المتصفح
إذا قمت بتثبيت ملحق متصفح مصمم خصيصا لتحليل الخطوط على الصفحة ، فيمكنك استخدامه. على سبيل المثال ، يسمح لك امتداد" واتفونت " لجوجل كروم بتحديد الخط على الصفحة عن طريق تمرير المؤشر فوق عنصر نصي.
لاستخدام هذا الامتداد ، تحتاج إلى تثبيته من متجر تطبيقات المتصفح وتمكينه. بعد ذلك ، عند التمرير فوق النص الموجود على صفحة الويب ، سترى نافذة منبثقة تحتوي على معلومات حول الخط ، بما في ذلك اسمه وحجمه.
في الختام ، عند استخدام هذه الأساليب ، نضع في اعتبارنا أن الخطوط على صفحة ويب يمكن تعيين كل من داخل أنماط كس ومباشرة في ترميز هتمل. عند استخدام مفتش العناصر أو ملحقات المستعرض ، ضع في اعتبارك أنها ستعرض لك فقط الأنماط التي يتم تطبيقها على العنصر المحدد ، ولا تأخذ في الاعتبار الأنماط الموروثة المحتملة من العناصر الأصلية.
- إعدادات المتصفح للكشف عن الخط
- يمكنك استخدام أدوات متصفح الويب المضمنة لتحديد الخط المستخدم في صفحة الويب. للقيام بذلك ، اتبع الخطوات التالية:
- 1. في جوجل كروم:
- افتح صفحة الويب حيث تريد معرفة الخط المستخدم.
انقر بزر الماوس الأيمن على العنصر المطلوب في الصفحة وحدد"فحص".
- في لوحة المطور التي تفتح ، ابحث عن لوحة الأنماط وقم بتوسيعها.
- مرر مؤشر الماوس فوق اسم الخط بالقرب من خاصية" عائلة الخط " وسترى اسم الخط الكامل.
- 2. في موزيلا فايرفوكس:
- افتح صفحة الويب حيث تريد معرفة الخط المستخدم.
- انقر بزر الماوس الأيمن في أي مكان على الصفحة وحدد "عرض رمز العنصر".
في أداة المطور التي تفتح ، ابحث عن علامة التبويب" القواعد "أو" الأنماط".
- ابحث عن القسم الذي يحتوي على وصف العنصر المطلوب وانتقل عبر الخصائص إلى خاصية "عائلة الخط".
- سترى اسم الخط الكامل بجانب قيمة هذه الخاصية.
- 3. في مايكروسوفت إيدج:
- افتح صفحة الويب حيث تريد معرفة الخط المستخدم.
انقر بزر الماوس الأيمن على العنصر المطلوب في الصفحة وحدد"استكشاف".
في نافذة أدوات المطور التي تفتح ، ابحث عن قسم" الصفحة "أو" العنصر".
ابحث عن خاصية" عائلة الخط " وشاهد اسم الخط الكامل.
- باستخدام هذه التعليمات ، يمكنك التعرف بسرعة على الخط المستخدم في صفحة الويب واسمه الكامل.
- كيفية الحصول على معلومات حول الخط من خلال وحدة تحكم المطور
- فيما يلي بعض الخطوات لمساعدتك في العثور على معلومات حول الخط باستخدام وحدة تحكم المطور:
- افتح صفحة الويب التي تهتم بخطها.
- انقر بزر الماوس الأيمن على أي عنصر من عناصر الصفحة وحدد" استكشاف العنصر "أو"فحص".
- تفتح لوحة المطور ، التي تحتوي على شفرة المصدر للصفحة.
- في الجزء السفلي من لوحة المطور ، ابحث عن علامة التبويب الأنماط (أو الأنماط).
- تأكد من تحديد العنصر الجذر للصفحة أو العنصر الذي يحتوي على النص باستخدام الخط الذي تهتم به.
على الجانب الأيمن من لوحة المطور ، سترى الأنماط المطبقة على العنصر المحدد.
ابحث عن خاصية" عائلة الخط "(أو" الخط") التي تحدد الخط المستخدم.
- ستعرض قيمة هذه الخاصية اسم الخط المستخدم في الصفحة.
- الآن أنت تعرف كيفية الحصول على معلومات الخط باستخدام وحدة تحكم المطور. تتيح لك هذه الطريقة تحديد الخط المستخدم على صفحة الويب بسرعة وبدقة.
- استخدام الإضافات لتحديد الخطوط
- واتفونت هو امتداد لمتصفح جوجل كروم الذي يسمح لك لتحديد الخطوط على صفحة ويب. بعد تثبيت الامتداد ، يمكنك تحريك مؤشر الماوس فوق النص والحصول على معلومات حول الخط والحجم واللون.
فونتفيس النينجا هو في المكونات لمتصفحات كروم وفايرفوكس التي تساعد على تحديد الخطوط المستخدمة على صفحات الويب. يسمح لك بمشاهدة معلومات حول الخطوط ، كما يوفر الفرصة لعرضها في الوقت الفعلي.