سلام به همه! امروز می خواهم نحوه استفاده را به شما بگویم 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 .

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

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

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

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

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

بریم تو سایت 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") قالب ("embedded-opentype"), url_file(name.F) قالب -سبک: عادی؛ )

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

/* کد گنجاندن فونت در /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; بیشتر در این مورد در زیر

حامی مطالب.
کولر گازی در فروشگاه اینترنتی 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؛)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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