إذا كان هناك شيء واحد أكثر أهمية للعلامة التجارية لموقع الويب الخاص بك ومظهره ، فقد يكون مجرد الخطوط. يمكن أن ينقل الخط الذي تم اختياره بعناية الشخصية ، ويجعل المقاطع الطويلة من النص أكثر وضوحًا ، ويقوي علامتك التجارية في أذهان الناس.
لكن لا يمكنك فقط تنزيل أي خط قديم واستخدامه على موقع الويب الخاص بك. هناك عدد غير قليل من الأشياء التي يجب مراعاتها أولاً.
أين يمكنك العثور على خطوط الويب ، وما هي الخطوط المتوافقة مع HTML ، وأيها “آمن للويب” ويمكن استخدامه على أي موقع ويب؟ سوف نستكشفهم جميعًا في هذه المقالة.
هيا نبدأ!
تتمتع الخطوط بتاريخ ثري ، لكن الخطوط ، كما نعرفها اليوم ، دخلت حيز الاستخدام على نطاق واسع مع ظهور أجهزة الكمبيوتر والإنترنت. احتاجت الخطوط الرقمية إلى معاملة خاصة لتقديمها على الشاشات. وعندما دخلت أحجام الشاشات والأجهزة المختلفة حيز التنفيذ ، أصبحت الأمور أكثر تعقيدًا.
تعرض الصفحة الرئيسية لخطوط Google أشهر خطوط الويب
Google Fonts عبارة عن مجموعة من خطوط الويب العصرية
عندما يتعلق الأمر بالخطوط الرقمية ، فهناك عدة أنواع مختلفة. بعض الخطوط مخصصة بشكل أساسي للطباعة وتصميم الرسوم. تميل هذه إلى أن تكون كبيرة وغير مناسبة لمواقع الويب ، ولكنها مثالية لإنشاء الرسومات. توجد أيضًا خطوط “ويب آمنة” موجودة في غالبية الأجهزة.
ولكن بالنسبة لتصميم الويب ، ما تحتاج إلى البحث عنه هو خطوط الويب ، والمحارف المصممة خصيصًا لتقديمها بشكل مثالي على الويب وعبر مجموعة متنوعة من الأجهزة. يمكنك أيضًا استخدام خطوط الويب في رسائل البريد الإلكتروني أو الخدمات الأخرى عبر الإنترنت.
هناك بعض الأشياء التي تجعل خطوط الويب مختلفة عن خط سطح المكتب القياسي القابل للتنزيل. على سبيل المثال ، غالبًا لا يمكن استخدامها مع البرامج الموجودة على جهاز الكمبيوتر الخاص بك ؛ يجب تحميلها على الخادم واستخدامها على الويب.
كما أنها مصممة لتكون مقروءة على شاشات مختلفة وبأحجام مختلفة. يمكن تصميمها باستخدام CSS (مثل تطبيق الخط الغامق أو المائل والألوان والسمات الأخرى) وتقديم الدعم لشروط أخرى مثل العرض من اليمين إلى اليسار.
بينما لا يتم تثبيت خطوط الويب على أجهزتك أو أجهزة زوارك ، إلا أن هناك طرقًا خاصة لعرضها حتى يتمكن أي شخص يزور موقعك من رؤيتها.
يمكنك إما تنزيل هذه الخطوط كالمعتاد وتحميلها على الخادم الخاص بك ، أو استخدام خدمة استضافة خطوط ويب خاصة تقوم بتضمينها على موقعك دون الحاجة إلى التنزيل.
إذا كنت تهتم بالعلامة التجارية لموقعك ومظهره ، فإن التأكد من استخدام خط آمن للويب يعد خطوة حاسمة في عملية التصميم الخاصة بك. ✨ ابحث عن 10 خيارات رائعة هنا 👇
انقر للتغريد
لا يُقصد استخدام بعض الخطوط على الويب ، ولكن ما الذي يمكن إدراجه في موقع HTML الخاص بك؟
بشكل أساسي ، يمكنك استخدام أي خط قابل للتنزيل على موقعك. كل ما عليك فعله هو تحميله وتكوينه بشكل صحيح ، ويجب أن يتم عرضه على موقع الويب الخاص بك.
مثال على خط خربشة
خط الخربشة ليس عمليًا لصفحات الويب
ولكن بينما يمكنك استخدام أي خط تقنيًا على موقعك ، فإنها ليست دائمًا أفضل فكرة. يجب أن تبحث تحديدًا عن خطوط الويب ، وليس الخطوط التي يُراد استخدامها في الطباعة أو تصميم الرسوم. بعض الخطوط منمقة جدًا أو مخصصة لمثل هذه الأحجام النصية الكبيرة بحيث لا يتم عرضها بشكل صحيح على موقعك. مع خط الويب ، هذا ليس مصدر قلق.
هناك أيضًا مشكلات في الترخيص يجب القلق بشأنها عند استخدام خطوط سطح المكتب على موقعك (أو استخدام خطوط الويب لتصميم الطباعة). يمكن أن يؤدي استخدام خط في وسيط مختلف عن الذي اشتريته من أجله إلى وقوعك في مشكلة. تأكد من قراءة ترخيص الخط الخاص بك بعناية قبل شرائه.
يمكنك أيضًا البحث عن مضيفين معينين يسمحون لك باستخدام مكالمة بسيطة في HTML لعرض خطوطهم على موقع الويب الخاص بك من خلال خطط مجانية أو مدفوعة.
في كلتا الحالتين ، طالما تم تحميل الخط الذي تستخدمه بشكل صحيح ولديه نوع الملف الصحيح:
TTF
OTF
WOFF / WOFF2
SVG
EOT
باستخدام أنواع ملفات الخطوط هذه ، ستتمكن بعد ذلك من استخدامها في جميع أنحاء موقعك وتصميمه باستخدام HTML و CSS.
هناك أيضًا خطوط ويب آمنة تعمل عادةً بشكل عام عبر جميع المتصفحات والبرامج.
تتمثل إحدى المشكلات في معظم خطوط الويب في عدم وجود ضمان لعرضها بشكل صحيح على موقع الويب الخاص بك. على عكس تصميم الرسوم ، حيث يمكنك فقط إنشاء صورة في برنامج وطباعتها للتوزيع ، يجب أن يعرض المتصفح خطوط الويب في كل مرة يفتح فيها أي شخص الصفحة. إذا فشل تحميل الخطوط الخاصة بك ، فقد ينتهي بك الأمر مع موقع ويب فارغ معطل.
لهذا السبب ، يختار بعض مالكي مواقع الويب الاعتماد فقط على خطوط الويب الآمنة . تأتي هذه الأجهزة مثبتة مسبقًا على معظم الأنظمة ، لذا فهي مضمونة للعرض بشكل صحيح على جميع الأجهزة باستثناء أكثرها غموضًا. تميل أيضًا إلى التحميل بشكل أسرع بكثير من خطوط الويب ، والتي يمكن أن تكون بطيئة في الظهور.
مثال على الخط Arial
Arial هو خط ويب آمن شائع
إذا كان كل ما يقلقك هو زيادة الأداء والتأكد تمامًا من أن موقعك يعرض الخطوط بشكل صحيح ، فستكون الخطوط الآمنة للويب مناسبة لك.
فيما يلي قائمة بخطوط الويب الآمنة التي يمكن استخدامها بشكل عام.
اريال
نص الفرشاة MT
بلا هزلية
ساعي جديد
جاراموند
جورجيا
هيلفيتيكا
تأثير
وحدة التحكم لوسيدا
بالاتينو
تاهوما
تايمز نيو رومان
Trebuchet MS
فيردانا
هناك أيضًا العشرات من الخطوط الآمنة للويب ، ولكنها الأكثر انتشارًا عبر الأجهزة.
من بين كل هؤلاء ، تعد Arial و Times New Roman و Helvetica و Courier New الأكثر أمانًا. على الرغم من اعتباره آمنًا على الويب ، إلا أن البعض الآخر لا يعمل على أنظمة تشغيل معينة.
تكمن المشكلة في أنه ما لم تكن تدير شيئًا مثل موقع حكومي أو موقع معلومات بسيط ، فلا يستحق التضحية بعلامتك التجارية من خلال تجنب غالبية الخطوط. الخطوط الآمنة للويب سهلة القراءة ، لكنها أيضًا عامة جدًا ومفرطة الاستخدام.
من الأفضل كثيرًا اختيار مجموعة خطوط أكثر جمالًا وفريدة من نوعها لاستخدامها على موقع الويب الخاص بك ، خاصة وأن هناك حلًا لمشكلة فشل تحميل خطوط الويب: الخطوط الاحتياطية.
حزم الخطوط ، المعروفة أيضًا باسم الخطوط الاحتياطية ، هي السبب الوحيد لاستخدام خطوط الويب الغامقة والإبداعية.
بغض النظر عما تفعله أو الاحتياطات التي تتخذها ، هناك دائمًا شخص ما لن يكون قادرًا على تحميل الخطوط الخاصة بك. ربما تم تعطيل Javascript لديهم ، لذلك لا يتم عرض الخطوط المستضافة بشكل صحيح ، أو حدث خطأ ما في الكود ويمنع الخطوط التي قمت بتحميلها من العرض. أو ربما لا يتوافق خط معين مع جهاز شخص ما.
بفضل الخطوط الاحتياطية ، من السهل تحميل خط آمن للويب إذا حدث خطأ ما. يعمل هذا عن طريق تحديد خط قام المستخدم بتثبيته بناءً على عائلة الخط :
يتم تعريف خطوط Serif بضربات صغيرة متصلة بنهايات خطوط الحروف. تعتبر هذه الخطوط أنيقة ومقروءة.
تم تصميم خطوط Sans serif بشكل مشابه لخطوط serif ، ولكنها تفتقر إلى الحدود. إنها أبسط وأكثر قابلية للقراءة.
يتم تباعد خطوط Monospace بالتساوي بين كل حرف ، مما يمنحها مظهرًا مميزًا.
الخطوط المخطوطة (أو الخطوط النصية ) تصور الحروف الرسمية المكتوبة بخط اليد. فهي ليست واضحة جدًا وأفضل للعناوين أو تصميم الرسومات.
الخطوط الخيالية (أو الخطوط الزخرفية ) منمقة للغاية ، ومثل الخطوط المخطوطة ، ليست مناسبة كنص أساسي.
تذكر أن حزم الخطوط هي بالفعل “مكدس” ؛ من الممكن تمامًا أن يكون لديك العديد من الخطوط الاحتياطية بالتسلسل. فقط تأكد من أن لديك دائمًا خط ويب آمنًا في نهاية المجموعة ، ولا يزال لديك فرصة لتوصيل علامتك التجارية بخط مشابه إذا فشل الخط الرئيسي.
إذا كنت ترغب في إضافة خط ويب إلى موقعك ، فلديك بعض الخيارات.
بالنسبة لمستخدمي وورد بريس ، فإن أسهل طريقة للحصول على الخطوط على موقعك هي باستخدام مكون إضافي. أشهرهما هما Easy Google Fonts و Use Any Font . يعمل الأول على تبسيط عملية إضافة خطوط Google إلى موقع الويب الخاص بك ، بينما يسمح لك UAF بتحميل الخطوط إلى موقعك مباشرة.
إذا كنت لا تستخدم وورد بريس ، أو لا ترغب في الاعتماد على مكون إضافي ، فستتطلب العملية بعض التعديلات اليدوية.
أولاً ، يمكنك استخدام الخطوط المستضافة في مكان آخر ، مثل خطوط Google . تعتمد التعليمات هنا على الخدمة التي تختارها. باستخدام Google Fonts ، ستحتاج إلى تضمين الخط الذي تريد استخدامه في حسابك <head>ثم الاتصال به عندما تريد استخدامه.
يمكنك أيضًا استضافة الخطوط محليًا التي قمت بتنزيلها من الإنترنت على موقع الويب الخاص بك. قد يكون هذا مفضلًا لأنك لن تحتاج إلى الاعتماد على خدمات الجهات الخارجية.
لحسن الحظ ، من السهل جدًا القيام بذلك طالما كان لديك خط ويب تم تكوينه بشكل صحيح. ما عليك سوى تحميل الملفات إلى الخادم الخاص بك ، ثم استخدام قاعدة @ font-face في ورقة الأنماط لتحديدها. على سبيل المثال:
<br>@font-face {
font-family: FontName;
src: url(FontLocationOnServer);
}ثم يمكنك استخدام font-familyالعلامة للاتصال بخطك أينما تريد في مستند HTML.
بمجرد تحميل الخط بأمان على موقع الويب الخاص بك ، يمكنك الآن تصميمه باستخدام HTML و CSS . حتى لو كان لديك القليل من مهارات البرمجة ، فإن تصميم الخط سهل إلى حد ما. يمكنك تغيير لون النص أو لون الخلفية أو الحجم أو النمط أو الوزن.
ملاحظة: إذا كنت تستخدم إصدارات أقدم من HTML ، فقد تتذكر <font>العلامة. لم يعد هذا مدعومًا ولا ينبغي استخدامه. بدلاً من ذلك ، يمكنك نمط النص باستخدام CSS أو عنصر نمط HTML.
أولاً ، يمكنك تغيير الخط برموز الألوان. يمكنك إما استخدام اسم لون مثل “أحمر” أو رمز RGB أو قيمة HEX. تم تعيين هذا مع colorالخاصية مثل:
p {
color: blue;
}
أو في عنصر نمط HTML فردي:
<p style="color:blue;">Text.</p>لون الخلفية هو نفسه ، ولكن باستخدام سمة لون الخلفية.
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
p {
background-color: blue;
}التالي هو حجم الخط . يمكن أن يكون هذا إما بالبكسل أو النسب المئوية أو ems (وهي جيدة لتصميم المواقع سريعة الاستجابة).
p {
font-size: 16px;
}أو:
<p style="font-size:200%;">Text.</p>حجم الخط CSS
ضبط حجم الخط باستخدام CSS
وأخيرًا نمط الخط ووزنه ، أو مائل وجريء. بالنسبة للنص المائل ، استخدم العلامة “المائلة”.
.italic {
font-style: italic;
}
And for bold:
.bold {
font-weight: bold;
}نمط الخط CSS
ضبط نمط الخط باستخدام CSS.
يمكنك أيضًا استخدام علامات HTML بدلاً من ذلك. للخط المائل ، يمكنك استخدام:
<em>لنص ينقل التركيز ، أو يستخدم:
<i>لنص من المفترض أن يكون مميزًا بصريًا.
وللجرأة ، استخدم:
<b> أو <strong>على سبيل المثال:
<b>Bold Text</b>أو
<strong>I'm of special importance.</strong>سواء كنت ترغب في استخدام مضيف خط تابع لجهة خارجية أو تنزيله ، فأنت بحاجة إلى معرفة أفضل الأماكن للعثور على الخطوط. هناك المئات من الموزعين ، ولكن من المعروف أن حفنة جيدة هي مصادر موثوقة للحصول على الخطوط. وهنا عدد قليل:
استضافة الخطوط الخاصة بك؟ تتضمن استضافتنا المحسّنة للأداء شبكة CDN تدعم HTTP / 2 ، مع تضمين عرض النطاق الترددي المجاني. تحقق من خططنا
تعد Google Fonts واحدة من أفضل الأماكن للحصول على الخطوط. لماذا ا؟ يمكنك بسهولة تضمينها على موقعك دون تنزيل أي منها ، فاختيارها واسع وجميل ، والأهم من ذلك أنه مجاني تمامًا. خوادم Google سريعة دائمًا ، لذا يمكنك الوثوق بها لتقديم الخطوط بأقل تأخير ممكن.
خطوط جوجل
خطوط جوجل
تقدم Adobe Fonts آلاف الخطوط مع أي اشتراكات في Creative Cloud. مع الخدمات الأخرى (التي لا تعتمد على الخطوط مفتوحة المصدر مثل Google Fonts ، على الأقل) ، غالبًا ما تحتاج إلى القلق بشأن الترخيص. يتم مسح هذه الخطوط للاستخدام في أي مشروع شخصي أو تجاري.
يحتوي موقع Fonts.com على مجموعة كبيرة من الخطوط لاستخدام سطح المكتب والويب. يزودونك بالشفرة التي تحتاجها للحصول عليها على موقعك. المشكلة هي أن هناك العديد من التراخيص المختلفة ، ويمكن أن تكون مربكة بعض الشيء. يعتمد الدفع على رسوم تدفع لمرة واحدة أو نموذج الدفع أولاً بأول.
توفر TypeNetwork خطوطًا عالية الجودة للمشاريع الجادة مع مجموعة متنوعة من خيارات الترخيص. شراء الخطوط لسطح المكتب أو الويب أو التطبيقات أو ePub. تأتي خطوط الويب أيضًا مع خيار إضافي: مستضاف أو مستضاف ذاتيًا.
قبل ظهور Google Fonts على الإطلاق ، كان Font Squirrel هو المكان المناسب للعثور على خطوط مجانية ومرخصة تجاريًا لاستخدامها في أي مشروع. إنه يحتوي على مجموعة كاملة من الخيارات ، ولكن للأسف لا يوجد خيار لاستضافة الخطوط. ستحتاج إلى تنزيل الخطوط وتحميلها إلى موقعك يدويًا. لم يتم تحسين جميع الخطوط للويب أيضًا ، ولكن يمكنك تجربة Webfont Generator .
هناك الآلاف من خطوط الويب ، ولكن من أين تبدأ؟ فيما يلي عشرة خطوط HTML بسيطة تبدو رائعة على أي موقع ويب. هذه كلها آمنة على الويب ، لذا يجب أن تعمل على جميع الأجهزة تقريبًا. كما أنها تقدم خطوطًا احتياطية رائعة.
إذا كنت بحاجة إلى شيء قليلا أكثر إثارة، لدينا الكثير من المقالات حول الخطوط مخطوطة ، الخطوط الخط ، و الخطوط الحديثة .
الخط Arial
مثال على الخط Arial.
Arial هو أكثر الخطوط شهرة. إنها ليست الأجمل ، لكنها بسيطة ومفيدة في مجموعة متنوعة من المواقف.
يعتبر خط Times New Roman أيضًا خطًا شائعًا للغاية. من الأفضل أن تدير موقعًا أكثر رسمية. هذا الخط الرقيق ليس مثيرًا بشكل خاص ، لكنه لا يشتت الانتباه أيضًا.
بالانتينو
مثال على خط Palantino.
قد يبدو Palatino مألوفًا لك ، لأنه غالبًا ما يستخدم في طباعة الكتب. أصبح الآن محرفًا رقميًا أنيقًا يتم تضمينه افتراضيًا في العديد من الأجهزة.
تشتهر Verdana بكونها سهلة القراءة للغاية ، ولا تزال تبدو رائعة حتى في الأحجام الكبيرة. هذا sans serif هو بديل جيد لـ Arial.
ساعي جديد
مثال على خط Courier New.
يعتبر Courier New ، الذي يذكرنا بنص الآلة الكاتبة القديمة ، تصميمًا رائعًا أحادي المسافة للمواقع التي تريد مظهرًا قديمًا ولكن مقروءًا.
كاليبري
مثال على خط Calibri.
Calibri هو خط sans serif بسيط وجميل يأتي بشكل قياسي مع برامج مثل Microsoft Office. ومع ذلك ، فهو خط مملوك ، لذلك غالبًا ما يكون مدعومًا فقط على أنظمة تشغيل Windows.
جورجيا
مثال على خط جورجيا.
هذا الخط الرقيق المستدير مستوحى من خط الويب الآمن المماثل Garamond. إذا كنت بحاجة إلى خط رسمي ليس بجدية مثل Times New Roman ، فهو اختيار جيد.
جاراموند
مثال على خط Garamond.
يشبه إلى حد كبير Palatino ، يعد Garamond خطًا كلاسيكيًا يستخدم غالبًا لطباعة الكتب. على الرغم من تحديثه لأنظمة التشغيل الحديثة ، إلا أنه لا يزال قديم الطراز إلى حد ما.
ديدو
مثال على خط ديدوت.
يضفي الحد الأدنى من تباعد الأحرف على هذا الخط الرقيق مظهرًا ومظهرًا فريدًا. يمكنك العثور عليه على معظم أجهزة Apple.
تاهوما
مثال على خط Tahoma.
يعمل هذا الخط النظيف كمحرف افتراضي لأنظمة تشغيل Windows الأقدم. مظهرها الأكثر جرأة يجعلها تبرز بما يكفي دون تشتيت الانتباه.
تأكد من أن موقعك لا يبدو جيدًا فحسب ، بل يعمل أيضًا بشكل صحيح بمساعدة خطوط الويب الآمنة هذه ✨
انقر للتغريد
من المهم اختيار خطوط الويب التي ستبدو جيدة على موقع الويب الخاص بك وتكون قابلة للقراءة وتجسد علامتك التجارية . هناك العديد من مواقع الويب حيث يمكنك تثبيت الخطوط المجانية أو تنزيل الخطوط المرخصة مقابل رسوم ، وقد قدمنا بعض الأمثلة للخطوط الجيدة للبدء بها.
لست مضطرًا إلى الالتزام بخطوط الويب المملة الآمنة التي تراها في جميع أنحاء الإنترنت منذ عقود. بفضل الخطوط الاحتياطية ، يمكنك استخدام أي أسلوب طباعة تريده وتعيين احتياطي لاستخدامه إذا لم يتم تحميله.
سواء كنت تستخدم خطوط HTML هذه على موقع الويب الخاص بك ، أو في رسائل البريد الإلكتروني ، أو شعارك ، تأكد من إجراء الكثير من الاختبارات ، بحيث يظل موقعك قابلاً للقراءة ، وتتوافق الطباعة بشكل جيد مع بقية التصميم الخاص بك.
