كيف تقوم بتضمين Google Fonts في مدونتك؟ اتصال Google Fonts

تعد الخطوط من Google API طريقة رائعة لمنح مدونتك أسلوبًا جديدًا لا تشوبه شائبة. يوجد حاليًا 501 خطًا في المجموعة ، 35 منها تدعم السيريلية. الشيء الرئيسي عند اختيار الخط هو سهولة القراءة والتوافق مع بقية المدونة.
التخصيص
على سبيل المثال ، اخترت الخط "Marck Script".

1. اذهب إلى الكتالوج واختر الخط الخاص بك. يمكنك العثور على دليل الخطوط بالكامل هنا: google.com/webfonts

اختر مجموعات الأحرف التي تريدها:

لاتيني (لاتيني)
اللاتينية الموسعة (تحويلة لاتينية)
السيريلية (السيريلية)

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

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

3.1 أضف "/" في نهاية الكود قبل ">" ، وأيضًا إذا كان الرمز الخاص بك يحتوي على هذا الرمز - "&" استبدله بـ "&".

التركيب

1. قم بتسجيل الدخول إلى حساب blogger.com الخاص بك.
انتقل بعد ذلك إلى تصميم ---> تحرير HTML

2- باستخدام البحث (Ctrl + F) ، ستحتاج إلى العثور على هذا السطر في القالب الخاص بك:

3. بعد ذلك قم بإضافة رمز الخط وحفظ القالب.
إستعمال

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

1. انتقل إلى تصميم ---> تغيير HTML

2- استخدم البحث (Ctrl + F) للعثور على هذا السطر في القالب الخاص بك:
رأس h1

#header h1 (
ارتفاع الخط: 1.2em ؛
تحويل النص: الأحرف الكبيرة ؛
تباعد الحروف: .1em ؛
}

2.2 إذا لم يكن رمز "header h1" الخاص بك يحتوي على سطر عائلة الخط ، فأضفه:
عائلة الخطوط: Marck Script، Georgia، serif؛

2.2.1 بدلاً من "Marck Script" - ضع اسم الخط الخاص بك. يمكن العثور على الاسم في صفحة الخط ، في الفقرة الرابعة.
2.3 هذا كل شيء. يمكنك أيضًا محاولة إضافة الخط إلى أماكن أخرى في مدونتك ، مثل "الشريط الجانبي" أو "النص المنشور" أو "النشر h2".

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

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

احتياطات لمن هم غير متأكدين

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

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

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

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

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

1. ندخل لوحة الإدارة لموقعنا. علاوة على ذلك ، في الشريط الجانبي الأيسر نجد وحدة التحكم - المظهر - المحرر.
2. على الجانب الأيمن نجد قائمة الأنماط (style.css)وافتحه.
3. رأس الموقع هو رأس h1. يقع بالقرب من البداية. لكي لا تنظر بعينيك ، يمكنك الضغط على Ctrl + F - سيظهر شريط البحث. اكتب في البحث. هذا الجزء يبدو مثل هذا بالنسبة لي:

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

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

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

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

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

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

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

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

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

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

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

عنوان جميل ومقروء جيدًا ،

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

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

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

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

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

ايرينا كودريافتسيفا

أظهر Justus إصدارًا واحدًا ، أريد أن أرى المزيد من الخطوط الممكنة!

https://www.blogger.com/profile/03714046357448661094

إيرينا كودريافتسيفا ،للأسف هذا هو الخط الوحيد "غير القياسي" الذي صادفته (على Blogspot). إذا كان شخص ما يعرف الخطوط الأخرى ، فأنا أحب قراءتها!

Si.A.

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

أ.بحاجة الي التفكير! امنحه الوقت حتى الغد!

https://www.blogger.com/profile/13746790384341325111

Si.A.

مقتنع. لكن يوم واحد فقط. ؛)

https://www.blogger.com/profile/06106872544132460143

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

https://www.blogger.com/profile/13746790384341325111

موجة أرجوانية

"للأسف هذا هو الخط الوحيد "غير القياسي" الذي صادفته (على Blogspot). إذا كان شخص ما يعرف الخطوط الأخرى ، فأنا أحب قراءتها!"
سأستغل الحرية لإرسال محتوى غير مرغوب فيه إلى الرابط ،
http://www.magentawave.com/2013/01/connect-and-use-web-fonts.html
مؤخرًا تشاجرت بشأن هذه الأمور ،

https://www.blogger.com/profile/05069681985675276048

موجة أرجوانية ،شكرًا ، سأضع رابطك في نهاية المنشور ، للقراء ذوي الخبرة!

https://www.blogger.com/profile/13746790384341325111

Si.A.

شكرا لكن مخيف بعد التحذير "كيف سيؤثر ذلك على تصميم المدونة".

https://www.blogger.com/profile/06106872544132460143

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

https://www.blogger.com/profile/13746790384341325111

مارينا كوياروفا

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

https://www.blogger.com/profile/05106932572444773407

OLENA SAVITSKAYA

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

https://www.blogger.com/profile/04422214255958505740

OLENA SAVITSKAYA ،على سبيل المثال ، كتبت في Google ووجدت على الفور مقالًا لك به مقطع فيديو:
http://mlmvsem.blogspot.de/2012/01/blogspot.html

https://www.blogger.com/profile/13746790384341325111

كريستينا ازاروفا

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

https://www.blogger.com/profile/05518665193214781905

كريستينا ازاروفايتم أخذ العلامات من قوالب قياسية وهي موجودة ، ولكن العثور عليها في "تغيير HTML" الجديد أمر صعب للغاية!

https://www.blogger.com/profile/13746790384341325111

فلاديمير تلفنوي

يحتوي الموقع على مجموعة مختارة من خطوط الويب ، وما زلت لا أفهم كيفية استخدامها ، http://www.google.com/fonts/

فلاديمير تلفنوي

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

https://www.blogger.com/profile/16497829425382739102

ايرينا بوسورمانوفا

أريد خطًا بخط اليد ، لكن بالنسبة لإبريق الشاي ، هذا مجرد رعب!

https://www.blogger.com/profile/10826754143079211427

كيف أقوم بتغيير الخط على موقعي؟ كيفية توصيل الخطوط العامة من مكتبة Google Fonts وماذا لو كان الخط حصريًا؟ إذا كانت الأسئلة ذات صلة بك ، فتابع القراءة

تنسيقات الخطوط

مثل أنواع الملفات الأخرى ، تأتي الخطوط بتنسيقات متنوعة. في المجموع ، هناك العشرات منهم ، وأكثرها شيوعًا من تلك المستخدمة على الشبكة هي TTF و EOT و WOFF و SVG. علاوة على ذلك ، يتم دعم كل منها فقط بواسطة إصدارات معينة من البرنامج.

بالإضافة إلى الانتماء إلى أنظمة محددة ، فإنها تختلف في تقنية عرض الرمز وطريقة الضغط. يعتمد حجم الملف المستلم على الأخير ، مما يؤثر بشكل مباشر على وقت تحميله ، وبالتالي سرعة عرض الصفحة. هذا مهم فقط عند تثبيت خط جديد ، لأنه بعد تنزيل الملف الذي يحتوي عليه سيتم تخزينه في ذاكرة التخزين المؤقت. في الوقت الحالي ، عند تضمين خط معين في موقع ما ، تحتاج إلى إعداد كل تنسيقات الخطوط هذه: TTF (أو OTF) و WOFF و EOT و SVG.

اتصال Google Fonts

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

بعد اختيار الخطوط المطلوبة ، وقد يكون هناك العديد منها ، تنشئ الخدمة نافذة مصغرة مع الوضعين "القياسي" و "الاستيراد" ، ولكل منهما نوعان من التعليمات البرمجية:

• إضافة عروض خاصة سطر إلى رأس مستند HTML بين العلامات + وصف المجموعة المطلوبة في ملف CSS ؛
• أو كتابة سطر آخر بين العلامات