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