چگونه فونت های گوگل را در وبلاگ خود جاسازی کنیم؟ اتصال فونت های گوگل
سفارشی سازی
به عنوان مثال، من فونت "Marck Script" را انتخاب کردم.
1. به کاتالوگ بروید و فونت خود را انتخاب کنید. می توانید کل فهرست فونت را در اینجا پیدا کنید: google.com/webfonts
مجموعه شخصیت های مورد نظر خود را انتخاب کنید:
لاتین (لاتین)
لاتین Extended (لاتین-ext)
سیریلیک (سیریلیک)
"لاتین" و "سیریلیک" را انتخاب کنید. من به شما توصیه می کنم بقیه گزینه ها را انتخاب نکنید، زیرا در این حالت بارگیری صفحه زمان زیادی طول می کشد و گاهی اوقات فونت به سادگی کار نمی کند.
3. در پاراگراف سوم کدی را مشاهده می کنید که باید در وبلاگ درج شود اما پس از کمی اصلاح. به عنوان مثال، برای فونت من - این کد در نظر گرفته شده است:
این کد برای درست کار کردن در وبلاگ باید تغییر کند.
3.1 "/" را در انتهای کد قبل از ">" اضافه کنید، و همچنین اگر کد شما دارای این نماد است - "&" آن را با "&" جایگزین کنید.
نصب و راه اندازی
1. وارد اکانت blogger.com خود شوید.
سپس به مسیر Design ---> Edit HTML بروید
2. با استفاده از جستجو (Ctrl + F) باید این خط را در قالب خود پیدا کنید:
3. بعد از آن کد فونت را اضافه کنید و قالب را ذخیره کنید.
استفاده
می توانید از فونت نصب شده در هر جایی از وبلاگ خود استفاده کنید. به عنوان مثال، اگر می خواهید "نام سایت" این فونت را داشته باشد، باید:
1. به Design ---> Change HTML بروید
2. از جستجو (Ctrl + F) برای یافتن این خط در قالب خود استفاده کنید:
هدر h1
#header h1 (
ارتفاع خط: 1.2em;
تبدیل متن: حروف بزرگ;
فاصله حروف: 0.1em;
}
2.2 اگر کد "هدر h1" شما خط خانواده فونت ندارد، آن را اضافه کنید:
font-family: Marck Script, Georgia, serif;
2.2.1 به جای "Marck Script" - نام فونت خود را قرار دهید. نام را می توان در صفحه فونت، در پاراگراف چهارم یافت.
2.3 همین. همچنین می‌توانید فونت را به مکان‌های دیگر وبلاگ خود اضافه کنید، مانند «نوار کناری»، «post-body» یا «post h2».
بالاخره دست ها رسید نحوه تغییر فونت هدر سایت... من چیزهای پیچیده را دوست ندارم، بنابراین همیشه همه چیز را تا حد امکان ساده می کنم. من به شما یک روش ساده، سریع و بدون نیاز به دانش عمیق html را برای تغییر فونت، اندازه و رنگ عنوان سایت خود پیشنهاد می کنم.
فقط سه خط در ویرایشگر وجود دارد و از خلاقیت خود در سایت لذت خواهید برد. علاوه بر این، اگر از یک قالب رایگان استفاده کنید، سایت شروع به به دست آوردن ویژگی های فردی می کند.
اقدامات احتیاطی برای کسانی که مطمئن نیستند
- اول، بیایید تصمیم بگیریم؟ که ما در مورد قالب های وردپرس صحبت می کنیم. اگر موضوع وبلاگ شما روی این موتور تنظیم شده است، پس این مقاله برای شما مناسب است.
- اگر از توانایی های خود مطمئن نیستید، بهتر است ابتدا روی یک زیر دامنه آزمایشی آزمایش کنید. پس از اطمینان از توانایی شما، می توانید مهارت را به سایت اصلی انتقال دهید. با این حال، اقدامات مورد نیاز به منظور فونت هدر سایت را تغییر دهیدآنقدر ساده هستند که به سختی می توان آن را خراب کرد. من شخصاً همیشه همه چیز را در آزمون اول انجام می دهم. کمی زمان بیشتر، اما قابل اعتماد تر.
- در صورتی که سایت هنوز خراب است، >> را بخوانید. اما، اگر همه چیز با دقت انجام شود، هیچ فاجعه ای رخ نخواهد داد.
یک خط کد ممکن است در قالب های مختلف متفاوت به نظر برسد. برای روشن شدن نحوه عملکرد قالب خود، به مقاله مراجعه کنید. یک ویدیوی دقیق در مورد نحوه یافتن هر خط کد وجود دارد - پس از آن می توانید تقریباً هر تغییری را در قالب وب سایت خود ایجاد کنید. این مهارت شما را از نیاز به گشت و گذار در رمزها رها می کند و دستان شما را باز می کند.
اگر خودتان متوجه نمی‌شوید و می‌خواهید یک فریلنسر خوب پیدا کنید که کدها را درک کند، در مقاله مربوط به این موضوع پیوند مفیدی وجود دارد که اگر اتفاقی افتاد به کجا مراجعه کنید.
دستورالعمل تغییر فونت در هدر سایت
و اگر وقت ندارید آن را بفهمید، اما سریعتر می خواهید. برای همه چیز در مورد همه چیز، ما به وب سایت خود و برنامه کلمه (برای انتخاب فونت) نیاز داریم.
- وارد پنل مدیریت سایت خود می شویم. علاوه بر این، در نوار کناری سمت چپ پیدا می کنیم کنسول - ظاهر - ویرایشگر.
- در سمت راست پیدا می کنیم فهرست سبک (style.css)و بازش کن
- هدر سایت هدر h1 است. نزدیک به ابتدا قرار دارد. برای اینکه با چشمان خود نگاه نکنید، می توانید Ctrl + F را فشار دهید - نوار جستجو ظاهر می شود. جستجو را تایپ کنید این قسمت برای من شبیه این است:
مربع بالایی:خط تغییر فونت
مربع پایین:خط تغییر اندازه فونت
بعداً در صورت لزوم اندازه و رنگ فونت را تغییر خواهیم داد.
نحوه تغییر فونت هدر سایت
- حالا یک سند Word خالی را باز می کنیم، عنوان آن را در صفحه اصلی سایت کپی کرده و به یک سند Word منتقل می کنیم، آن را انتخاب کرده و شروع به پخش با فونت های مختلف می کنیم. آنها در پانل بالایی در گوشه سمت چپ قرار دارند. چرا انجام آن در این برنامه راحت است - زیرا تمام تغییرات فونت در نام شما بلافاصله قابل مشاهده است. فونتی را انتخاب کنید که با نام سایت شما مطابقت داشته باشد. فونتی که حتما دوستش خواهید داشت. پس از انتخاب، نام فونت را در Worde کپی کنید.
- به پنل مدیریت سایت برمی گردیم. در خط تغییر فونت (در شکل - مربع آبی بالایی)، به جای فونت پیش فرض، نام فونت انتخاب شده را وارد کنید.
- در پایین صفحه، روی «به‌روزرسانی فایل» کلیک کنید.
- به سایت بروید و ببینید که آیا فونت به خوبی با بافت کلی مطابقت دارد یا خیر. اگر نه، به Word برگردید و دیگری را انتخاب کنید. همه چیز.
نحوه تغییر اندازه فونت هدر سایت
این کار در همان قالب ویرایشگر انجام می شود. تصویر بالا دومین مربع آبی است. تنها کاری که باید در آنجا انجام دهید این است که اعداد دیگری قرار دهید - بسته به آنچه شما نیاز دارید، فونت بزرگتر یا کوچکتر می شود. ما تغییرات را ذخیره می کنیم، به سایت می رویم و می بینیم که آیا همه چیز برای ما مناسب است یا خیر.
نحوه تغییر رنگ فونت هدر سایت
این کار در همان مکان انجام می شود. یک خط در بلوک بعدی بعد از بلوک وجود دارد که در آن خود فونت و اندازه آن را تغییر دادیم. چیزی شبیه این به نظر می رسد:
برای انتخاب رنگ، می توانید از یکی از گزینه های تم استفاده کنید: کنسول - ظاهر - پس زمینه... در خط "رنگ پس زمینه" می توانید یک رنگ را انتخاب کنید، مقدار الفبایی آن را کپی کنید و آن را به جای آنچه بود (در مورد من، # 11006a) جایگذاری کنید. ذخیره تغییرات. ما به سایت می رویم و تحسین می کنیم.
بنابراین به تغییر فونت، رنگ و اندازه، باید فقط در 3 خط ویرایشگر تغییرات ایجاد کنید. با کمی مهارت، زمان بسیار کمی می برد.
عنوان زیبا و خواندنی
مطابق با روح کلی موضوع،
وبلاگ شما را جذاب تر و خاطره انگیزتر می کند.
آزمایش کنید، آنچه را که دوست دارید انتخاب کنید!
P.S.وقتی حتی تغییرات جزئی در فایل‌های ویرایشگر تم ایجاد می‌کنم، فقط در صورت لزوم، متن تغییر یافته را به طور کامل در دفترچه یادداشت کپی می‌کنم - در پوشه‌ای که فایل فشرده تم نصب شده در سایت من در آن ذخیره می‌شود. در صورتی که سایت به طور ناگهانی خراب شود و نیاز به نصب مجدد تم باشد، من تمام فایل های تغییر یافته به سلیقه خود را ذخیره کرده ام. فقط هنگام نصب مجدد وردپرس یا تم برای انتقال فایل ها به پوشه های مناسب در هاست باقی می ماند.
در مقالات بعدی، در مسیر تغییر وبلاگ من، به همین راحتی رنگ پس زمینه، فونت عنوان در عنوان، مقاله، رنگ پیوندها - به طور خلاصه، هر عنصری را تغییر خواهیم داد.
ایرینا کودریاوتسوا
جاستوس یک نسخه را نشان داد، من می خواهم فونت های احتمالی بیشتری را ببینم!
https://www.blogger.com/profile/03714046357448661094
ایرینا کودریاوتسوا،متأسفانه این تنها فونت "غیر استاندارد" است که من با آن برخورد کردم (در Blogspot). اگر کسی فونت های دیگری را می شناسد، دوست دارم آن را بخوانم!
Si.A.A.
و به صورت دسته ای یعنی به یکباره در همه پیام ها به طور همزمان امکان تغییر فونت وجود دارد؟ و سپس با هزار پیام قبل از بازنشستگی، پیام ها باید دوباره انجام شوند.
Si.A.A.نیاز به فکر کردن! تا فردا فرصت بده!
https://www.blogger.com/profile/13746790384341325111
Si.A.A.
متقاعد شد. اما فقط یک روز ;)
https://www.blogger.com/profile/06106872544132460143
Si.A.A.درخواست شما تکمیل شد! در پایان پست راهنمای نصب را گذاشتم. یک راه حل ساده جواب نداد، شما باید در قالب "عمیق تر" کنید! همچنین، معلوم نیست این موضوع چه تاثیری بر طراحی کلی وبلاگ خواهد داشت؟
https://www.blogger.com/profile/13746790384341325111
MagentaWAVE
"متأسفانه این تنها فونت "غیر استاندارد" است که من با آن برخورد کردم (در Blogspot). اگر کسی فونت های دیگری را می شناسد، دوست دارم آن را بخوانم!"
من این آزادی را می پذیرم که پیوند را اسپم کنم،
http://www.magentawave.com/2013/01/connect-and-use-web-fonts.html
اخیراً در مورد این مسائل دعوا کردم،
https://www.blogger.com/profile/05069681985675276048
MagentaWAVE،با تشکر، لینک شما را در انتهای پست برای خوانندگان با تجربه قرار می دهم!
https://www.blogger.com/profile/13746790384341325111
Si.A.A.
متشکرم، اما پس از هشدار "چگونه این روی طراحی وبلاگ تاثیر می گذارد" ترسناک است.
https://www.blogger.com/profile/06106872544132460143
Si.A.A.منظورم این بود که غیر از متن، فونت جای دیگری می رود! جایی که...؟ این فقط پس از نصب کد قابل مشاهده خواهد بود! فکر نکنم بدتر بشه در هر صورت، شما می توانید همه چیز را پس بگیرید!
https://www.blogger.com/profile/13746790384341325111
مارینا کویارووا
بخاطر این مشورت ممنون. اگر فونت کد را به هر فونتی که توسط الگو پشتیبانی می شود تغییر دهید، فونت ها را می توان تغییر داد، به عنوان مثال، در ابزارها (که من انجام دادم :))
https://www.blogger.com/profile/05106932572444773407
اولنا ساویتسکایا
ببخشید خود قوری، اما ویرایشگر متن کجاست؟ در محدوده نقطه خالی ... و کجای HTML قالب وجود دارد - جایی که - وقتی روی-الگو-بعدی- کلیک کردم تا HTML را تغییر دهم؟ ولی اگه اونجا باشه من چیزی در مورد چیزی که مینویسی نمیبینم آره خوب چه خوبه من هیچی نمیگیرم .. و برگها میریزن و الان برای روز دوم نیست سقوط .. پس کجا رفتند؟!
https://www.blogger.com/profile/04422214255958505740
اولنا ساویتسکایا،به عنوان مثال، من گوگل را تایپ کردم و بلافاصله یک مقاله برای شما با یک ویدیو پیدا کردم:
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
چگونه فونت سایت خود را تغییر دهم؟ چگونه فونت های عمومی را از کتابخانه فونت های گوگل متصل کنیم، و اگر فونت انحصاری باشد چطور؟ اگر سوالات مربوط به شما هستند، ادامه مطلب را بخوانید
فرمت های فونت
مانند انواع دیگر فایل ها، فونت ها در قالب های مختلفی وجود دارند. در مجموع، ده ها مورد از آنها وجود دارد و محبوب ترین آنها که در شبکه استفاده می شود عبارتند از TTF، EOT، WOFF و SVG. علاوه بر این، هر کدام فقط توسط نسخه های خاصی از نرم افزار پشتیبانی می شوند.
آنها علاوه بر تعلق به سیستم های خاص، در فناوری رندر نماد و روش فشرده سازی متفاوت هستند. حجم فایل دریافتی به مورد دوم بستگی دارد که مستقیماً بر زمان بارگذاری آن و در نتیجه سرعت نمایش صفحه تأثیر می گذارد. این فقط هنگام نصب فونت جدید بسیار مهم است، زیرا پس از دانلود فایل حاوی آن در حافظه پنهان ذخیره می شود. در حال حاضر، هنگام جاسازی یک فونت خاص در یک سایت، باید همه این قالب‌های فونت را آماده کنید: TTF (یا OTF)، WOFF، EOT و SVG.
اتصال فونت های گوگل
به منظور آسان‌تر کردن کار با فونت‌ها، گوگل سرویس فونت‌ها را ایجاد کرد که صدها فونت از جمله ده‌ها فونت سیریلیک را ارائه می‌دهد.
پس از انتخاب فونت های مورد نیاز، و ممکن است چندین مورد از آنها وجود داشته باشد، این سرویس یک پنجره کوچک شده با حالت های "استاندارد" و "واردات" ایجاد می کند که هر کدام دارای دو نوع کد هستند:
- موارد ویژه را اضافه کنید یک خط به سر سند HTML بین تگ ها + ترکیب مورد نظر را در فایل CSS تجویز کنید.
- یا یک خط دیگر بین تگ ها بنویسید