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

سرویس

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

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

ظاهر

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

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

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

فرصت

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

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

انتخاب شد

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

چشم انداز

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

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

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

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

ارتباط

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

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

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

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

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

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

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

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

اسکریپت بد نیز یک گزینه برای وبلاگ ها است. نوع منحنی سنگین برای خواندن آرایه های بزرگ متن، اما شما می توانید ایده اصلی را اختصاص دهید. این سبک دست خط دست نوشته را تقلید می کند. JURA NORMAL 400 یک گزینه جالب برای سیریلیک است. نویسنده ادعا می کند که این Eurostil از خانواده Sens Serip است. به نظر می رسد واقعا بسیار خوب است و دارای چندین تغییر است.

WebFonts تکنولوژی استفاده از فونت های شخص ثالث در صفحه وب خود است. یک مثال:

اگر از منبع شروع کنید، تگ فونت در سال 1995 معرفی شد و در سال 1996 تعریف نرم افزاری به CSS نوشته شد. شروع از نسخه CSS 2.0، سنتز فونت معرفی شد و سنتز مرورگرها، اما با این حال، پس از آن هنوز محبوب است، و در حال حاضر قدیمی و نامناسب یعنی پشتیبانی از فونت بارگیری، که مانع توسعه سریع فونت در وب سایت خود را ندارد.

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

فرمت های فایل

برای اتصال فونت ها، قرار دادن نرم افزار در CSS استفاده می شود، به اصطلاح @ -Evilo استفاده می شود. بنابراین، ب. فرم ساده @ فونت چهره چنین اعلامیه ای است. به نظر می رسد این است:

/ * فونت * / font-face را اعلام کنید (font-face: "font name"؛ src: url ("path / up / it")؛) / * اعمال * / P ، Arial؛)
TTF یا OTF - فایل فونت معمولی، اما بارگیری از سرور در طول زمان مشاهده سایت؛

WOFF یک آرشیو منبع OTF یا TTF محافظت نشده است، شاید مهمترین فرمت که محبوب ترین مرورگرها پشتیبانی می کند، و فایل ها در WOFF معمولا 2-2.5 برابر راحت تر از اصلی است؛

EOT - معرفی آرشیو TT OpenType، داشتن مکانیسم های حفاظت، مورد نیاز برای پشتیبانی از مرورگرهای قدیمی اینترنت اکسپلورر. (با شروع از IE8، به جز منحنی های TrueType، پشتیبانی و PostScript)؛

SVG - برای حمایت از مرورگر Safari.

آماده سازی برای پیاده سازی (font-face) به فونت سایت امروز باید بلافاصله در چند فرمت باشد. شما متوجه شدید که برخی از اختلافات وجود دارد، و همچنین یک نوع وجود ندارد سیستم های عامل. فرمت های فونت بسیار زیاد هستند، اما بتن تنها در یک مرورگر خاص کار می کند. همانطور که برای این اکثر فرمت ها، چرا لازم است که آنها را در هنگام اتصال به آنها مشخص کنید، سپس آنها برای پشتیبانی متقابل مرورگر سایت مورد نیاز است.

@ Font-face (Font-family: "ashrift_name"؛ src: url (file_name_shift.eot ")؛ src: url (file_file_shift.eot؟ #iefix") فرمت ("Embedded-openType")، URL ("فایل NAME_SHIFT .WOFF ") فرمت (" WOFF ")، URL (" file_shift.ttf ") فرمت (" TRUETYPE ")، URL (" file_fail_name.svg # dsnoteregular ") فرمت (" SVG ")؛ فونت وزن: طبیعی؛ فونت -Style: عادی؛)
اگر می خواهید از کد رمزگذاری شده به جای فایل استفاده کنید، در این مورد، Base64 به کمک کمک می کند، که در همان اصل و با تصاویر کار می کند، با این حال، برای قدیمی IE Base64 پردازش نشده است.

@ Font-face (font-family: "ashift_name"؛ src: url (file_name_shift.eot ")؛) @ font-face (font-family:" ashrift_name "؛ src: url (داده ها: font / woff؛ charset \u003d UTF-8؛ فرمت Base64، داده) فرمت ("WOFF")، URL (داده ها: فونت / trueType؛ charset \u003d UTF-8؛ فرمت base64، داده) ("trueType")، URL ("file_name_svg #file_shot_name") فرمت ( "SVG")؛ فونت وزن: عادی؛ فونت سبک: عادی؛)

OpenType جاسازی شده؟

همانطور که ممکن است متوجه شوید، پلاگین ها برای IE دارای یک خط با چنین پارامتر هستند:

src: url (file_file_seot؟ #iefix ") فرمت (" Embedded-openType ")
در نسخه کلاسیک، ما مجبور شدیم با شما این را مشخص کنیم:

SRC: URL ("file_shift.eot") فرمت ("Embedded-openType")
اما هنگام اضافه کردن نماد "؟" پس از فرمت فونت، ما به زور به عنوان مرورگر را به عنوان خواندن نشانگر زیر - فرمت ("Embedded-openType") را مشخص نمی کنیم. اینترنت اکسپلورر از تعبیه فونت ها از طریق شرکت به اصطلاح شرکت OpenType تعبیه شده پشتیبانی می کند، با شروع نسخه یعنی 4.0. از روش مدیریت حقوق دیجیتال برای جلوگیری از فونت هایی که به مجوز اعمال می شود استفاده می کند.

اگر فونت در مرورگر پشتیبانی نمی شود چه؟

مدت ها پیش، جاده های دور زدن در حال حاضر اختراع شده بودند، به اصطلاح "crutches" برای نمایش فونت. مواردی وجود دارد که فونت فقط در فرمت SVG یا فقط در فرمت TTF طراحی شده باشد.

1. در روزهای گذشته، توسعه دهندگان تصویر را متصل کردند، که به نوبه خود این متن را به دست آورد ویرایشگر بصری. با این حال، در حال حاضر آن را به عنوان یک لحظه بد محسوب می شود، برای پشتیبانی پیش بینی شده است (شما باید دوباره ویرایشگر را دوباره باز کنید تا متن تصویر را تغییر دهید)، کاربر نمی تواند متن را از تصویر کپی کند.

2. همچنین استفاده از راه حل های فلش معمول بود.

3. راه حل دیگری است با استفاده از جاوا اسکریپتبرای جایگزینی متن با VML (برای اینترنت اکسپلورر) یا SVG (برای همه مرورگرهای دیگر).

چه مشکلی هنوز اتفاق می افتد؟

مرورگر سعی خواهد کرد تا بارگذاری فونت را همگام سازی کند، سعی خواهد کرد متن را پنهان کند، یعنی آن، تا زمانی که فونت بارگیری شود، نامرئی باشد. این اثر Foit نامیده می شود، اثر "فلش سفید".

اثر فلش

Foit اثر در مرورگرها مانند Safari، Chrome، Opera، فایرفاکس تمایل دارد متن را در حداکثر 30 ثانیه قبل از عدم رد کردن فونت، پس از آن فونت پیش فرض تنظیم شود.

یک مثال از چگونگی بارگذاری فونت:

با این وجود، 2.7 ثانیه طول می کشد!

چه کاری می تواند انجام شود؟

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

با این حال، در هر آزمایش یک اثر جانبی وجود دارد.

در ابتدا، برام استین از یک فونت سفارشی استفاده کرد، اما بعد از اینکه فونتش بارگذاری شد، "سوسو زدن" رخ داد، در مثال 0.7 ثانیه:

به طور خلاصه، هنگامی که مرورگر در حال تلاش برای نمایش فونت از فونت است، رخ می دهد و آن را به HTML اعمال می کند. فونت تعریف شده در فونت @ font از اعلامیه، که هنوز بارگذاری نشده است.

برم استین نشان داد که چگونه فونت ها را به درستی وصل می کند، یک اسکریپت، یک جایگزین برای گوگل برای بارگذاری فونت ناهمزمان ایجاد کرد، این یک اسکریپت FontFaceObserver است.

تلاش

تحلیل و بررسی

اتصال استاندارد از گوگل

صادقانه، با استفاده از بیش از یک فونت در سایت، شما می توانید به طور خاص سرعت بارگذاری سایت را کاهش می دهد، در نتیجه افزایش کل زمان بار. گوگل فونت API به شما اجازه می دهد تا به سرعت فونت را به سایت با استفاده از ژنراتور فونت اضافه کنید، در نتیجه به سرعت طراحی وب سایت خود را. با این حال، شما باید اثر Foit را به یاد داشته باشید. کل زمان بار - 322 میلی ثانیه.

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

فونت وب سایت Loader - کتابخانه جاوا اسکریپت برای کار پیشرفته با API، یک کتابخانه است که به ما کنترل بیشتری بر روی بارگذاری فونت را نسبت به استاندارد Google Fonts API می دهد. این اسکریپت به ما اجازه می دهد تا از بسیاری از فونت ها استفاده کنیم، آنها را به صورت متوالی یا به طور متناوب بارگیری کنیم. در مقایسه با اتصال استاندارد، متن با فونت استاندارد بر روی اتصالات ضعیف نمایش داده می شود، تا زمانی که فونت بارگیری شود.
کل زمان بار: 1132 میلی ثانیه

fontfaceobserver

FontFaceObserver یک کتابخانه جاوا اسکریپت (5KB)، یک بوت به اصطلاح سازگار با هر سرویس وب فونت است. این اسکریپت به ما اجازه می دهد تا به ما اطلاع دهیم که آیا فونت بارگذاری شده یا نه، به شما امکان می دهد یک رویداد را پس از دانلود و تا بار فونت پیگیری کنید. کل زمان بار: 159 میلی ثانیه

با استفاده از اسکریپت

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

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

دو گزینه وجود دارد - پلاگین را وصل کنید، یا کمی به سوراخ با فایل functions.php.

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

فونت وب خوب و بد گوگل

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

یکی دیگر از ویژگی های این است گوگل به شما اجازه می دهد تا این فونت ها را آپلود کنید بنابراین شما می توانید آنها را در طرح های خود استفاده کنید.

و در نهایت پلت فرم کاملا رایگان است . برای شروع استفاده از فونت ها، فقط باید وارد سیستم شوید یا شروع کنید صندوق پستی در Gmail (و چه کسی امروز به Gmail نامه ای ندارد؟).

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

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

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

اگر شما به دنبال پلاگین ها هستید، اولین چیزی که در نتایج جستجو می بینید - pLAGINGS WP Google Fonts و آسان فونت های گوگل وب . این ها واقعا دو بهترین پلاگین هستند.

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

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

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

راه درست نصب فونت های گوگل در قالب وردپرس

در نهایت، ما به گزینه ای برای باز کردن فایل functions.php می رسیم و با کد کار می کنیم. قبل از این کار، باید فونت را از کتابخانه Google انتخاب کنید. به عنوان مثال، بیایید سعی کنیم بسیار محبوب باشیم باز SANS.

سپس شما باید سبک فونت را انتخاب کنید - نرمال، چرب یا ایتالیایی. شما قادر به انجام آن خودتان هستید :)

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

علاوه بر این، ما سبک CSS را دریافت کردیم:

فونت خانواده: "باز SANS"، SANS-SERIF؛

اکنون زمان باز کردن فایل functions.php (مسیر به فایل: WP-Content / Themes / YourTheme) است. در پایان فایل، یک ویژگی جدید اضافه کنید:

تابع load_fonts ()
{
wp_register_style ("et-googlefonts"،
"http://fonts.googleapis.com/css؟family\u003dopen+sans:300ITalic،400،500،300")؛ wp_enqueue_style ("et-googlefonts")؛
}
add_ction ("wp_print_styles"، "load_fonts")؛

کلید این ویژگی فرمان "WP_ENQUEUE_STYLE" است که باعث می شود وردپرس به تماس با سبک های سبک فونت در هدر هر صفحه. اگر به دقت نگاه کنید، خواهید دید، ما Href \u003d و Rel Link \u003d 'StyleSheet' TypeStext / CSS را حذف می کنیم، از کد که گوگل به ما داد، و شما باید همین کار را انجام دهید اگر می خواهید هر گونه اضافه کنید دیگر فونت گوگل برای سایت شما در وردپرس.

همه چیزهایی که اکنون باید انجام دهید این است که فایل اصلی CSS را باز کنید و یک سبک را با SANS باز کنید. قوانین عادی در اینجا وجود دارد، بنابراین کد زیر را به صفحه سبک اضافه کنید، ذخیره و به روز رسانی کنید:

بدن
{
فونت: عادی 1em "باز SANS"، SANS-SERIF؛
رنگ: # 313131؛
}

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

متن پررنگ
{
فونت: BOLD 1EM "باز SANS"، SANS-SERIF؛
}

همانطور که می بینید، در واقع، همه چیز بسیار ساده است. سعی کنید و نتیجه را بررسی کنید :)

با وجود فن آوری های وب جدید و راه اندازی، تا همین اواخر ما غنی و تایپوگرافی وب زیبا.

اگر چه ما یک انتخاب نسبتا گسترده ای از هدست ها داریم، ما فقط می توانیم از مجموعه ای خاص از فونت های مناسب نصب شده استفاده کنیم و توسط اکثر رایانه ها پشتیبانی می شود - این فونت ها به عنوان " فونت های وب امن (فونت های امن وب).

تایپوگرافی وب در برابر چاپ چاپ شده

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

اما اکنون، جدایی بین حامل های چاپ شده و مجازی کاهش می یابد. در حال حاضر @ Font-Face پشتیبانی بسیاری از مرورگرهای مدرن (از جمله اینترنت اکسپلورر از نسخه IE4.0.).

مقدمه ای به API فونت گوگل

Google Font Directory و API فونت گوگل از خدمات رایگان وب استفاده می کنند گوگلاین صاحبان سایت را با این فرصت برای استفاده از فونت های مختلف ساده، راحت و کارآمد ارائه می دهند.

گوگل فونت API - یک نماینده جدید از طاقچه، که شامل typekit, Typotheque و غیره.

بنابراین بیایید به پتانسیل ناشناخته برویم گوگل فونت API.

API فونت گوگل چیست؟

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

بیایید فونت های غیر استاندارد را تعیین کنیم که در میان ایمن نیستند ( عریان, Helvetica., وردانا, جورجیا و بار جدید رومی).

گوگل فونت API - این یک سرویس وب است که فونت های باز (منبع باز) با کیفیت بالا (منبع باز) را ارائه می دهد که به راحتی می تواند در طراحی شما مورد استفاده قرار گیرد.

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

مزایای استفاده از Google Font API

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

با استفاده از متن HTML

در مقایسه با استفاده از تصاویر یا جایگزینی با CSS پس زمینه تصویر، با استفاده از font-face، به عنوان راه حل برای تایپوگرافی وب جذاب تر، به طور مطلوب از نظر برنامه سئو..

علاوه بر این، شما نیازی به تغییر محتوای موجود نخواهید داشت - فقط خود را بهروزرسانی کنید CSS جداول

دسترسی

همانطور که شما استفاده می کنید html متن، نه یک تصویر یا پس زمینه CSSاین افراد با استفاده از برنامه ها برای خواندن روی صفحه تاثیر نمی گذارد.

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

از آنجا که دانلود Font-Face شما از زیرساخت های قابل اعتماد استفاده می کند گوگلشما می توانید مطمئن باشید که سرویس فایل فونت به سرعت در حال افزایش است، و شما می توانید بار خود را بر روی سرور خود را کاهش دهید.

نحوه استفاده از Google Font API

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

در اینجا یک فرآیند عمومی استفاده می شود گوگل فونت API:

مرحله 1: اضافه کردن یک لینک به یک صفحه سبک با فونت انتخاب شده

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

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

< p style = "فونت خانواده:" نام فونت "، serif"\u003e شش اصلاحات زیبا است< / p >

مرحله 3: همیشه یک گزینه ی اضافی داشته باشید.

شما ممکن است به این واقعیت توجه نکنید که در قطعات قبلی کد ما از Serif به عنوان فونت یدکی استفاده می شود. این کار به منظور جلوگیری از هر گونه نتایج غیر منتظره انجام می شود. این به این معنی است که اگر با سرورها گوگل چیزی اشتباه است، مرورگر می تواند از فونت استاندارد خود استفاده کند serif. آن را با یک عادت زمانی که شما از ویژگی فونت چهره استفاده می کنید، مهم نیست که آیا شما از font-face استفاده می کنید یا نه، همیشه فونت های اضافی را مشخص کنید - این تکنولوژی مجموعه فونت نامیده می شود.

مثال استفاده از API Google Font

کد بلوک زیر را به خود کپی کنید و آن را کپی کنید html سند، ذخیره آن، و سپس در مرورگر خود را باز کنید.

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

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

< html > < head > < link rel = "stylesheet" type = "text/css" < strong > href \u003d. "http://fonts.googleapis.com/css؟family\u003dlobster"< / strong >> < strong > < / strong > < / head > < body > < h1 > شش اصلاح زیبا است!< / h1 > < / body > < / html >

نتیجه:

درخواست استفاده از فونت های متعدد با API Google Font

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

به جای بسیاری از برچسب های لینک های سبک، از فرمت زیر برای ویژگی HREF از یک برچسب لینک یک شیوه استفاده کنید.

مثال زیر تمام سه فونت را بارگذاری می کند ( vollkorn, یانوون و خوانده مین) با استفاده از یک درخواست

< strong > vollkorn< / strong > | < strong > یانوون< / strong > | < strong > Droid + Sans.< / strong >

حالا شما می توانید از هر یک از این سه فونت در سبک های خود استفاده کنید.

چه باید توجه کرد

نام فونت جداگانه با استفاده از | بدون فضاها توجه به استفاده از + در فونت خوانده مین. از نماد + در نام فونت به جای یک فضا استفاده کنید.

نکته: استفاده از هم تعداد زیادی فونت ها در یک پرس و جو می توانند زمان پاسخ صفحه را افزایش دهند. بارگذاری فقط این فونت هایی که واقعا نیاز دارید. محافظه کار باشید

فونت وزن و سبک فونت فونت Font API

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

در مثال زیر ما نشان می دهیم پررنگ و کج با حروف درشت برای vollkorn، من. ایتالیا برای بی نظیر.

http: //fonts.googleapis.com/css؟family\u003dvollkorn: ب,بی| ناگوار: من.| DROID + SANS

چه باید توجه داشته باشید

استفاده از کولون (:) بدون فضای پس از نام فونت، و سپس نام سبک (I.E. bolditalic) یا کاهش مربوطه (I.E. BI) را مشخص کنید. اگر شما نیاز به انواع مختلفی از یک فونت دارید، آنها را با کاما (،) بدون فضایی تقسیم کنید.

API Google Font باعث می شود تایپوگرافی وب جذاب تر شود

صنعت طراحی وب به طور فعال به دنبال یک راه حل برای مشکل قدیمی انتخاب و استفاده از فونت های وب است، و مانند، font-face یک پاسخ است.

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

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

به عنوان یک نتیجه، گزینه های 617 پیشنهاد شده به من به طور مساوی به 5 کاهش یافته است به 5. شما بسیار گزینه های زیادی برای انجام پیش نمایش فونت - شما می توانید ببینید که چگونه کلمه به نظر می رسد، پیشنهاد، پاراگراف متن یا پوستر در فونت انتخاب شده است. شما می توانید یک متن از پیش تعریف شده را انتخاب کنید، می توانید متن خود را مشخص کنید، اندازه فونت مورد نظر را انتخاب کنید.

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

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

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

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

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

حالا ما به مرحله سوم می رویم، که دیگر به همان اندازه ساده نیست. در مرحله سوم، ما کد را که شما نیاز دارید به سایت های ما اضافه کنید - سه گزینه مختلف. ما گزینه استاندارد را انتخاب می کنیم - با این حال، ما تا حدودی از دستورالعمل های گوگل به طوری که از روش های ثابت شده برای اضافه کردن سبک به تم های وردپرس استفاده می کنیم. در کد برای نسخه استاندارد، فقط URL را کپی کنید، که به عنوان ویژگی HREF برای برچسب پیوند مشخص شده است.

سپس فایل Theme Functions.php را باز کنید. ما یک ویژگی برای دانلود CSS ایجاد خواهیم کرد، که ما در موضوع ما استفاده خواهیم کرد:

تابع ggl_load_styles () ()

پیشوند GGL را از عملکرد من ببینید؟ این یکی از موفقیت های موفقیت آمیز وردپرس است. همیشه پیشوند را به نام توابع خود در وردپرس اضافه کنید تا خطر درگیری های دیگر را با سایر توابع در موضوع خود، یک شرکت تابعه یا پلاگین کاهش دهید.

در حال حاضر در این تابع ما باید جدول ما از سبک های دریافت شده از گوگل را ثبت کنیم:

تابع ggl_load_styles () (iS_Admin ()) (wp_register_style) ("googlefont"، "http://fonts.googleapis.com/css؟family\u003dholtwood+One+Sc |

ما از تابع WP_Register_Style استفاده می کنیم. اولین استدلال یک توصیفگر است، I.E. کاهش ما می توانیم برای درخواست تجدید نظر به این جدول سبک در آینده در کد ما استفاده کنیم. استدلال دوم مسیر فایل است. ما از URL استفاده می کنیم که ما در مرحله سوم دستورالعمل های Google دریافت کردیم.

بعد، ما جدول سبک پایه ما را برای موضوع ما متصل می کنیم. امیدوارم شما برچسب پیوند را در قسمت سر فایل header.php خود قرار ندهید؟ اگر چنین است، سپس به فایل بروید و این کد را حذف کنید. سپس جدول سبک را در فایل functions.php وصل کنید:

تابع ggl_load_styles () (iS_ADMIN ()) (wp_register_style) ("googlefont"، "http://fonts.googleapis.com/css؟family\u003dholtwood+One+Sc | "، get_stylesheet_uri ()، آرایه (" Googlefont "))؛))

ما از تابع WP_Enqueue_Style استفاده می کنیم. این استدلال مشابهی به عنوان wp_register_style دارد. ابتدا یک توصیفگر را به جدول سبک ما متصل می کنیم. سپس راه را به جدول سبک ما برسانید. خوشبختانه، در وردپرس، شما می توانید مسیر را از طریق تابع get_stylesheet_uri () دریافت کنید. پس از آن، ما وابستگی ها را نشان می دهیم. فایل style.css ما بستگی به جدول سبک فونت Google Web دارد.

در نهایت، ما از wp_enqueue_scripts استفاده می کنیم تا با عملکرد ما تماس بگیرد:

تابع ggl_load_styles () (iS_ADMIN ()) (wp_register_style) ("googlefont"، "http://fonts.googleapis.com/css؟family\u003dholtwood+One+Sc | "، get_stylesheet_uri ()، آرایه (" Googlefont "))؛)) add_action (wp_enqueue_scripts،" ggl_load_styles ")؛

با فایل functions.php به پایان رسید. در حال حاضر ما ترک کرده ایم تا آخرین مرحله را برای استفاده از فونت انتخاب شده انجام دهیم. مرحله چهارم ب دستورالعمل های گوگل نشان می دهد ارزش هایی که ما باید به مالکیت فونت خانواده منتقل کنیم تا از فونت ما استفاده کنیم. من می خواهم تمام سرفصل هایم را با Holtwood One SC:

H1، H2، H3، H4، H5، H6 (فونت خانواده: "Holtwood One SC"، Serif؛)

و من می خواهم توضیحات سایت را ایجاد کنم، من می خواهم فونت اسکریپت روژ را ایجاد کنم:

توضیحات سایت (فونت خانواده: "اسکریپت دور"، cursive؛)

همه چيز! هیچ کاری بیشتر انجام نمی شود! شما فونت های فونت گوگل وب را به موضوع وردپرس خود اضافه کرده اید. استفاده از آنها مسئول!