Hamıya salam! Bu gün sizə necə istifadə edəcəyinizi söyləmək istəyirəm Google Fonts API sizə lazım olan şriftləri daxil etmək üçün.

Solda görə bilərsiniz filtr, və sağda müxtəlif şriftlərin nümunələri var. İstədiyiniz hər hansı birini seçin. Sonrakı düyməni basın tez istifadə.

Bundan sonra qarşınızda sizə lazım olan şrift üslublarını seçə biləcəyiniz bir səhifə görünəcək.

Məsələn, normal (400) və qalın (700) üslubu seçək.

Aşağıda, nömrə altında 3 , siz daxiletmə kodunu tapa bilərsiniz. Mən üslub faylına qoşulmağı seçməyi üstün tuturam, ona görə də nişanı klikləyəcəyəm @import. Bu kodu kopyalayın.

İndi bir fayl yaradaq index.html mətn paraqrafı ilə.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, məmur?

Stil cədvəlimizi etiketə daxil edək baş

Və stil cədvəlində, faylın əvvəlində, kopyalanan kodu yapışdırın.

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

Şrifti mən seçdim Açıq Sans misal kimi. O, çox birincidir.

Şrifti olan səhifədə nömrənin altında 4 , bizə lazım olan üslubu tapa bilərsiniz. Gəlin onu köçürüb abzasımıza tətbiq edək.

P (şrift ailəsi: "Open Sans", sans-serif; )

Hamısı! İndi yeni şriftinizdən zövq ala bilərsiniz!

Amma unutmayın ki, biz də cəsarətli üslubu seçmişik. İstifadə etmək üçün yazmağınız kifayətdir şrift çəkisi saytda seçdiyiniz nömrə ilə. Mənim vəziyyətimdə - 700 .

P(
font-family: "Open Sans", sans-serif;
şrift çəkisi: 700;
}

Cəsarət kimi, saytda onu seçmisinizsə, kursiv üslubdan da istifadə edə bilərsiniz.

İstifadəsi bu qədər asandır google şriftləri. Sonda bütün bu şriftlərin saytınızı yüklədiyini söyləməyə dəyər. Bunun üçün saytda şrift seçdiyiniz zaman sağda səhifənin nə qədər müddətə yüklənəcəyini göstərən göstərici var. Əmin olun ki, nömrə çox böyük deyil və yalnız sizə lazım olan şriftlərdən istifadə edin. Bütün üslubları bir anda seçməməlisiniz, onların nə qədər faydalı olacağını heç vaxt bilmirsiniz.

Beləliklə, bu qədər. Diqqətiniz üçün təşəkkür edirik və tezliklə görüşərik!

Materialın sponsoru.
http://www.technodom.kz/catalog/konditsionery onlayn mağazasında kondisionerlər. Kondisionerlər - ən yaxşı məhsullar, kreditlər, böyük seçim, qüsursuz xidmət.

Günortanız xeyir əziz oxucular. Yəqin ki, hamınız öz və ya müştərinizin vebsaytlarını daha qısa və cəlbedici etmək arzusundasınız.

Veb saytdakı məlumatların qəbuluna cavabdeh olan əsas amillərdən biri şriftlər və onlardan necə birlikdə istifadə etməyimizdir. Bir saytda olduğundan, iki və ya daha çox şrift növü ən çox istifadə olunur, məsələn, başlıqlar və yalnız əsas mətn üçün.

Mətnlərin oxunuşunu vizual olaraq yaxşılaşdırmaq imkanlarından biri üçüncü tərəf şriftlərini birləşdirməkdir. Axı, yəqin ki, hər kəs Windows-da mətnin brauzerdə göstərilməsinə cavabdeh olan standart kiril şrift kolleksiyasının nə qədər zəif olduğunu bilir.

Standart şriftlər:

Cufon və @font-face

Əvvəllər mən artıq yazmışdım ki, onunla qeyri-standart şriftləri sayta bağlaya bilərsiniz. İndi daha sadə üsula - css-də @font-face qaydasına və şriftin özünü Google Fonts şrift yaddaşından yükləməyə baxaq.

Cufon və @font-face arasındakı bütün fərq ondadır ki, birincisi şrifti təqlid etmək üçün js istifadə edir və öz vasitələrindən istifadə edərək simvol çəkir, @font-face isə şriftin özünü ziyarətçinin kompüterinə yükləyir və brauzer artıq mətni göstərmək üçün ondan istifadə edir. .

Hər halda, Cufon və @font-face saytın yükləmə sürətini əhəmiyyətli dərəcədə azaldır.

Veb saytında Google Şriftlərindən istifadə

Çox yazmayacağam və uzun müddət bu bloqdan nümunə olaraq istifadə edərək Google Şriftləri birləşdirmək üçün xüsusi bir nümunə verəcəyəm.

Gördüyünüz kimi, mənim məqalə başlıqları və alt başlıqları deyil standart şrift, indi praktikada bunu necə edəcəyinizi sizə göstərəcəyəm və siz də saytlarınızda eyni şeyi sınayacaqsınız.

Repozitoriyada şriftin seçilməsi

Qorxmamaq üçün izah edəcəyəm - anbar bir anbardır, amma burjua üslubunda :). Beləliklə, gedək http://www.google.com/fonts/ və özünüz üçün uyğun şrift axtarın:

Menyuda çox şey yoxdur:
Solda, gördüyünüz kimi, hər cür şrift axtarış filtrləri olan bir blok var, orada, məsələn, yalnız Latın və ya Kiril şriftlərini seçə bilərsiniz. Üstəlik, 4 nişana bölünən nümunələri göstərmək üçün parametrlər:

• Söz— bir neçə hərfin göstərilməsi. Bu rejimdə birdən çox şrifti müqayisə etmək və konkret simvolların necə göründüyünü görmək rahatdır;
• Cümlə— bir cümlə şəklində göstərmək;
• Paraqraf— mətnin özündə şrifti vizual olaraq müqayisə etməyə imkan verən böyük mətn parçası göstərilir;
• Poster— başlıqlar göstərilir; bu müqayisə üsulu başlıqlarda istifadə olunacaq şrifti seçmək üçün əlverişlidir.

Şriftin sayta qoşulması

Bundan sonra, aşağıda yerləşən Kolleksiya panelində kolleksiyanızdakı şriftlərdən istifadə üçün cavabdeh olan İstifadə sekmesine keçin. Burada dərhal Google-un səhifə yükləmə sürətinin nə qədər pisləşəcəyini göstərdiyini görəcəksiniz:

Aşağıda "ekran növü" seçimi olan panel, Latın (latın) və kiril (kiril) seçin, bu bizə həm Latın, həm də Kiril hərflərini göstərmək imkanı verəcək:

Bundan sonra bu səhifədəki üçüncü nöqtəyə, yəni əlaqənin özünə keçirik. Google bizə öz şriftlərini yerləşdirmək üçün üç seçim təklif edir - js vasitəsilə, standart yol-ə qoşulma yolu ilə və css faylında @import. Mən sonuncu üsuldan istifadə edirəm.

CSS faylınızı açın və Google-un bizə təqdim etdiyi sətri yazın:

Budur, Google Fonts-dan şrifti sayta bağladıq, indi ondan necə istifadə etmək olar?

CSS-də istifadə

Hər şey olduqca sadədir, şrifti @import vasitəsilə birləşdirdikdən sonra bizimkilərin istifadə olunacağı siniflər və identifikatorlar üçün standart təlimatlar yazmalıyıq. yeni şrift. Məsələn:

h1, h2, h3 (şrift ailəsi: 'Cuprum', sans-serif;)

Bütün bu manipulyasiyalardan sonra siz yeni, qeyri-standart şriftlə başlıqlar görəcəksiniz.

Hamısı budur, diqqətinizə görə təşəkkür edirəm və tezliklə görüşərik.

Hər şeyi təkbaşına öyrənmək asan deyil, lakin çox maraqlıdır. Saytın necə işlədiyinə dair heç olmasa səthi bir anlayışınız varsa, layihənizi həyata keçirmək üçün bunu özünüz etmək daha yaxşıdır. Eyni zamanda, siz nəinki çox pula qənaət edəcəksiniz, həm də bir çox "hiylələr", sirrlər və s. öyrənəcəksiniz. Google şriftlərindən istifadə adətən diqqəti cəlb etmir, baxmayaraq ki, onların sayəsində blog daha çox ola bilər. maraqlı.

Xidmət

Çox uzun müddət əvvəl İnternetdə böyük bir veb şrift xidməti meydana çıxdı. Bu inkişaf etdirildi Google tərəfindən. İstifadəçilər ondan pulsuz istifadə edə bilərdilər. Bu tip quraşdırmanın çox çətin hesab edilməməsinə baxmayaraq, hələ də səhvlərə yol verən və xidmətin öhdəsindən gələ bilməyən insanlar var idi.

Bunun üçün xüsusi olaraq sadə bir dizayn hazırlanmışdır. İndi Google Fonts ilə işləmək asanlaşıb və ziyarətçilərin sayı artıb. Kitabxana da genişləndi. Keçən il xidmət yenidən dizayn edildi və bu, çoxlu müsbət rəy aldı. İndi insanlar üçün şriftləri öz vebsaytlarına qoşmaq və onlara baxmaq daha asandır.

Görünüş

Beləliklə, köhnə dizaynı olan sayta heç vaxt daxil olmayanlar üçün dəyişikliklərin ümumi mənzərəsini əldə etməlisiniz. Əvvəllər xidmət olduqca kütləvi görünürdü. Hər yerdə qalın çərçivələr, parlaq mavi düymələr var idi, qrafika ən yaxşı deyildi yüksək qətnamə. Bütün bunlar ziyarətçiyə əhəmiyyətli dərəcədə təsir etdi.

İndi tərtibatçılar Material Dizaynına diqqət yetirdilər. Hər şey incə xüsusiyyətlər əldə etdi. Görünüş“asan” oldu. İncə animasiya və interaktivlik nəzərə çarpdı. Sizi düzgün Google Fonts şriftini seçməkdən yayındıracaq başqa heç nə yoxdur.

Üçün resursun rahat uyğunlaşması var mobil cihazlar. Əlbəttə ki, belə bir dəyişiklik yeniliklər fonunda çox nəzərə çarpmır, lakin səhvləri nəzərə alaraq əvvəlki versiya həvəsli istifadəçilər üçün “göydən gələn manna” olacaq.

Fürsət

Dizaynerlər tez-tez bu xidmətdən istifadə edirlər. Təcrübə və peşəkarlıqlarına baxmayaraq, onlar vizuallaşdırma ilə də işləyirlər. Yenidən dizayn daha sonra layihənizdə həyata keçirmək üçün lazım olanları əvvəlcədən birləşdirməyə imkan verən daha oxşar imkanlar təqdim etdi.

Buna görə də, bir şriftin digər rəngə və üçüncü fona necə uyğunlaşması ilə bağlı problem aradan qalxdı. Şirkət sayta daha çox alətlər və xüsusi şriftin müəyyən rəngdə necə görünəcəyini sınaqdan keçirməyə və öyrənməyə imkan verən universal tonları olan palitra əlavə etdi.

Sevimlilər

Google Fonts şrift xidməti istifadəçilərə sevimli seçimlərindən istifadə etməyə imkan verir. Xüsusi nişanda tərtibatçının istifadə üçün tövsiyə etdiyi üslublar dəsti var. Bu kolleksiyalar digərlərindən fərqlənir. Onlar Google və üçüncü tərəf agentliklərinin mütəxəssisləri tərəfindən hazırlanır. Onların əksəriyyətinin müəyyən üslubu və xüsusi fəlsəfəsi var.

Baxın

Əhəmiyyətli dəyişikliklərdən biri şrift seçimi ilə bağlı idi. Bu o deməkdir ki, əvvəllər istifadəçi onun qarşısında əlavə düymələri olan müəyyən bir şəkil və kolleksiyaya şrift əlavə edən böyük mavi şəkil görürdü. Ümumiyyətlə, bu seçim yaxşı görünürdü, lakin qutu həmişə üslubla təsvirin kifayət qədər yaxşı həllinə malik deyildi və buna görə də şriftin necə görünəcəyini birmənalı olaraq müəyyən etmək çətin idi.

İlk baxışdan çox az şey məlum olan bu əlavə düymələrlə bağlı suallar da var idi. Ya onlara işarə etməli, ya da istifadə etməli idin. İndi hər şey az-çox aydınlaşıb. Əlavə xüsusiyyətlər ortaya çıxdı:

• Xüsusi cümlə, paraqraf və ya fərdi mətn elementi seçin.
• Şrift çəkisi ilə sınaq.
• Sürgüdən istifadə edərək ölçüləri tez tənzimləyin.

Yeri gəlmişkən, Google şrift ölçülərinin dəyişdirilməsi daha uyğunlaşdı, çünki səhifədəki hər şey deyil, yalnız bir nümunə dəyişdirildi. IN köhnə versiya istifadəçilər səhifənin bir tərəfindən digərinə köçürülə bilər, lakin yenisində siz sadəcə olaraq düzəliş etdiyiniz nümunədə qalırsınız.

Əlaqə

Bu xidmətdən istifadə etməyə hazırsınızsa, şriftləri resursunuza qoşmağa cəhd edə bilərsiniz. Bağlantı əldə etmək prosesi universaldır. CMS sisteminizdən asılı olaraq problemlər yarana bilər. Hər biri öz metodlarından istifadə edir. Buna görə də, müxtəlif layihələr üçün ayrı seçimlər seçməli olacaqsınız.

Google şriftlərini birləşdirmək üçün bir keçid əldə etmək üçün necə baxacağıq. Rəsmi Google Fonts veb saytına daxil olmalısınız. Orada siz üslublar kataloquna baxırsınız və sizə ən uyğun olanı seçirsiniz. Bunu etmək üçün yanındakı artı işarəsini vurun. Bundan sonra şrift səhifənin ən aşağı hissəsində yerləşən xüsusi bloka əlavə olunacaq.

Bu bloku vurun və sonra onu konfiqurasiya edin. Burada üslubu və istədiyiniz əlifbanı seçə bilərsiniz. Əgər sizə Google Kiril şriftləri lazımdırsa, Kiril xəttini yoxlayın. Bundan sonra bir keçid yaradılacaq. Onu Yerləşdirmə tabında eyni pəncərədə tapmaq olar. Sadəcə onu kopyalamaq və ya istifadə etmək lazımdır tam kod HTML.

Adətən sayt parametrlərində şriftlər və rənglər üçün bir parametr var. Standart variantlar var və siz qabaqcılları əlavə edə bilərsiniz. Onlarda Google Fonts üçün ayrıca seçim var. Əgər siz Supreme Google Webfonts plagini vasitəsilə şriftləri endirməlisiniz.

Populyar variantlar

Hansı üslubların, xüsusən də müxtəlif veb sayt mövzuları üçün daha yaxşı olduğunu mühakimə etmək, əlbəttə ki, çətindir. Veb saytınızı yaradarkən unutmayın ki, o, sizə deyil, auditoriyanıza müraciət etməlidir. Buna görə də, rəqib saytlara daha yaxından baxmaq daha yaxşıdır.

Adətən, kommersiya resursları üçün heç kim üslubları narahat etmir. Axı, bir şrift görsəniz Google Chrome bir onlayn mağazada, ona diqqət yetirmək çətin deyil. Ancaq qarşınızda bir blog varsa, o zaman çox güman ki, bəzi şeylər xoşunuza gələ bilər, amma digərləri, əksinə, sizi qıcıqlandıracaq.

Google Fonts populyar üslubları ehtiva edən bir çox kolleksiya hazırlamışdır. Məsələn, fərdi mətn blokları üçün Lobster istifadə etməyi xoşlayırlar. Bütün məqalə belə qalın kursivlə yazılmışda oxumaq çətindir. Amma əlavələr və sitatlar yaxşı görünür.

Bad Script də bloqlar üçün seçimdir. Kursiv yazı böyük həcmdə mətni oxumaq çətindir, lakin əsas fikri vurğulaya bilər. Stil əl yazısını təqlid edir. Jura normal 400 kiril əlifbası üçün maraqlı seçimdir. Müəllif bunun Sans Serif ailəsindən olan Eurostyle olduğunu iddia edir. Həqiqətən çox yaxşı görünür və bir neçə varyasyona malikdir.

Hamıya salam! 132-ci dərsdə yazdıqlarım haqqında oxuya bilərsiniz. Və bu yazıda mən sizə Google Fonts-dan veb saytınıza şrifti necə asanlıqla və tez bir zamanda bağlaya biləcəyinizi söyləyəcəyəm. Google Şrift xidmətindən istifadə edərək saytınız üçün şrift seçməli və sonra onu birləşdirməlisiniz.

Şrift faylını hostinqə yükləmək lazım deyil. Saytın başlığına və yeni şriftin adına lazım olan HTML kodunu yazmaq kifayətdir. Şriftlər təkcə WordPress saytına deyil, həm də istənilən digər sayta qoşula bilər.

Google Şriftləri veb saytına necə qoşmaq olar

gedək Google xidməti Bu keçiddən şrifti seçin və bizə lazım olan şrifti seçin.
Şriftlər filtr vasitəsilə seçilə bilər. Yəni biz parametrləri təyin edirik və beləliklə xidmət seçilmiş parametrlərlə şriftləri tapır.

Lazım gələrsə, digər parametrləri təyin edə bilərsiniz: qalınlıq (şriftin qalınlığı), maili (maili), genişlik (şriftin eni).

Saytınız rus dilindədirsə, siz həmçinin kiril əlifbasını seçməlisiniz: kiril (kiril) və ya kirill genişlənmiş (kirill genişlənmiş).

Parametrlər seçildikdə, xidmət bunlarla mövcud olan bütün şriftləri göstərəcək.

Siçan kursorunu saytda quraşdırmaq istədiyimiz şriftin üzərinə aparırıq, bundan sonra əlavə parametrlər/parametrlər görünür: Tez istifadə (sürətli istifadə), Pop-out (şriftə ayrı pəncərədə baxın) və Kolleksiyaya əlavə edin (əlavə et) kolleksiyaya).

seçin " Tez istifadə"və biz görürük sağ tərəf spidometr vidceti. Seçilmiş şriftin nə qədər sürətli yükləndiyini göstərir. Necə daha kiçik rəqəm bu spidometrdə, bir o qədər yaxşıdır.

Aşağıda sayta şrift quraşdırmaq üçün üç variantdan birini seçə bilərsiniz: standart, @import və ya javascript.

Hər bir seçim üçün təlimatlar var. İngilis dili, yazı tipini sayta necə düzgün qoşmaq olar. Mən sizə birinci variantı göstərəcəyəm” standart", çünki daha sadədir.

Qırmızı rənglə vurğulanmış xətti kopyalayın və sonra onu teqlər arasında header.php faylına yapışdırın ….

Sonra style.css faylını açırıq, dəyişdirilməsi lazım olan şrifti tapırıq və yenisini əlavə edirik. Sadəcə olaraq yeni şriftin adını yazırıq. Biz Google Şrift şriftini dırnaq içərisində yerləşdiririk, məsələn, font-family: "Aladin",Arial,Helvetica,Sans-serif.

Əgər burada dediklərimdən heç nə başa düşmürsənsə, o zaman ətraflı danışdığım videoya baxın, Google Şrifti WordPress saytına necə qoşmaq olar

______________________
204-cü dərs üçün. plagin olmadan

Salam, əziz oxucular. Bu gün biz google şriftləri (google web şriftləri), onları necə yükləmək və sayta qoşmaq haqqında danışacağıq.

Sayta gedək www.google.com/fonts/, sağdakı filtrdə biz seçirik: 1. istədiyiniz kateqoriya, 2. lazım gələrsə, onları çeşidləyin və 3. bizə lazım olan dili seçin (soldakı menyuda rus şriftinə ehtiyacınız varsa, seçin. kirillik).

Beləliklə, şrifti seçdik, indi onun üslubunu seçməliyik, bunun üçün altındakı paneli genişləndirməliyik ( Seçim qutusunu açın) və nişana keçin ÖZƏLDİRİN və sizə lazım olan üslubları və dilləri seçin.

Yükləmək üçün düyməni sıxın yüklə.

Yüklənmiş şriftin qoşulması

Arxivdəki şriftləri HTML saytınızın /css qovluğu ilə eyni kataloqda olması lazım olan /fonts qovluğuna kopyalayın.

Yüklənmiş şriftlərin standart bağlantısı belə görünür

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") format("inmbedded-opentype"), url("Font_file" .woff") format("woff"), url("Font_file_name.ttf") format("truetype"), url("Font_file_name.svg#DSNoteRegular") format("svg"); font-weight: normal; font -stil: normal)

Mənim vəziyyətimdə əlaqə belə görünəcək

/* /css/style.css-ə şrifti daxil etmək üçün kod */ @font-face ( font-family: "RobotoRegular"; url("../fonts/RobotoRegular.ttf") format("truetype"); font - üslub: normal şrift çəkisi: normal)

Seçdiyiniz şrifti sayta qoşmaq üçün nişana keçin QURDUR, orada 2 əlaqə üsulunu görəcəksiniz:

1.STANDART

Bu kodu bölməyə əlavə etmək lazımdır HTML sənədiniz.

2. @IMPORT

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

Əhəmiyyətli. Bağlantı metodundan asılı olmayaraq, bu ailələri müəyyən etmək üçün aşağıdakı CSS qaydalarından istifadə edin: font-family: ‘Roboto’, sans-serif; aşağıda bu barədə daha ətraflı.

Problemlər