ربط خطوط الويب باستخدام @font-face. مسألة قانونية لاستخدام الخطوط

نص غامق

نص غامق

أكثر من المعتاد

أقل من المعتاد

مائل

مائل

مع تسطير

شطب

قدرات سمة النمط

بالإضافة إلى العلامات الموصوفة، هناك عدة طرق لتغيير الخط في HTML. أحدها هو استخدام سمة النمط العامة. باستخدام قيم خصائصه، يمكنك ضبط نمط عرض الخطوط:

1) عائلة الخطوط - تقوم الخاصية بتعيين عائلة الخطوط. من الممكن سرد قيم متعددة.
سيتم تغيير الخط في html إلى القيمة التالية إذا لم يتم تثبيت العائلة السابقة على نظام التشغيل الخاص بالمستخدم.

بناء الجملة الكتابة:

عائلة الخط: اسم الخط [، اسم الخط [، ...]]

2) حجم الخط – يتم ضبط الحجم من 1 إلى 7. وهذه إحدى الطرق الرئيسية التي يمكنك من خلالها زيادة الخط في HTML.
بناء الجملة الكتابة:

حجم الخط: الحجم المطلق | الحجم النسبي | معنى | الفائدة | يرث

يمكنك أيضًا ضبط حجم الخط:

• بالبكسل؛
• بالقيمة المطلقة ( xx صغير، x صغير، صغير، متوسط، كبير);
• في المئة؛
• بالنقاط (نقطة).

حجم الخط:7

حجم الخط: 24 بكسل

حجم الخط: x-كبير

حجم الخط: 200%

حجم الخط: 24 نقطة

نمط الخط: عادي | مائل | منحرف | يرث

قيم:

• عادي - التهجئة العادية؛
• مائل - مائل؛
• منحرف - خط مائل إلى اليمين؛
• يرث - يرث تهجئة العنصر الأصلي.

مثال لكيفية تغيير الخط في HTML باستخدام هذه الخاصية:

نمط الخط: وراثة

نمط الخط: مائل

نمط الخط: عادي

نمط الخط: مائل

متغير الخط: عادي | أحرف صغيرة | يرث

مثال لكيفية تغيير الخط في HTML باستخدام هذه الخاصية:

متغير الخط: وراثة

متغير الخط: عادي

متغير الخط: أحرف صغيرة

وزن الخط: غامق|أكثر جرأة|أخف|عادي|100|200|300|400|500|600|700|800|900

قيم:

• غامق - يضبط خط html على غامق؛
• أكثر جرأة - أكثر جرأة بالنسبة إلى وضعها الطبيعي؛
• أخف وزنا - أقل تشبعا مقارنة بالمعدل الطبيعي؛
• عادي - التهجئة العادية؛
• 100-900 – يضبط سمك الخط بالمكافئ العددي.

وزن الخط: غامق

وزن الخط: أكثر جرأة

وزن الخط: أخف وزنا

وزن الخط: عادي

وزن الخط: 900

وزن الخط: 100

خاصية الخط html ولون الخط

الخط هو خاصية حاوية أخرى. داخل نفسه، قام بدمج قيم العديد من الخصائص المخصصة لتغيير الخطوط. بناء جملة الخط:

الخط: حجم الخط عائلة الخط | يرث

يمكن أيضًا تعيين القيمة على الخطوط التي يستخدمها النظام في التسميات الموجودة على عناصر التحكم المختلفة:

• التسمية التوضيحية - للأزرار؛
• أيقونة - للأيقونات؛
• القائمة - القائمة؛
• مربع الرسالة - لمربعات الحوار؛
• تسمية توضيحية صغيرة - لعناصر التحكم الصغيرة؛
• شريط الحالة - خط شريط الحالة.

سأخبرك في هذا المقال التعليمي بكيفية إنشاء الخط الخاص بك لموقع ويب باستخدام الرموز التي أنشأتها بنفسك. كل ما نحتاجه لهذا هو برنامج لإنشاء رسومات متجهة (Adobe Illustrator أو Inkspcape) والوصول إلى الإنترنت، لذا، فلنبدأ! يمكنك تنزيل جميع الصور والأيقونات وخطوط CSS المستخدمة لذلك في نهاية المقالة.

في هذا البرنامج التعليمي سوف نقوم بشيء بسيط. بالنسبة للأيقونة الأولى سنرسم نجمة عادية. بالنسبة للرمز الثاني - نسر بداخله الحرف W. من السهل جدًا الرسم ويمكنك إنشاء أي أشكال ومجموعات. لقد استخدمت المصور لهذه الأغراض.

بعد الانتهاء من الجزء الإبداعي، يجب حفظ إبداعك بتنسيق SVG. انقر فوق "حفظ باسم" وحدد نوع الملف كـ SVG. الآن يمكنك المتابعة مباشرة لإنشاء الخط.

لهذه الأغراض، نستخدم الخدمة الشعبية والمجانية IcoMoon.

أول شيء عليك فعله هو إنشاء مشروع جديد، لذا انقر على القائمة الموجودة في الزاوية اليسرى العليا وانقر على "مشروع جديد". بعد ذلك، نقوم بتحميل ملفات svg الجاهزة لدينا بعد النقر على زر "استيراد الرموز". بعد الانتهاء من هذه الخطوات، يجب أن تشاهد صورة كهذه على شاشتك:

الآن لدينا القدرة على تغيير الكود الخاص بكل أيقونة (في حالتنا سيكون e600 وe601)، واسم الخط، وبادئة CSS، وما إلى ذلك. كل هذا يتم في "التفضيلات". يمكننا أيضًا رؤية الخط أثناء العمل من خلال النقر على الرابط "تمكين الاستخدام السريع" - والذي سيسمح لنا بالحصول على رابط مؤقت للخط الخاص بنا، بالإضافة إلى خيار عرض الكود في CodePen.

بعد تكوين كل شيء، انقر فوق الزر "تنزيل" الموجود أسفل الصفحة وقم بتنزيل الأرشيف. ستجد في هذه الأرشيفات الخط الخاص بك بتنسيقات ttf وeot وsvg وwoff + صفحة تجريبية بالخط.

استخدام الأيقونات الموجودة بالموقع

الآن، كل ما نحتاجه هو تضمين خط CSS باستخدام @font-face، وتحديد المعلمات الأخرى (جميعها مكتوبة في ملف CSS الموجود في الأرشيف الذي قمت بتنزيله.

@font-face ( عائلة الخط: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( عائلة الخط: "wdm-eagle"; تحدث: لا شيء؛ نمط الخط: عادي؛ خط متغير: ارتفاع الخط: 1؛ - التجانس: تدرج الرمادي؛ ) .wdm-star: قبل ( المحتوى: "\e600"; ) .wdm-eagle: قبل ( المحتوى: "\e601"; )

يمكننا الآن استخدام الخط الخاص بنا في كود HTML مثل هذا:

تحديد اسم الفئة للعلامة نحصل على أيقونة لدينا.

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

الخطوط

• Google Fonts هي مكتبة الخطوط المفضلة لدى الجميع. يسمح لك باختيار وتنزيل خطوط مختلفة لجميع المناسبات.
• 1001 خط مجاني - مكتبة الخطوط. يتميز بسهولة التنقل - حيث يتم فرز الخطوط أبجديًا وحسب النوع. يوجد قسم للخطوط الروسية.
• Fontstruct هو مصمم خطوط عبر الإنترنت. أداة بسيطة للغاية تسمح لك بإنشاء الخط الخاص بك. لا يمكنك الرسم باستخدام المربعات القياسية فحسب، بل يمكنك أيضًا الرسم باستخدام أشكال أخرى مثل النقاط والزوايا المستديرة وما إلى ذلك. بالنسبة للمبتدئين، فهي أداة مثالية لمحاولة رؤية الطباعة أثناء العمل.
• Font Squirrel هي واحدة من أكبر مكتبات الخطوط. بالإضافة إلى ذلك، يمكنك تحميل صورة والحصول على أسماء الخطوط المستخدمة فيها. يوجد متجر للخطوط وحتى متجر لبيع الملابس به شعارات.
• Type Light هو محرر خطوط كامل المواصفات. يسمح لك بإنشاء وتحرير وتحويل خطوط OpenType وTrueType وPostScript. يحتاج إلى تحميل وتثبيت. الإصدار المجاني له وظائف محدودة مقارنة بالإصدار المجاني. لكن يكفي إنشاء خط بسيط.
• What Font هي خدمة عبر الإنترنت لاختيار خطوط موقع الويب. نقوم بتنزيل ملف الخط، ونشير إلى عنوان URL للموقع ونرى كيف سيبدو الخط الذي تم تنزيله على الموقع. خدمة مريحة.
• 1001 خط – مكتبة الخطوط (أكثر من 15000 خط). سهولة التنقل – يمكن تحديد الخط حسب الحجم والنوع والموضوع والتصميم وما إلى ذلك. تسمح لك القائمة بتخصيص المخرجات، مما يجعل من الممكن رؤية كل خط في خيارات مختلفة: الحجم، والنمط، وما إلى ذلك.
• Font Flame هي خدمة عبر الإنترنت لاختيار زوج من الخطوط المتوافقة. إنه يعمل بكل بساطة - توجد في الصفحة الرئيسية ورقة تحتوي على نقشين مصنوعين بخطوط مختلفة. إذا أعجبتك، فانقر على "حب" وإذا لم تعجبك، فانقر على "أكره". ثم يمكنك عرض تلك المحددة مرة أخرى. يؤدي النقر فوق اسم الخط إلى فتح خطوط Google.
• Typecast – اختيار الخط للنموذج الأولي. يمكنك أن ترى كيف سيبدو الخط على أي جهاز. من الضروري تحديد أنواع مختلفة من النص - العناوين وعلامات الاقتباس وما إلى ذلك. يمكنك اختيار محرف وحجم ونمط وتعيين المسافات البادئة. سترى صفحتك المستقبلية في الخطوط التي قمت بتثبيتها. الميزة الإضافية الكبيرة هي اختيار التخطيط (عمود واحد أو عدة ترتيبات مختلفة للكتل).
• Wordmark - يسمح لك بتحديد الخط المثبت على جهاز الكمبيوتر الخاص بالمستخدم للنص أو الشعار أو العنوان. عند إدخال نص في حقل، فإنه يظهره بخطوط مختلفة. يمكنك اختيار الحجم والتسجيل والعرض باللونين الأبيض والأسود أو العكس. يتم نشر الخيارات التي تفضلها على Twitter أو Facebook - حسب اختيار المستخدم. يمكن إرسالها عن طريق البريد الإلكتروني.

صور المخزون

• Unsplash هو مخزون من الصور يتم تحديثه باستمرار. وتنقسم المجموعات إلى موضوعات. يمكنك العثور على أي شيء من "الأمريكيين من أصل أفريقي" إلى "الطبيعة". كل صورة لها تصنيفها الخاص، يمكنك رؤية الأفضل أو الجديد.
• FoodiesFeed - صور الطعام. يتم تقسيم الصور إلى فئات. يمكنك اختيار أفضل الأيقونات والنماذج بالحجم الطبيعي والحصرية وما إلى ذلك.
• صور Refe المجانية - قائمة ضخمة من صور "الحياة الواقعية". التصوير الفوتوغرافي للمناظر الطبيعية والطبيعة بشكل رئيسي. التنقل غير مريح، تظهر جميع الصور الموجودة على الصفحة الرئيسية عند التمرير.
• Little Visuals – صور عالية الجودة للمناظر الطبيعية والمباني. يمكنك تنزيل أرشيف يضم أفضل الصور المنشورة خلال الأسبوع. يتم تصنيف الصور باستخدام علامات التصنيف، ولكن لا يتم تصنيفها.
• Gratisography هي مكتبة ضخمة من الصور المجانية. جميع الصور مقسمة إلى ستة مواضيع: الأشخاص، والتجهم، والمدن، والأشياء، والطبيعة، والحيوانات. يمكنك البحث عن طريق الكلمات.
• الموت للألبوم – صور مخزنة. لا يمكنك فقط أن تنظر وتختار. يقومون بالاختيار قبل شهر ويتيحون لك تنزيله بعد إدخال بريدك الإلكتروني. يزن الأرشيف حوالي 11 ميغابايت. يتم إرسال أفضل الصور ورابط التحميل عبر البريد الإلكتروني.
• فائق الشهرة – مجموعة كبيرة من الصور من زاوية غير عادية. المجموعة صغيرة ولكنها مثيرة للاهتمام.
• مكتبة الأنماط - الأنماط والقوام. المجموعة كبيرة جدًا، والقوالب غير عادية. يتم استبدالها بالتمرير، وتدريجيا. يمكنك أن ترى كيف سيبدو القالب على الشاشة بأكملها أو جزء منها.
• مخزون قديم جديد – صور قديمة من الأرشيف. هناك عدد قليل من الصور المجانية، ولكن تظهر صور جديدة بانتظام.
• Pexels – عدد كبير من الصور لجميع المناسبات. وهي مقسمة حسب الموضوع، من السهل جدًا البحث عنها.
• جاي مانتري - مجموعة كبيرة من الصور. لا يوجد تصنيف على هذا النحو، يمكنك الاطلاع عليه حسب الشهر.

رسومات الأسهم

• Brusheezy – فرش وقوالب وأنسجة مجانية والمزيد للفوتوشوب. 12 فئة، ولكل منها فئات فرعية. الاختيار ضخم.
• Iconfinder – أيقونات، مدفوعة ومجانية. يمكنك التنزيل بتنسيقات ICO وPNG وICNS وSVG.
• Brushez عبارة عن مجموعة كبيرة من فرش Photoshop. بالإضافة إلى ذلك، هناك أيضًا ناقلات أولية وأشكال وقوالب وأنماط. وينقسم كل قسم إلى أقسام فرعية. على سبيل المثال، هناك أكثر من 20 فئة للفرش.
• Vecteezy هي مكتبة للرسومات المتجهة، بما في ذلك الصور والرسوم التوضيحية. عدد كبير من الفئات وعدد كبير من الرسومات.
• Iconbird هي خدمة بحث عن الأيقونات باللغة الروسية. يمكنك إدخال موضوع والحصول على مجموعة من الرموز، أو يمكنك التصفح حسب الفئة.
• Icons8 هي خدمة باللغة الروسية تقدم أكثر من 42000 أيقونة حول مواضيع مختلفة.

الرسوم البيانية

• Vizualize هي خدمة عبر الإنترنت لإنشاء الرسوم البيانية "نبذة عني". يقوم بشكل أساسي بإنشاء سيرة ذاتية رسومية.
• Canva هي أداة بسيطة لإنشاء أي تصميم. يتيح لك تصميم عرض تقديمي وملصق ونشر على الشبكات الاجتماعية والكتب والرسائل والمواد وغير ذلك الكثير. كل شيء يتم بناءً على القوالب، ويتغير النص. ولكن هناك الكثير من القوالب للاختيار من بينها.
• بسهولة - إنشاء الرسوم البيانية على أساس القوالب. يتيح لك المحرر المدمج عبر الإنترنت تغيير التصميم ووضع عناصر إضافية وتغيير النص.
• Infogram هي خدمة عبر الإنترنت لإنشاء الرسوم البيانية والرسوم البيانية التفاعلية. ليست كل الوظائف متاحة؛ سيكون عليك شراء حساب.
• Visage هي أداة بسيطة لإنشاء أي محتوى مرئي (الرسوم البيانية، الرسوم البيانية، صور المدونات، وما إلى ذلك). الكثير من القوالب، محرر بسيط. يتم دفع بعض الميزات.
• Gliffy هي خدمة عبر الإنترنت لإنشاء الرسوم البيانية. يعمل المحرر على مبدأ Microsoft Visio.
• Visme هي أداة عبر الإنترنت لإنشاء العروض التقديمية والرسوم البيانية. أكثر من 1000 قالب. يتيح لك المحرر إضافة نص (العناوين، والقوائم، والاقتباسات والعادية)، والنص المتحرك والأدوات. في الحساب المجاني يمكنك تنزيله كملف JPG.
• Piktochart - قم بإنشاء رسومات عالية الجودة - عروض تقديمية أو رسوم بيانية أو مواد مطبوعة. تحميل PNG، JPG بأحجام مختلفة.
• Drawio هي خدمة ملائمة عبر الإنترنت لإنشاء الرسوم البيانية. يمكنك الحفظ في صندوق الإسقاط والخدمات المماثلة، أو على القرص.
• Venngage – سهولة إنشاء الرسوم البيانية والملصقات والتقارير والمواد للشبكات الاجتماعية، وما إلى ذلك. في النسخة المجانية، يوفر فقط رابطًا للنشر. عليك أن تدفع مقابل التنزيل.
• Cacoo هي خدمة عبر الإنترنت لرسم المخططات وخرائط الموقع. ربما الأفضل من حيث الإمكانيات. عدد كبير من الأدوات والقوالب. يمكنك التصدير إلى PNG، PDF، SVG، PPT، إلخ.
• Creately هي خدمة رسم تخطيطي عبر الإنترنت. متاح للنشر فقط. هناك رسوم للتنزيل.
• Lucidchart هي خدمة عبر الإنترنت لإنشاء المخططات والرسومات. من الممكن استيراد رسم تخطيطي لـ Microsoft Visio. التصدير إلى PDF، PNG و JPG. الوظائف المدفوعة متاحة.

الألوان

• البحث عن الألوان - اختيار مجموعات الألوان. يمكنك اختيار ما يصل إلى أربعة ألوان. هناك حلول جاهزة للاختيار من بينها.
• TinEye – يقوم بتحليل الموقع ويعرض قائمة بالموارد التي تستخدم صورة من الموقع.
• ColorZilla – يسمح لك بإنشاء الألوان والتدرجات. يعرض خصائص CSS لهم.
• Adobe Color CC – إنشاء أنظمة الألوان.
• Colicious – اضغط على مفتاح المسافة وقم بإنشاء لون جديد.
• نظام الألوان - اختيار أنظمة الألوان. هناك نسخة باللغتين الإنجليزية والروسية. يسمح لك باختيار الألوان للموقع. لديه ضبط دقيق ويظهر رمز اللون. في النهاية، يسمح لك بعرض الصفحة بنظام الألوان المحدد. أكبر ميزة هي عرض النطاق من حيث انحراف إدراك اللون. كما يسمح لك باختيار نماذج ألوان مختلفة. يحفظ Gimp وCSS وPNG وما إلى ذلك في لوحة الألوان. يحتوي على محول ألوان للتحويل من نموذج لون إلى آخر.
• Paletton هي أداة لإنشاء مجموعات الألوان. لا يختلف عن نظام الألوان.
• Pictaculous – لتحليل لوحة صور PNG أو JPG أو GIF. قم بتحميل صورة واحصل على مجموعة من جميع الألوان الموجودة فيها.
• أداة Hex Color Tool – أداة اختيار اللون. استخدم أشرطة التمرير لضبط اللون، ويمكنك اختيار السطوع. ثم يتم حفظ اللون المحدد. يمكنك اختيار لوحة.
• (Un)clrd هو مكون إضافي للمتصفح يزيل جميع الألوان ويترك الموقع باللونين الأبيض والأسود.
• BrandColors - أكبر مجموعة من رموز الألوان الرسمية للعلامة التجارية. حدد اسم العلامة التجارية وقم بتنزيل أسماء ألوانها بما في ذلك ملف css.
• Colortyper - اختيار الألوان من زاوية غير عادية. تعرض الشاشة رموز متعددة الألوان متقاطعة. نتيجة التقاطع لون جديد. تبدو مثيرة للاهتمام.

إلهام

• Dribbble - أكبر مجتمع للمصممين. العمل والمجتمع والتواصل - يمكنك العثور على أي شيء هنا.
• Freebbble - قوالب وتصميمات من Dribbble. يمكن تنزيل بعض الأشياء مجانًا، ويمكن شراء بعضها الآخر. يمكنك العثور على قوالب لنظام إدارة المحتوى (CMS) والمصممين والأيقونات والنماذج بالحجم الطبيعي وقوالب مواقع الويب المصممة وغير ذلك الكثير.
• Muzli - إلهام التصميم اليومي. مورد للمصممين مع أمثلة للأعمال الأكثر غرابة.
• Awwards - أفضل تطورات المصممين. نظمت كموقع التصويت المجتمعي. يتم تحديد موقع اليوم والشهر والسنة وما إلى ذلك بعدد كبير من التصميمات ومقاطع الفيديو والتطورات.
• Design You Trust هو مجتمع من المصممين الذين يشاركون أحدث الاتجاهات والأخبار والمحافظ والتصميمات والإعلانات الإبداعية.
• رسائل بريد إلكتروني جيدة حقًا - مجموعة ضخمة من رسائل البريد الإلكتروني المصممة جيدًا. اختر قالبًا واحصل على أكواد html وcss وjs الخاصة به. يمكنك تغيير النص والصور وما إلى ذلك.
• فوبيز – منشورات في مجال التصميم والإبداع. يمكنك العثور على الصور والتصميمات والرسومات ومقاطع الفيديو وما إلى ذلك. كل شيء مقسم إلى فئات.
• Designspiration عبارة عن مجموعة من التصميمات المستوحاة من موقع Pinterest. عدد كبير من الأفكار والأمثلة - الطباعة والشعارات والحروف وأكثر من ذلك بكثير.
• Behance عبارة عن مجموعة من المحافظ من المحترفين. يمكنك ترك وظيفة شاغرة أو السيرة الذاتية.
• أنماط الجوال – مكتبة لقطات الشاشة لنظامي التشغيل iOS وAndroid. كل شيء مقسم إلى أقسام. يمكنك العثور على العديد من الأفكار.
• One Page Love هو معرض لأفضل تصميمات صفحات الويب. يمكنك شراء القوالب والموضوعات. هناك أيضا تلك المجانية.
• Uispace هو مورد للمصممين. يمكنك تنزيل ملفات psd، والرسم، والخطوط، والنماذج بالحجم الطبيعي، وما إلى ذلك مجانًا.

محرري الجرافيك

• DAZ 3D - النمذجة ثلاثية الأبعاد. قم بالتسجيل وتنزيل تطبيق سطح المكتب.
• Gimp هو نسخة مجانية من برنامج Photoshop. يتيح لك تخصيص شبكة معيارية، وإنشاء أدلة، والعمل مع الطبقات، وإضافة تأثيرات، وما إلى ذلك. إنه بديل مجاني جيد لبرنامج Photoshop. إنه قابل للتوسعة - يمكنك تنزيل مكونات إضافية.
• Blender - النمذجة ثلاثية الأبعاد، الرسوم المتحركة، العرض، الصوت، الفيديو. يسمح لك بإنشاء الألعاب. محرر سريع النمو، يحظى بشعبية كبيرة.
• Aviary هي خدمة لتحرير الصور عبر الإنترنت. العديد من الخيارات، بما في ذلك تأثير العين الحمراء وتغيير الحجم وما إلى ذلك.
• Pixlr هو محرر صور عبر الإنترنت ومحرر رسومات منفصل. الاخير يشبه الفوتوشوب يحفظ على القرص.
• BeFunky هي خدمة لتحرير الصور عبر الإنترنت. التأثيرات والإطارات والرسومات والتنقيح وغير ذلك الكثير. هناك واجهة باللغة الروسية.
• إنكسكيب هو محرر رسومات متجهة كامل ومفتوح المصدر. يدعم إمكانيات تنسيق SVG - العمل مع الأشكال، والملامح، والنص، وتوجيه الرسومات النقطية، وما إلى ذلك. بالإضافة إلى معالجة الصور المتجهة، فإنه يسمح لك بإنشاء قالب موقع ويب وقطعه - توجد شبكة معيارية. يسمح لك برسم الخلفيات واللافتات والشعارات المتجهة وما إلى ذلك.
• IconEdit2 هو برنامج بسيط للغاية لرسم الأيقونات. لديه المرشحات. يسمح لك بتصدير صورة لأجهزة Android وApple. يمكنك ضبط عمق الألوان وتدوير وضبط الأيقونة. يدعم الشفافية والصور المتعددة لكل ملف ICO ومكافحة التعرج في جميع أدوات الرسم.
• Falco GIF Animator هو برنامج لإنشاء رسوم متحركة إطارًا بإطار وأيقونات متحركة. يمكنك تنزيل العديد من البرامج المختلفة على المورد.
• Krita هو محرر سطح مكتب احترافي مفتوح المصدر. متاح لأنظمة تشغيل مختلفة.
• Boxy-SVG هو محرر رسومات متجهة يشبه Adobe Illustrator وSketch وInkscape.
• Photopos هو برنامج متعدد الوظائف، مع وظائف محرر الصور ومحرر الرسومات وتطبيق لإنشاء رسومات الكمبيوتر.
• 5Dfly هو تطبيق مجاني لمعالجة الصور دفعة واحدة. يمكن إنشاء عروض الشرائح باستخدام برنامج PowerPoint. يمكنك تنزيل محول PDF بشكل منفصل.
• PaintStar هو محرر صور مجاني. الواجهة مشابهة جدًا لـ Paint، ولكنها تحتوي على المزيد من الخيارات. الطبقات مثلا.
• PhotoScape هو محرر صور بسيط. يحتوي على وظائف لضبط السطوع واللون، وتوازن اللون الأبيض، وتصحيح الإضاءة الخلفية، والإطارات، والبالونات، ووضع الفسيفساء، وإضافة نص، ورسم الصور، والاقتصاص، والمرشحات، وإزالة العين الحمراء، والتلوين، والفرشاة، وختم الاستنساخ، وفرشاة التأثير، وما إلى ذلك.

أهلاً بكم! اليوم، كجزء من قسم تصميم الويب، أريد أن أتحدث عن الخطوط التي يجب استخدامها عند تطوير موقع ويب.

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

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

في هذه المقالة لا أعتبر الخطوط من أنظمة التشغيل الأخرى. يجب أن يعرف مصمم التخطيط ذو الخبرة مقارنة الخطوط في أنظمة التشغيل المختلفة، وأثناء التخطيط سوف يكتب هذه النقطة في أنماط CSS.

بشكل أساسي، عند تطوير جزء المحتوى من التصميم، يتم استخدام نوعين من الخطوط:

• الخطوط الرقيقة
• الخطوط بلا الرقيق

الخطوط الشريفة- الخطوط (الإنجليزية serif - serif) التي يبدأ نمطها وينتهي بالسكتات الدماغية. على سبيل المثال تايمز نيو رومان.

الخطوط بلا الرقيق(الخطوط المقطعة) - (الإنجليزية sans-serif - sans serif) الخطوط ذات الخطوط المستقيمة الصارمة بدون الرقيق. على سبيل المثال اريال.

يمكنك أدناه رؤية لقطة شاشة لخطوط serif وsans serif.

الخطوط المستخدمة في تصميم المواقع:

• اريال
• اريال بلاك
• اريال ضيق
• كتاب انتيكوا
• القرن القوطي
• هزلية بلا MS
• ساعي جديد
• فرانكلين القوطية المتوسطة
• جورجيا
• تأثير
• وحدة تحكم لوسيدا
• لوسيدا بلا يونيكود
• مايكروسوفت بلا شريف
• بالاتينو الخط الخطي
• سيلفان
• تاهوما
• تايمز نيو رومان
• منجنيق MS
• فيردانا
• Webdings (رموز وعلامات مختلفة)
• Wingdings (رموز وعلامات مختلفة)

أود أيضًا أن أشير إلى شيء مثل عدم وجود الخط المائل في عدد من الخطوط؛ فبدلاً من الخط المائل، يتم استخدام الخط المائل، مما يجعل قراءة النص صعبة.

من الخطوط القياسية في Windows التي لا تحتوي على أحرف مائلة:

• اريال بلاك
• هزلية بلا MS
• فرانكلين القوطية المتوسطة
• تأثير
• وحدة تحكم لوسيدا
• لوسيدا بلا يونيكود
• مايكروسوفت بلا شريف
• سيلفان
• تاهوما

وبما أنني ذكرت الخطوط التي لا تحتوي على أحرف مائلة، أود أيضًا أن أشير إلى حقيقة أن هناك خطوطًا تكون في البداية خطوطًا عريضة. لهذه الأسباب، لا فائدة من استخدام الأنماط التي تشير إلى الخط الغامق، لأن النتيجة لن تكون ما نحتاجه.

هناك عدد كبير من الطرق للعثور على الخط المناسب لموقعك على الويب. على سبيل المثال، يمكنك استخدام الخدمات التي تحتوي على مكتبات خطوط ضخمة تتطلب اشتراكًا مدفوعًا.

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

1. مونتسيرات

مع تطور الطباعة، فإنها تبتعد عن الملصقات واللافتات الحضرية القديمة. حاولت منشئة هذا الخط الحفاظ على جمال طباعة الملصقات الحضرية التي شاهدتها في شوارع بوينس آيرس.

2. أبريل فاتفيس

يعد Abril Fatface جزءًا من عائلة خطوط كبيرة تأتي في 18 نمطًا تم إنشاؤها لأغراض مختلفة. يتمتع هذا الخط بحضور قوي وأنيق، مما يجعله حلاً رائعًا لإنشاء عناوين جذابة. غالبًا ما يتم دمجه مع Lato وOpen Sans وDroid Sans.

3. عرض بلاي فير

نظرًا لارتفاع x الكبير والخطوط الصغيرة للأحرف، فإن Playfair Display مناسب أيضًا لكتابة العنوان، خاصة إذا كانت المساحة محدودة. إنه يتزاوج جيدًا مع جورجيا وغالبًا ما يستخدم مع أوزوالد ولاتو وأرفو.

4. جي تي والشيم

يُستخدم GT Walsheim في العديد من المدونات اليوم، وهو يمثل الشكل الهندسي sans serifs وهو جزء من عائلة Grilli Type. يتعين عليك الدفع مقابل مجموعة كاملة من الخطوط، لكن Grilli Type يقدم نسخة تجريبية مجانية من GT Walsheim.

5. ميريويذر

إذا كانت سهولة القراءة على الشاشة تمثل أولوية لمشروعك، فاطلع على Merriweather، الذي تم إنشاؤه لهذا الغرض. بالإضافة إلى ذلك، يتم تحسين هذا الخط باستمرار.

6. جوزفين سانس

Josefin Sans مستوحى من التصميم السويدي العتيق ويتميز بجماليات هندسية أنيقة.

7. الجاذبية واحد

يعتمد Gravitas One على عبارة "UK Fat Face"، وهو خط إعلاني جريء ظهر خلال الثورة الصناعية في إنجلترا. يبدو هذا الخط رائعًا في الحجم المتوسط ​​إلى الكبير وهو مناسب للعناوين والعناوين وعلامات التبويب.

8. جورا

تكرر حروف هذا الخط أشكال حرف Kaya-li. ويحتوي أيضًا على رموزًا للأبجدية السيريلية واليونانية. ويتوفر بالأوزان الخفيفة والعادية والمتوسطة والجريئة.

9. الدوري القوطي

تم تصميم League Gothic في الأصل بواسطة Morris Fuller Benton لصالح شركة American Type Founders Company في عام 1903، وقد وجد استخدامًا جديدًا مع التحديث وإضافة حروف رسومية جديدة.

10. المضيق البحري

Fjord هو خط serif تم إنشاؤه في الأصل للكتب المطبوعة وهو مناسب بشكل خاص لملاءمة النص الطويل في تنسيق طباعة صغير. يمكن استخدامه لإنشاء كمية كبيرة من المحتوى النصي على الموقع، حيث يتمتع الخط ببنية واضحة وخطوط رفيعة بارزة ورؤوس وأقدام طويلة وأنيقة.

11. قطيفة

تتميز عائلة الخطوط Amaranth بتصميم مائل غير مائل مع القليل من التباين والمنحنيات الملحوظة. تتناسب أنماط Amaranth الثلاثة بشكل جيد مع أي خط آخر تقريبًا. يمكنك اللعب بهذا الخط - قم بالتجربة واختيار الأفضل.

12. بولي

تم إنشاء هذا الخط متوسط ​​التباين في الأصل للغة Wayuunaiki الأصلية، والتي تتطلب حروفًا رسومية واسعة. تتميز بسيقان صغيرة وارتفاع x كبير، مما يجعلها مفيدة بشكل خاص في الأحجام الصغيرة.

13. الجنتيوم الأساسي

تم إنشاء هذا الخط كخط متعدد اللغات، بما في ذلك الحروف اللاتينية واليونانية، بالإضافة إلى الدعم السيريلي والمتقدم في إصدار Gentium Plus. يتوفر Gentium Basic وGentium Book Basic في إصدار ويب مجاني، لكنهما يقتصران على الأبجدية اللاتينية فقط.

14. فتح بلا

Open Sans هو ممثل للبشرية الإنسانية. هذا الخط واضح للغاية ويتكيف مع واجهات الويب والجوال. وهو خط غير مائل ذو نمط بسيط من الحروف، ويتميز بمظهر محايد ولكنه لطيف بدرجة كافية بحيث يمكن استخدامه لمجموعة متنوعة من الأغراض.

15. دفتر الأستاذ العادي

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

16. سيجنيكا

يمثل خط الويب المجاني هذا خط sans serif. يسمح التباين المنخفض والارتفاع x المرتفع لـ Signika بالعرض بشكل جيد على الشاشة. تتضمن المجموعة الواسعة من الرموز الرموز والصور التوضيحية والأسهم.

17. جوزيفين سلاب

تم إنشاء Josefin Slab وفقًا لقوانين الخط الهندسي النموذجي في ثلاثينيات القرن العشرين، مع إضافة ميزات إسكندنافية، ويتميز بخصائص الخط اللوحي ويذكرنا بخط الآلة الكاتبة. ومن المثير للاهتمام أن ارتفاع x هو نصف ارتفاع الحرف الكبير.

18. المنتدى

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

تم تسمية Tikal Sans على اسم إحدى أشهر مدن المايا، وتتميز بسمات الحروف الرسومية التي استخدمت في كتابة حضارة أمريكا الجنوبية. اختار منشئه ارتفاعًا كبيرًا على شكل x، مما يمنح الخط مظهرًا عصريًا وله تأثير مفيد على وضوحه، كما تتيح المجموعة الكبيرة من الأنماط استخدامه لمجموعة متنوعة من الأغراض.

20. أرفو

يناسب هذا الخط الهندسي كلاً من الطباعة والويب، ويتوفر باللون الروماني والمائل والروماني الغامق والغامق المائل. يعمل التباين المنخفض لـ Arvo على تحسين إمكانية قراءته على الشاشة.

21. بيفان

تم إنشاء Bevan بناءً على خط البلاطة التقليدي في الثلاثينيات. تمت ترقيم الحروف وإعطائها شكلًا جديدًا وتحسينها لإصدار الويب. يعد هذا أحد الخطوط القليلة جدًا والجريئة المناسبة لمواقع الويب.

22. المعيار القديم TT

يعتمد Old Standard TT على الخط الحديث serif، الذي كان شائعًا في أواخر القرن التاسع عشر وأوائل القرن العشرين ثم تم نسيانه لفترة طويلة. هذا الخط مناسب لإضافة نمط إلى نوع معين من المحتوى، مثل البحث العلمي أو النصوص باللغة اليونانية أو السيريلية.

23. كريون

يعد هذا الخط serif مثاليًا لمواقع الويب والمدونات الإخبارية، ويشترك أيضًا في خصائص الخط slab، لكن توازنه وتباينه المنخفض يجعلان من Kreon أكثر شخصية بشكل ملحوظ.

24. الروبوت بلا

تم تحسين Droid Sans لتحقيق أقصى قدر من سهولة القراءة حتى في الواجهات الصغيرة، مثل القوائم الموجودة على شاشات الهاتف المحمول. هذا خط محايد وغير مائل بأشكال حروف بسيطة ومفتوحة.

25. الإيطالية

كان منشئ هذا الخط مستوحى من الخط الإيطالي الكلاسيكي، لذا سيكون الخط مفيدًا جدًا للمشاريع التي تحتاج إلى إضافة الأناقة فيها. يعد موقع Italiana مناسبًا أيضًا لكتابة عناوين الأخبار بالتنسيق المطبوع والإلكتروني.

26. فولكورن

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

27. ممثل

يحتوي هذا الخط على ارتفاع x كبير بشكل خاص، مما يتطلب مساحة كبيرة جدًا. كما يتميز الممثل بأسلوب قديم لبعض الشخصيات، مثل الأرقام 6 و9.

مع جذور تعود إلى القرن السادس عشر، أصبح الخط الإنساني Garamond رمزًا مطبعيًا حقيقيًا، وغالبًا ما يكون بمثابة الأساس لإنشاء الخطوط الحديثة، بما في ذلك EB Garamond.

31. أوبونتو

تم إنشاء Ubuntu Grotesque لتخصيص نص الويب على كل من أجهزة سطح المكتب والأجهزة المحمولة. يتم تشجيع المستخدمين على تجربة هذا الخط وتعديله وتحسينه كما يرونه مناسبًا.

32. روزاريو

Rosario هي لعبة بلا رقيق إنسانية كلاسيكية مثالية لتصميم فقرات النص.

33. روبوتو بلاطة

يعد Roboto Slab أحد الخطوط من عائلة Roboto. نسخة الكتلة ملفتة للنظر بشكل خاص بأشكالها الهندسية ومنحنياتها المفتوحة. إنها مناسبة أيضًا لشاشات الأجهزة والإصدارات المطبوعة من النصوص.

34. أوزوالد

الخط عبارة عن نسخة معدلة من الخط الكلاسيكي Alternate Gothic sans serif. تم تحديث Oswald مؤخرًا ليأتي بمجموعة متنوعة من الأوزان ومجموعة أحرف موسعة وتقنين أفضل.

35. الجمود

Stalemate هو خط أنيق مكتوب بخط اليد مع بعض الذوق العتيق. إنها مناسبة لإنشاء لهجات وتخصيص موقع الويب الخاص بك.

36. نص قرمزي

يمكن استخدام هذا الخط النسبي الكلاسيكي المصمم بعناية لعرض كميات كبيرة من النصوص وعناوين الكتابة.