الخطوط المخصصة في Blogger لتصميم المدونة. خط خطي جميل على Blogspot وBlogger

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

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

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

هل أثارت اهتمامك بما فيه الكفاية حتى الآن؟ حان الوقت للانتقال إلى التفاصيل.

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

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

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

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

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

تثبيت أي خط سيريلي على موقع الويب في ثلاث خطوات

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

الخطوة 1

نذهب إلى موقع Cufon - cufon.shoqolate.com.
انقر على الرابط في القائمة – تحميل. يتم فتح صفحة تحتوي على برنامج نصي. ما عليك سوى نسخ الكود بالكامل ولصقه في المفكرة وحفظه بامتداد .js. لقد قمت بإعداد ملف جاهز لقرائي، يمكنكم تنزيله على جهاز الكمبيوتر الخاص بكم.

كن حذرًا، اعتبارًا من تاريخ كتابة هذا المنشور، 26 يوليو 2011، إصدار البرنامج النصي هو 1.09i. وهذه هي النسخة الآن على الرابط أعلاه.

قم بتحميل البرنامج النصي إلى الاستضافة. يجب على أي شخص يدير مدونته على Blogger أن يعرف بالفعل مكان تحميل ملف جهة خارجية ()، وأنا أستخدم مواقع Google لهذا الغرض.

الخطوة 2

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

لكن على أية حال، فقد قمت بإعداد عدة لقطات شاشة بالإعدادات الرئيسية للفت انتباهك إلى النقاط المهمة.

كما ترون، هناك نافذة تحميل منفصلة لكل نوع من الخطوط:

• الخط العادي
• الخط الغامق
• مائل منتظم
• مائل غامق

لم أفهم تمامًا سبب حدوث ذلك، لكنني قمت بتحميله بالضبط حيث وصف الوصف بشكل أفضل لخطي.

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

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

لقطة الشاشة التالية.

في الحقل الأول نشير إلى أننا بحاجة إلى عرض الأحرف الكبيرة والصغيرة، بالإضافة إلى الأرقام وعلامات الترقيم.

يحتوي الحقل الثاني على علامة اختيار بشكل افتراضي، ولم أحاول إزالتها.

في الحقل الثالث، تأكد من تحديد الأبجدية السيريلية والروسية.

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

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

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

وآخر شيء هو الاتفاق على شروط استخدام المولد.

ونتيجة لذلك، نتلقى ملفًا آخر، ونقوم بتحميله أيضًا على الاستضافة.

الخطوه 3

الشيء الوحيد المتبقي هو تحديد الكود التالي في ملفات قالب الموقع قبل علامة الإغلاق:

Cufon.replace("h1");

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

Cufon.replace("h1");
Cufon.replace("h2");
Cufon.replace("ص");

لا يمكنك أيضًا تحديد علامة، بل معرفًا:

Cufon.replace("#mycufon");

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

Cufon.replace("h1";, (fontFamily: "font_name_1"; )));
Cufon.replace("h2";, (fontFamily: "font_name_2"; )));

إذا لم تكن متأكدًا من التهجئة الصحيحة للخط، فافتح الملف الذي تم إنشاؤه المقابل من الخطوة 2 وابحث عن المعلومات التي تحتاجها.

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

وأصبح الأمر هكذا:

كيفية تثبيت خط سيريلي مخصص في ووردبريس

لا يزال الأمر أسهل كثيرًا لمستخدمي WordPress. بالطبع، يمكنك اتباع الطريقة الموضحة بالكامل وسيعمل الخط أيضًا، ولكن هناك أيضًا مكون إضافي جاهز يسمى All-in-One Cufon. يمكنك تنزيل المكون الإضافي إما من موقع المطور أو مباشرة من منطقة إدارة المدونة.

قم بتثبيت البرنامج المساعد. دعونا تفعيلها. دعنا نذهب إلى إعدادات البرنامج المساعد. هناك رسالتان تحذيريتان في الأعلى.

أول شيء هو أنه يجب عليك إنشاء مجلد cufon-fonts في دليل wp-content/plugins/. للقيام بذلك، اتصل عبر FTP أو انتقل إلى لوحة تحكم الاستضافة وقم بإنشاء مجلد جديد باسم cufon-fonts في مجلد المكونات الإضافية. وبعد ذلك تختفي الرسالة الأولى.

تقول الرسالة الثانية أنه يجب عليك وضع ملف الخط الذي تم إنشاؤه في المجلد الذي تم إنشاؤه، وهو نفس الملف الذي تلقيناه في الخطوة 2. نقوم بتحميل الملف وتختفي الرسالة، بينما يظهر الخط الذي "يراه" المكون الإضافي الآن في الإعدادات أقل.

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

Cufon.replace("h1");

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

قم بتثبيت البرنامج المساعد Cufon الكل في واحد.

قم بتثبيت الخط الذي تم إنشاؤه.

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

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

>. ولكن إذا تم كل شيء بعناية، فلن تحدث أي كوارث.

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

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

تعليمات لتغيير الخط في رأس الموقع

وإذا لم يكن لديك الوقت الكافي لمعرفة ذلك، ولكنك تريد القيام بذلك بشكل أسرع، ففي كل شيء، سنحتاج إلى موقعنا الإلكتروني وبرنامج الكلمات (لتحديد الخط).

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

على الجانب الأيمن نجد قائمة الأنماط (style.css) ونفتحها.

رأس الموقع هو header h1. تقع بالقرب من البداية. لتجنب البحث بعينيك، يمكنك الضغط على Ctrl+F - سيظهر شريط البحث. اكتب في البحث. بالنسبة لي يبدو هذا الجزء كما يلي:

المربع العلوي: خط تغيير الخط.

المربع السفلي: خط لتغيير حجم الخط.

سنقوم لاحقًا بتغيير حجم الخط ولونه إذا لزم الأمر.

كيفية تغيير خط عنوان الموقع

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

نعود إلى لوحة إدارة الموقع. في سطر تغيير الخط (في الشكل - المربع الأزرق العلوي) ندخل اسم الخط المحدد بدلاً من الخط الافتراضي.

في أسفل الصفحة، انقر على "تحديث الملف".

دعنا نذهب إلى الموقع ونرى ما إذا كان الخط يناسب السياق العام أم لا. إذا لم يكن الأمر كذلك، فارجع إلى Word وحدد واحدًا آخر. الجميع.

كيفية تغيير حجم الخط عنوان الموقع

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

كيفية تغيير لون الخط لعنوان الموقع

يتم ذلك هناك. يوجد سطر في الكتلة التالية بعد أن قمنا بتغيير الخط نفسه وحجمه. يبدو شيء من هذا القبيل:

لتحديد لون، يمكنك استخدام أحد خيارات السمة: وحدة التحكم - المظهر - الخلفية. في سطر "لون الخلفية"، يمكنك تحديد لون ونسخ قيمته الأبجدية الرقمية ولصقه بدلاً من ما كان عليه (في حالتي #11006a). حفظ التغييرات. دعنا نذهب إلى الموقع ونعجب به.

لذلك، لتغيير الخط واللون والحجم، تحتاج إلى إجراء تغييرات في 3 أسطر فقط من المحرر. مع القليل من المهارة، يستغرق الأمر القليل من الوقت.

عنوان جميل وسهل القراءة

بما يتوافق مع الروح العامة للموضوع،

سيجعل مدونتك أكثر جاذبية ولا تنسى.

تجربة، اختر ما تريد!

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

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