سلام به همه! امروز می خواهم نحوه استفاده را به شما بگویم Google Fonts APIبرای درج فونت های مورد نیاز

در سمت چپ می توانید ببینید فیلتر کنیدو در سمت راست نمونه هایی از انواع فونت ها وجود دارد. هر کدام را که دوست دارید انتخاب کنید. بعد روی دکمه کلیک کنید استفاده سریع.

پس از این، صفحه ای در مقابل شما ظاهر می شود که می توانید سبک های فونت مورد نیاز خود را انتخاب کنید.

برای مثال، بیایید سبک معمولی (400) و پررنگ (700) را انتخاب کنیم.

در زیر، زیر شماره 3 ، می توانید کد جاسازی را پیدا کنید. ترجیح می‌دهم اتصال به فایل styles را انتخاب کنم، بنابراین روی تب کلیک می‌کنم @واردات. این کد را کپی کنید

حالا بیایید یک فایل بسازیم index.htmlبا یک پاراگراف متن

Lorem ipsum dolor sit amet, consectetur adipisicing elit. ساپه، رسمی؟

بیایید شیوه نامه خود را در تگ قرار دهیم سر

و در استایل شیت در ابتدای فایل کد کپی شده را پیست کنید.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400700);

من فونت رو انتخاب کردم Sans را باز کنیدبه عنوان نمونه او اولین نفر است

در صفحه با فونت، زیر شماره 4 ، می توانید سبک مورد نیاز ما را پیدا کنید. بیایید آن را کپی کرده و در پاراگراف خود اعمال کنیم.

P (فونت-خانواده: "Open Sans"، sans-serif؛ )

همه! اکنون می توانید از فونت جدید خود لذت ببرید!

اما فراموش نکنید که ما نیز استایل جسورانه را انتخاب کردیم. برای استفاده از آن، فقط بنویسید وزن فونتبا شماره ای که در سایت انتخاب کردید در مورد من - 700 .

P(
font-family: "Open Sans", sans-serif;
فونت-وزن: 700;
}

درست مثل جسارت، اگر در سایت انتخاب کرده اید، می توانید از سبک ایتالیک نیز استفاده کنید.

استفاده از آن به همین راحتی است فونت های گوگل. در پایان، فقط باید گفت که تمام این فونت ها سایت شما را بارگذاری می کنند. برای این کار، زمانی که فونتی را در سایت انتخاب می کنید، در سمت راست نشانگر وجود دارد که نشان می دهد چقدر صفحه بارگذاری می شود. مطمئن شوید که تعداد آن خیلی زیاد نباشد و فقط از فونت هایی استفاده کنید که واقعاً به آن نیاز دارید. شما نباید همه سبک ها را یکجا انتخاب کنید، هرگز نمی دانید چقدر مفید خواهند بود.

پس همین است. از توجه شما متشکرم و به زودی شما را می بینم!

حامی مطالب.
کولر گازی در فروشگاه اینترنتی http://www.technodom.kz/catalog/konditsionery. تهویه مطبوع - بهترین محصولات، وام، انتخاب عظیم، خدمات بی عیب و نقص.

عصر بخیر خوانندگان عزیز همه شما احتمالاً رویای این را دارید که وب سایت خود یا مشتری خود را مختصر و جذاب تر کنید.

یکی از عوامل اصلی درک اطلاعات در یک وب سایت، فونت ها و نحوه استفاده از آنها با هم است. از آنجایی که در یک سایت، اغلب از دو یا چند نوع فونت استفاده می شود، به عنوان مثال، برای عنوان و فقط متن اصلی.

یکی از امکانات برای بهبود بصری خوانایی متون، اتصال فونت های شخص ثالث است. از این گذشته ، احتمالاً همه می دانند که مجموعه استاندارد فونت های سیریلیک در ویندوز چقدر ضعیف است که وظیفه نمایش متن در مرورگر را بر عهده دارد.

فونت های استاندارد:

Cufon و @font-face

قبلاً در مورد آن نوشتم که با آن می توانید فونت های غیر استاندارد را به سایت متصل کنید. حالا بیایید به یک روش ساده‌تر نگاه کنیم - قانون font-face@ در css و بارگیری خود فونت از حافظه فونت Google Fonts.

تفاوت کامل بین Cufon و @font-face در این است که اولی از js برای شبیه سازی فونت استفاده می کند و کاراکترها را با استفاده از ابزار خود ترسیم می کند، در حالی که @font-face خود فونت را روی رایانه بازدیدکننده بارگذاری می کند و مرورگر قبلاً از آن برای نمایش متن استفاده می کند. .

در هر صورت Cufon و @font-face سرعت بارگذاری سایت را کاهش می دهند، البته نه به میزان قابل توجهی.

استفاده از فونت های گوگل در وب سایت

من زیاد نمی نویسم و ​​برای مدت طولانی، یک مثال خاص از اتصال فونت های گوگل را با استفاده از این وبلاگ به عنوان مثال می زنم.

همانطور که می بینید، سرفصل ها و عنوان های فرعی مقاله من نیستند فونت استاندارد، اکنون در عمل به شما نشان می دهم که چگونه این کار را انجام دهید و شما نیز همین کار را در سایت های خود امتحان خواهید کرد.

انتخاب فونت در مخزن

برای اینکه نترسید، توضیح می دهم - مخزن یک مخزن است، اما به روشی بورژوایی :). و بنابراین، اجازه دهید به http://www.google.com/fonts/و به دنبال فونت مناسب برای خود بگردید:

در منو زیاد نیست:
در سمت چپ، همانطور که می بینید، یک بلوک با انواع فیلترهای جستجوی فونت وجود دارد که در آن می توانید به عنوان مثال فقط فونت های لاتین یا سیریلیک را انتخاب کنید. و در بالا، تنظیمات برای نمایش نمونه ها، که به 4 تب تقسیم می شوند:

• کلمه- نمایش چندین حرف در این حالت، مقایسه فونت های زیادی به طور همزمان و دیدن شخصیت های خاص بسیار راحت است.
• جمله- نمایش در قالب یک جمله؛
• پاراگراف- یک قطعه متن بزرگ نمایش داده می شود که به شما امکان می دهد فونت را به صورت بصری در خود متن مقایسه کنید.
• پوستر- عناوین نمایش داده می شوند. این روش مقایسه برای انتخاب فونت مورد استفاده در سرفصل ها مناسب است.

اتصال فونت به سایت

پس از آن در پنل Collection که در پایین قرار دارد، به تب Use بروید که وظیفه استفاده از فونت های مجموعه شما را بر عهده دارد. در اینجا بلافاصله خواهید دید که گوگل نشان می دهد که سرعت بارگذاری صفحه چقدر کاهش می یابد:

در زیر یک پانل با انتخاب "نوع نمایش" وجود دارد، لاتین (لاتین) و سیریلیک (سیریلیک) را انتخاب کنید، که به ما این فرصت را می دهد تا حروف لاتین و سیریلیک را نمایش دهیم:

بعد از این به سومین نقطه این صفحه یعنی خود اتصال می رویم. گوگل سه گزینه برای جاسازی فونت های خود به ما ارائه می دهد - از طریق js، راه استاندارداز طریق اتصال به و @import در فایل css. من از روش دوم استفاده می کنم.

فایل css خود را باز کنید و خطی را که گوگل به ما ارائه کرده است بنویسید:

تمام شد، فونت را از فونت گوگل به سایت وصل کردیم، حالا چگونه از آن استفاده کنیم؟

استفاده در CSS

همه چیز بسیار ساده است، پس از اینکه فونت را از طریق @import وصل کردیم، باید دستورالعمل‌های استانداردی را برای کلاس‌ها و شناسه‌هایی بنویسیم که از ما استفاده می‌شود. فونت جدید. به عنوان مثال:

h1، h2، h3 (فونت-خانواده: «Cuprum»، sans-serif؛)

پس از تمام این دستکاری ها، سرفصل هایی با فونت جدید و غیر استاندارد خواهید دید.

این همه، از توجه شما متشکرم و به زودی شما را می بینم.

یادگیری در مورد همه چیز به تنهایی آسان نیست، اما بسیار جالب است. اگر حداقل درک سطحی از نحوه کار سایت دارید، برای اجرای پروژه خود بهتر است خودتان آن را انجام دهید. در عین حال، شما نه تنها پول زیادی را پس انداز خواهید کرد، بلکه بسیاری از "ترفندها، اسرار و غیره" را نیز یاد خواهید گرفت. استفاده از فونت های گوگل معمولاً جلب توجه نمی کند، اگرچه به لطف آنها وبلاگ می تواند بسیار بیشتر شود. جالب

خدمات

مدت ها پیش، یک سرویس فونت وب بزرگ در اینترنت ظاهر شد. توسعه داده شد توسط گوگل. کاربران می توانستند به صورت رایگان از آن استفاده کنند. علیرغم این واقعیت که این نوع راه اندازی فوق العاده پیچیده در نظر گرفته نمی شود، هنوز هم افرادی بودند که اشتباه می کردند و نمی توانستند با این سرویس کنار بیایند.

یک طرح ساده به طور ویژه برای این منظور توسعه داده شد. اکنون کار با فونت های گوگل آسان تر شده است و تعداد بازدیدکنندگان افزایش یافته است. کتابخانه نیز گسترش یافته است. سال گذشته، این سرویس دوباره طراحی شد که بازخوردهای مثبت زیادی دریافت کرد. اکنون برای افراد آسان‌تر است که فونت‌ها را به وب‌سایت‌های خود متصل کرده و آنها را مشاهده کنند.

ظاهر

بنابراین، برای کسانی که هرگز به سایتی با طراحی قدیمی نرفته‌اند، باید تصویری کلی از تغییرات داشته باشند. در گذشته، این سرویس بسیار گسترده به نظر می رسید. همه جا فریم های ضخیم وجود داشت، دکمه های آبی پر زرق و برق، گرافیک بهترین نبود وضوح بالا. همه اینها به طور قابل توجهی بر بازدید کننده تأثیر گذاشت.

اکنون توسعه دهندگان بر روی متریال دیزاین تمرکز کرده اند. همه چیز ویژگی های تصفیه شده ای به دست آورده است. ظاهر"آسان تر" شد. انیمیشن ظریف و تعامل قابل توجه شد. هیچ چیز دیگری وجود ندارد که شما را از انتخاب فونت مناسب Google Fonts منحرف کند.

یک سازگاری مناسب از منبع برای وجود دارد دستگاه های تلفن همراه. البته چنین تغییری در پس زمینه نوآوری ها چندان قابل توجه نیست، اما با در نظر گرفتن اشکالات نسخه قبلیبرای کاربران مشتاق تبدیل به "مانا از بهشت" خواهد شد.

فرصت

طراحان اغلب از این سرویس استفاده می کنند. با وجود تجربه و حرفه ای بودن، با تجسم هم کار می کنند. طراحی مجدد فرصت های مشابه بیشتری را فراهم کرد که به شما امکان می دهد آنچه را که بعداً در پروژه خود باید پیاده سازی کنید، از قبل ترکیب کنید.

بنابراین، مشکل نحوه مطابقت یک فونت با رنگ دیگر و پس زمینه سوم از بین رفته است. این شرکت ابزارهای بیشتری را به سایت اضافه کرد و یک پالت با رنگ های جهانی اضافه کرد که به شما امکان می دهد آزمایش کنید و بفهمید که یک فونت خاص در یک رنگ خاص چگونه به نظر می رسد.

موارد دلخواه

سرویس فونت Google Fonts به کاربران این امکان را می دهد که از گزینه های مورد علاقه خود استفاده کنند. یک برگه ویژه شامل مجموعه‌ای از سبک‌ها است که توسعه‌دهنده آن‌ها را برای استفاده توصیه می‌کند. این مجموعه ها از بقیه متمایز هستند. آنها توسط متخصصانی از Google و آژانس های شخص ثالث توسعه یافته اند. اغلب آنها سبک خاصی دارند و فلسفه خاصی دارند.

مشاهده کنید

یکی از تغییرات مهم مربوط به انتخاب فونت بود. این بدان معنی است که قبلاً کاربر یک تصویر خاص با دکمه های اضافی و یک آبی بزرگ را در مقابل خود می دید که فونت را به مجموعه اضافه می کرد. به طور کلی، این گزینه خوب به نظر می رسید، اما جعبه همیشه وضوح تصویر به اندازه کافی با سبک نداشت، و بنابراین تعیین اینکه فونت چگونه به نظر می رسد دشوار بود.

همچنین سوالاتی در مورد این دکمه های اضافی وجود داشت که در نگاه اول اطلاعات کمی در مورد آنها وجود داشت. باید یا به آنها اشاره می کردید یا از آنها استفاده می کردید. حالا همه چیز کم و بیش روشن شده است. ویژگی های اضافی ظاهر شده است:

• یک جمله، پاراگراف یا عنصر متن سفارشی خاص را انتخاب کنید.
• آزمایش وزن فونت
• اندازه ها را با استفاده از نوار لغزنده به سرعت تنظیم کنید.

به هر حال، تغییر اندازه فونت گوگل تطبیقی ​​تر شد، زیرا فقط یک نمونه تغییر کرد و نه همه چیز در صفحه. در نسخه قدیمیکاربران می توانند از یک طرف صفحه به طرف دیگر منتقل شوند، اما در صفحه جدید شما به سادگی روی مثالی که در حال تنظیم آن هستید باقی می مانید.

اتصال

اگر آماده استفاده از این سرویس هستید، می توانید فونت ها را به منبع خود متصل کنید. فرآیند به دست آوردن پیوند جهانی است. بسته به سیستم CMS شما ممکن است مشکلات ایجاد شود. هر کدام از روش های خاص خود استفاده می کنند. بنابراین، شما باید گزینه های جداگانه ای را برای پروژه های مختلف انتخاب کنید.

ما نحوه دریافت پیوند برای اتصال فونت های گوگل را بررسی خواهیم کرد. شما باید به وب سایت رسمی فونت های گوگل بروید. در آنجا فهرستی از سبک‌ها را مرور می‌کنید و یکی را انتخاب می‌کنید که برای شما مناسب‌تر است. برای این کار روی علامت مثبت کنار آن کلیک کنید. سپس فونت به یک بلوک خاص در پایین صفحه اضافه می شود.

روی این بلوک کلیک کنید و سپس آن را پیکربندی کنید. در اینجا می توانید سبک و الفبای مورد نظر را انتخاب کنید. اگر به فونت های سیریلیک گوگل نیاز دارید، خط سیریلیک را بررسی کنید. پس از آن یک لینک تولید خواهد شد. می توان آن را در همان پنجره در تب Embed یافت. شما فقط باید آن را کپی کنید یا از آن استفاده کنید کد کامل HTML.

معمولا در تنظیمات سایت تنظیماتی برای فونت و رنگ وجود دارد. گزینه های استاندارد وجود دارد و می توانید موارد پیشرفته را اضافه کنید. آنها حاوی یک گزینه جداگانه برای فونت های گوگل هستند. اگر باید فونت ها را از طریق افزونه Supreme Google Webfonts دانلود کنید.

گزینه های محبوب

البته قضاوت در مورد اینکه کدام سبک بهتر است، به خصوص برای موضوعات مختلف وب سایت، دشوار است. هنگام ایجاد وب سایت خود، به یاد داشته باشید که نه برای شما، بلکه برای مخاطبانتان جذاب است. بنابراین بهتر است نگاهی دقیق تر به سایت های رقیب بیندازید.

معمولا، برای منابع تجاری، هیچ کس در مورد سبک ها زحمت نمی کشد. پس از همه، اگر یک فونت در آن می بینید گوگل کرومدر یک فروشگاه آنلاین، بعید است که روی آن تمرکز کنید. اما اگر وبلاگی در مقابل خود دارید، به احتمال زیاد ممکن است برخی چیزها را دوست داشته باشید، اما برخی دیگر، برعکس، شما را آزار خواهند داد.

فونت گوگل مجموعه های زیادی را آماده کرده است که شامل سبک های محبوب است. به عنوان مثال، آنها دوست دارند از Lobster برای تک تک بلوک های متن استفاده کنند. وقتی کل مقاله با چنین حروف برجسته نوشته شده باشد، خواندن آن سخت است. اما درج ها و نقل قول ها خوب به نظر می رسند.

Bad Script نیز گزینه ای برای وبلاگ ها است. خواندن حجم زیاد متن از نوع کج دشوار است، اما می تواند ایده اصلی را برجسته کند. این سبک از دست خط تقلید می کند. Jura normal 400 گزینه جالبی برای الفبای سیریلیک است. نویسنده ادعا می کند که این یک یورواستایل از خانواده Sans Serif است. واقعاً خیلی خوب به نظر می رسد و چندین تنوع دارد.

سلام به همه مطالبی که در درس 132 نوشتم را می توانید بخوانید. و در این مقاله به شما خواهم گفت که چگونه می توانید به راحتی و به سرعت یک فونت را از فونت گوگل به وب سایت خود متصل کنید. با استفاده از سرویس فونت گوگل، باید فونتی را برای سایت خود انتخاب کنید و سپس آن را متصل کنید.

نیازی به آپلود فایل فونت در هاست نیست. کافی است کد HTML مورد نیاز را در هدر سایت و به نام فونت جدید بنویسید. فونت ها را می توان نه تنها به یک سایت وردپرس، بلکه به هر سایت دیگری متصل کرد.

نحوه اتصال فونت های گوگل به وب سایت

برویم به سرویس گوگلاز این لینک فونت را انتخاب کنید و فونت مورد نیاز خود را انتخاب کنید.
فونت ها را می توان از طریق فیلتر انتخاب کرد. یعنی ما پارامترها را تنظیم می کنیم و به این ترتیب سرویس فونت هایی را با پارامترهای انتخاب شده پیدا می کند.

در صورت لزوم می توانید پارامترهای دیگری را تنظیم کنید: ضخامت (ضخامت فونت) ، مایل (میل) ، عرض (عرض قلم).

همچنین اگر سایت شما به زبان روسی است، باید الفبای سیریلیک را انتخاب کنید: سیریلیک (سیریلیک)، یا سیریلیک گسترده (سیریلیک توسعه یافته).

هنگامی که پارامترها انتخاب می شوند، سرویس تمام فونت هایی را که با آنها در دسترس هستند نشان می دهد.

نشانگر ماوس را به فونتی که می‌خواهیم در سایت نصب کنیم حرکت می‌دهیم، پس از آن تنظیمات/پارامترهای اضافی ظاهر می‌شوند: Quick-use (استفاده سریع)، Pop out (مشاهده فونت در یک پنجره جداگانه) و افزودن به مجموعه (افزودن) به مجموعه).

انتخاب کنید " استفاده سریع"و ما می بینیم از سمت راستویجت سرعت سنج این نشان می دهد که فونت انتخاب شده با چه سرعتی بارگیری می شود. چگونه تعداد کمتردر این سرعت سنج، بهتر است.

حتی پایین تر، می توانید یکی از سه گزینه را برای نصب فونت در سایت انتخاب کنید: استاندارد، @import یا javascript.

برای هر گزینه دستورالعمل وجود دارد. انگلیسی، نحوه اتصال صحیح فونت به سایت. من گزینه اول را به شما نشان خواهم داد " استاندارد"، زیرا ساده تر است.

خط مشخص شده با رنگ قرمز را کپی کنید و سپس آن را در فایل header.php بین تگ ها قرار دهید ….

سپس فایل style.css را باز کنید، فونتی را که باید تغییر دهید پیدا کنید و یک فونت جدید اضافه کنید. ما به سادگی نام فونت جدید را می نویسیم. ما فونت Google Fonts را در علامت نقل قول قرار می دهیم، به عنوان مثال، font-family: "Aladin",Arial,Helvetica,Sans-serif.

اگر اصلاً چیزی در مورد آنچه در اینجا گفتم متوجه نشدید، پس ویدیویی را که در آن با جزئیات صحبت می کنم تماشا کنید. نحوه اتصال فونت گوگل به سایت وردپرس

______________________
برای درس 204. بدون افزونه

با سلام خدمت خوانندگان عزیز. امروز در مورد فونت های گوگل ( فونت های وب گوگل ) ، نحوه دانلود و اتصال آنها به سایت صحبت خواهیم کرد.

بریم تو سایت www.google.com/fonts/، در فیلتر سمت راست انتخاب می کنیم: 1. دسته مورد نظر، 2. در صورت لزوم، آنها را مرتب کنید و 3. زبان مورد نیاز خود را انتخاب کنید (اگر به یک فونت روسی در منوی سمت چپ نیاز دارید، انتخاب کنید. سیریلیک).

بنابراین ما فونت را انتخاب کردیم، اکنون باید سبک آن را انتخاب کنیم، برای انجام این کار، پانل را در پایین گسترش دهید ( کشوی انتخاب را باز کنید) و به تب بروید سفارشی کردنو سبک ها و زبان های مورد نیاز خود را انتخاب کنید.

برای دانلود روی دکمه کلیک کنید دانلود کنید.

اتصال فونت دانلود شده

فونت های موجود در آرشیو را در پوشه /fonts کپی کنید، که باید در همان پوشه /css سایت HTML شما باشد.

اتصال استاندارد فونت های دانلود شدهشبیه این است

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot? #iefix") format("embedded-opentype"), url_file(e_on) قالب -سبک: عادی)

در مورد من اتصال به این شکل خواهد بود

/* کد گنجاندن فونت در /css/style.css */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") قالب ("truetype")؛ فونت - سبک: وزن فونت: معمولی؛

برای اتصال فونتی که انتخاب کرده اید به سایت، به تب بروید EMBED، در آنجا 2 روش اتصال را مشاهده خواهید کرد:

1. استاندارد

این کد باید به بخش اضافه شود سند HTML شما

2. @IMPORT

url @import("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");

مهم است. صرف نظر از روش اتصال، از قوانین CSS زیر برای تعریف این خانواده ها استفاده کنید: font-family: ‘Roboto’, sans-serif; بیشتر در این مورد در زیر

مشکلات