تقنيات الحصول على خطوط رائعة في WordPress؟

نشرت: 2021-11-08

تقنيات الحصول على خطوط رائعة في WordPress

تحاول هذه المقالة مساعدة المرء على فهم الطرق المختلفة لتطبيق الخطوط في WordPress الخاص بك.

سنناقش أيضًا المكونات الإضافية المختلفة المتاحة بسهولة والتي يمكن للمرء استخدامها إذا لم يكن مرتاحًا لاستخدام الرموز.

فيما يلي بعض الطرق والحيل لاستخدام الخطوط الفاخرة في WordPress والطباعة في WordPress:

هل تتطلع إلى إضافة خطوط فاخرة في موقع WordPress الإلكتروني ، فستساعدك هذه التقنيات.

ما هي Custom Font / Fancy Font في WordPress؟

تعد الخطوط المخصصة طريقة فريدة لإضافة خط نمط جديد على موقع الويب الخاص بك لاكتساب المزيد من الجاذبية من عملائك. سمات WordPress قائمة على أساس مخصص وبالتالي يحتاج المستخدم إلى خط جديد حسب الاختيار والطلب.

لذلك تم إنشاء عدد من خطوط الطباعة. تقدم العديد من سمات WordPress عددًا من الخطوط المثبتة بالفعل.

باستخدام Fonts Header ، يمكن تخصيص قسم النص والعناوين الفرعية والتنقلات وأقسام وعناصر التصميم الأخرى بشكل مخصص. يمكنك تخصيص الخط في رأس تذييل الصفحة أو في أي قسم على موقع الويب.

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

تم إدراج الإضافات المختلفة للخط أدناه

1. الخطوط:

2. استخدم أي خط:

استخدم أي خط

3. خطوط Google السهلة:

البرنامج المساعد لخطوط Google السهلة

4. WP Google Fonts:

البرنامج المساعد لخطوط الفسفور الابيض جوجل

5. تصميم رائع لخطوط أفضل:

أفضل خط رائع

6. MW Font Changer:

خط بارسي

7. Google Fonts for WordPress:

8. الخطوط المخصصة:

خطوط عادية

9. Font Awesome:

رائع الخط

10. الخطوط اليابانية لووردبريس:

11. Styleguide - الخطوط والألوان المخصصة:

دليل الأسلوب

12. Zeno Font Resizer:

Zeno Font Resizer

13. WP Font Awesome:

WP Font Awesome

14. خطوط Typekit لـ WordPress:

خطوط Typekit لـ WordPress

15. أيقونات WP SVG:

SVG رمز مكافحة ناقلات البرنامج المساعد

16. خطوط الويب العربية:

خطوط الويب العربية

17. إضافات الخطوط المخصصة المميزة لـ WordPress:

18. أيقونات WP الأيونية:

الأيقونات الأيونية الفسفور الابيض

19. FontPress - مدير خطوط WordPress:

20. برنامج تحميل الخط:

21. Styler - Icons، Fonts and CSS Generator لـ WP:

22. أيقونات خط نمط iOS7:

23. WooCommerce Beautifier:

مجمل مرحاض

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

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

طرق مختلفة لإضافة خطوط مخصصة في WordPress

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

الطريقة الثانية: إضافة خطوط فاخرة في WordPress يدويًا:
لإضافة خطوط يدويًا إلى موقع WordPress ، ستحتاج فقط إلى نسخ الرمز ولصقه في موقع WordPress.

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

الطريقة الرابعة: استخدام CSS3 @ font-face:
الطريقة المباشرة لإضافة خطوط مخصصة في موقع WordPress الإلكتروني هي باستخدام CSS3 @ font-face.
بمساعدة CSS3 ، يمكنك إضافة أي نوع من الخطوط الفاخرة التي تريدها.

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

1. SIFR:

تُعرف تقنية Inman Flash Replacement القابلة للتطوير أيضًا باسم sIFR التي تستخدم مزيجًا من جافا سكريبت وفلاش لعرض الخطوط المخصصة في موقع الويب الخاص بك.

تم استخدام هذه التقنية على نطاق واسع حتى بدأ المتصفح والهواتف الذكية والأجهزة اللوحية في استخدام javacript و jquery بدلاً من Flash ومنذ ذلك الحين تم إيقافها من قبل المطور.

يمكن أيضًا إنشاء sIFR بسهولة باستخدام موقع ويب مُنشئ sIFR حيث يُنشئ .swf لأي خط.

هنا مكون إضافي: http://WordPress.org/plugins/wp-sifr/

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

2. Cufon:

يستخدم Cufon مولد cufon: http://cufon.shoqolate.com/generate/ أي تقنية SVG و VML لعرض وإنتاج جافا سكريبت لأي خط. باستخدام أداة إنشاء cufon ، يمكن للمرء أن يحتوي على خط غامق وخفيف ومائل وجميع أنواع الخطوط الأخرى في جافا سكريبت واحد.

ثم يتعين عليهم استخدام جافا سكريبت إما في رأس أو تذييل سمة WordPress لاستخدام خطوط cufon.

إذا كان هذا يبدو مملًا بعض الشيء ، فقد تكون المكونات الإضافية التالية مفيدة لاستخدام خطوط cufon:

WP-Cufon

الكل في واحد Cufon

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

السلبيات: يتطلب جافا سكريبت. لذلك إذا قام شخص ما بتعطيل البرامج النصية على المستعرضات الخاصة به ، فلن تظهر خطوط cufon.

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

3. تقنيات CSS:

من المحتمل أن تكون تقنيات CSS هي الأفضل ولكن المشكلة الوحيدة في تقنيات css هي أنها تحتاج إلى تضمين ملف الخط ، مثل ملف خط ttf أو otf في رأس أو تذييل الصفحة.

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

يوضح ما يلي كيفية تضمين الخطوط من وجه الخط أو الخط السنجاب أو dafont أو أي موقع ويب آخر للخطوط في ملف css الخاص بك:

@ font-face {

عائلة الخطوط: "MyWebFont" ؛

src: url ('WebFont.eot') ؛

src: تنسيق url ("WebFont.eot؟ iefix") ("eot") ،

تنسيق url ('WebFont.woff') ('woff') ،

تنسيق url ('WebFont.ttf') ('truetype') ،

تنسيق url ('WebFont.svg # webfont') ('svg') ؛

}

يُظهر الأسلوب أعلاه تضمين الخطوط في css. تحتاج إلى كتابة هذا أعلى ملف style.css الخاص بك

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

4. خطوط جوجل

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

يعد تضمين خطوط google أمرًا سهلاً للغاية ويمكن إجراؤه باستخدام طريقة الاستيراد أو طريقة الارتباط أو طريقة جافا سكريبت. لذلك ، أيهما يناسبك أكثر وأسلوبك ، يمكن للمرء استخدام تلك الخطوط.

الإيجابيات: إنها سهلة وبسيطة وخفيفة الوزن حيث يتم تحميل الخطوط من خوادم جوجل.

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

ومن ثم قد يتعين على اللغات الأخرى الاستمرار في استخدام تقنيات CSS لتضمين واستيراد خط لموقعها على الويب.

إذا كنت تريد استخدام خطوط google باستخدام المكونات الإضافية ، فإليك بعضًا منها:

خطوط الفسفور الابيض جوجل

جوجل تايبوجرافي