Ամեն ինչի մասին ինքնուրույն սովորելը հեշտ չէ, բայց շատ հետաքրքիր: Եթե ​​դուք ունեք առնվազն մակերեսային պատկերացում, թե ինչպես է աշխատում կայքը, ապա ձեր նախագիծն իրականացնելու համար ավելի լավ է դա ինքներդ անեք: Դրանով դուք ոչ միայն շատ գումար կխնայեք, այլև կսովորեք շատ «չիպսեր», գաղտնիքներ և այլն: Google տառատեսակների օգտագործումը սովորաբար ուշադրություն չի գրավում, չնայած դրանք կարող են ձեր բլոգը շատ ավելի հետաքրքիր դարձնել նրանց շնորհիվ:

Ծառայություն

Շատ վաղուց ինտերնետում հայտնվեց վեբ տառատեսակների մեծ ծառայություն: Այն մշակվել է Google- ի կողմից: Օգտագործողները կարող էին օգտագործել այն անվճար: Չնայած այն հանգամանքին, որ այս տեսակի կարգավորումը գերբարդ չի համարվում, այնուամենայնիվ, կային մարդիկ, ովքեր սխալներ թույլ տվեցին և չկարողացան գլուխ հանել ծառայությունից:

Դրա համար հատուկ մշակվել է պարզ դիզայն: Google տառատեսակների հետ այժմ ավելի հեշտ է աշխատել և ավելի շատ այցելուներ: Գրադարանը նույնպես ընդլայնվել է: Անցյալ տարի տեղի ունեցավ ծառայության վերափոխում, որն արժանացավ բազմաթիվ դրական գնահատականների: Այժմ մարդկանց համար ավելի հեշտ է միացնել և թերթել տառատեսակները իրենց կայքերին:

Արտաքին տեսք

Այսպիսով, նրանց համար, ովքեր երբեք չեն եղել հին դիզայնով կայքում, դուք պետք է ընդհանուր պատկերացում կազմեք փոփոխությունների մասին: Serviceառայությունը նախկինում բավականին զանգվածային տեսք ուներ: Ամենուր կային հաստ շրջանակներ, գրավիչ կապույտ կոճակներ, գրաֆիկան ամենաբարձր լուծման չէր: Այս ամենը մեծ ազդեցություն ունեցավ այցելուի վրա:

Այժմ մշակողները կենտրոնացել են Material Design- ի վրա: Ամեն ինչ ձեռք է բերել բարդ հատկություններ: Արտաքին տեսքը դարձել է «ավելի թեթև»: Նուրբ անիմացիան և ինտերակտիվությունը նկատելի դարձան: Ոչինչ այլևս չի շեղում ուշադրությունը Google Տառատեսակների ճիշտ ընտրությունից:

Բջջային սարքերի համար ռեսուրսի հարմարվողականացում է հայտնվել: Իհարկե, նորամուծությունների ֆոնին նման փոփոխությունն այնքան էլ նկատելի չէ, բայց հաշվի առնելով նախորդ տարբերակի սխալները ՝ այն «երկնային մանանա» կդառնա անկուշտ օգտագործողների համար:

Հնարավորություն

Դիզայներները հաճախ օգտվում են այս ծառայությունից: Չնայած իրենց փորձին և պրոֆեսիոնալիզմին, նրանք նաև աշխատում են վիզուալիզացիայի միջոցով: Վերափոխումը ներկայացնում էր այս հատկանիշներից ավելի շատ, ինչը թույլ կտար նախապես համատեղել այն, ինչ անհրաժեշտ կլինի հետագայում իրականացնել ձեր նախագծում:

Հետևաբար, այն խնդիրը, թե ինչպես է մեկ տառատեսակը զուգորդվում մեկ այլ գույնի և երրորդ ֆոնի հետ, անհետացավ: Ընկերությունը կայքում ավելացրել է ավելի շատ գործիքներ և ունիվերսալ երանգներով պալիտրա, ինչը թույլ կտա նրանց փորձեր կատարել և պարզել, թե ինչպիսի տեսք կունենա որոշակի տառատեսակը որոշակի գույնի մեջ:

Ֆավորիտներ

Google Fonts ծառայությունը օգտվողներին տրամադրում է իրենց նախընտրածների ընտրանի: Հատուկ ներդիրը պարունակում է մի շարք ոճեր, որոնք մշակողը խորհուրդ է տալիս օգտագործել: Այս հավաքածուներն առանձնանում են մնացածից: Դրանք մշակվում են Google- ի և երրորդ կողմի գործակալությունների փորձագետների կողմից: Նրանցից շատերն ունեն որոշակի ոճ և որոշակի փիլիսոփայություն:

Դիտել

Կարեւոր փոփոխություններից մեկն ուղղակիորեն անդրադարձավ տառատեսակների ընտրության վրա: Նշանակում է, որ ավելի վաղ օգտվողն իր առջև տեսել էր լրացուցիչ գծանշան ՝ լրացուցիչ կոճակներով և մեծ կապույտով, որը տառատեսակին ավելացրել էր հավաքածուն: Ընդհանուր առմամբ, այս տարբերակը լավ տեսք ուներ, բայց տուփը միշտ չէ, որ պատկերի բավականաչափ լավ լուծում է ունեցել ոճով, և, հետևաբար, դժվար էր միանշանակ որոշել, թե ինչ տեսք կունենա տառատեսակը:

Հարցեր կային նաև այս լրացուցիչ կոճակների վերաբերյալ, որոնց մասին առաջին հայացքից քիչ բան էր հայտնի: Անհրաժեշտ էր կամ ուղղել դրանք, կամ օգտագործել դրանք: Հիմա ամեն ինչ քիչ թե շատ պարզ է դարձել: Լրացուցիչ հնարավորություններ են հայտնվել.

• Ընտրեք կոնկրետ նախադասություն, պարբերություն կամ ձեր սեփական տեքստի տարրը:
• Փորձեր տառատեսակի կշիռների հետ:
• Չափի արագ ճշգրտում ՝ սահիչի միջոցով:

Ի դեպ, Google տառատեսակի չափափոխումն այժմ ավելի շատ է արձագանքում, քանի որ փոխվել է միայն մեկ օրինակ, ոչ թե ամեն ինչ էջում: Հին տարբերակում օգտվողները կարող էին էջի մի կողմից մյուսն անցնել, սակայն նոր տարբերակում դուք պարզապես մնում եք այն օրինակի վրա, որը հարմարեցնում եք:

Միացում

Եթե ​​պատրաստ եք օգտագործել այս ծառայությունը, կարող եք փորձել տառատեսակները միացնել ձեր ռեսուրսին: Հղում ստանալու հենց գործընթացը համընդհանուր է: Խնդիրներ կարող են առաջանալ ՝ կախված ձեր CMS համակարգից: Յուրաքանչյուրն օգտագործում է իր մեթոդները: Հետեւաբար, տարբեր նախագծերի համար դուք ստիպված կլինեք ընտրել առանձին տարբերակներ:

Մենք կանդրադառնանք, թե ինչպես ստանալ Google տառատեսակները միացնելու հղում: Դուք պետք է գնաք Google Fonts պաշտոնական կայք: Այնտեղ դուք թերթում եք ոճերի կատալոգը և ընտրում ձեր կարիքներին առավել համապատասխան մեկը: Դա անելու համար սեղմեք դրա կողքին դրված գումարած նշանը: Դրանից հետո տառատեսակը կավելացվի էջի ներքևի մասում գտնվող հատուկ բլոկին:

Կտտացրեք այս բլոկին և լրացուցիչ հարմարեցրեք այն: Այստեղ կարող եք ընտրել ոճերն ու ցանկալի այբուբենը: Եթե ​​Ձեզ անհրաժեշտ են Google Cyrillic տառատեսակներ, ապա ստուգեք Cyrillic տողը: Դրանից հետո կապ կստեղծվի: Այն կարելի է գտնել նույն պատուհանում ՝ Տեղադրեք ներդիրում: Պարզապես պետք է պատճենել այն կամ օգտագործել ամբողջական HTML կոդը:

Սովորաբար կայքի պարամետրերում կա տառատեսակների և գույների պարամետր: Կան ստանդարտ տարբերակներ, բայց կարող եք ավելացնել առաջադեմները: Նրանք պարունակում են առանձին տարբերակ Google տառատեսակների համար: Եթե ​​ձերն է, ապա պետք է ներբեռնեք տառատեսակներ Supreme Google Webfonts հավելվածի միջոցով:

Հանրաճանաչ ընտրանքներ

Իհարկե, դժվար է դատել, թե որ ոճերն են ավելի լավը, հատկապես կայքի տարբեր թեմաների համար: Ձեր կայքը ստեղծելիս հիշեք, որ այն պետք է ոչ թե ձեզ դուր գա, այլ ձեր լսարանը: Հետեւաբար, ավելի լավ է ավելի մոտիկից նայեք մրցող կայքերին:

Սովորաբար առևտրային ռեսուրսների համար ոչ ոք չի անհանգստանում ոճերի մասին: Ի վերջո, եթե առցանց խանութում Google Chrome- ում տեսնում եք տառատեսակ, ապա դժվար թե դրա վրա անդրադառնաք: Բայց եթե ձեր առջև բլոգ կա, ապա, ամենայն հավանականությամբ, կարող է ձեզ ինչ -որ բան դուր գալ, բայց ինչ -որ բան, ընդհակառակը, նյարդայնացնող կլինի:

Google Fonts- ը պատրաստել է բազմաթիվ հավաքածուներ, որոնք ներառում են հանրաճանաչ ոճեր: Օրինակ, Lobster- ը օգտագործվում է տեքստի առանձին բլոկների համար: Դժվար է կարդալ, եթե ամբողջ հոդվածը գրված է նման համարձակ շեղագիր տառերով: Բայց ներդիրներն ու մեջբերումները լավ տեսք ունեն:

Bad Script- ը նաև բլոգավարման տարբերակ է: Շեղատառ տիպը դժվար է կարդալ տեքստային մեծ զանգվածներ, բայց դրանք կարող են ընդգծել հիմնական գաղափարը: Ոճը նմանակում է ձեռագիրը: Jura normal 400 -ը հետաքրքիր տարբերակ է կիրիլյան այբուբենի համար: Հեղինակը պնդում է, որ սա Եվրոստայլ է Սանս-Սերիֆ ընտանիքից: Այն իսկապես լավ տեսք ունի և ունի մի քանի տատանումներ:

Այս գլխի առաջին մասը նվիրված է CSS տառատեսակների ներածությանը: Այս էջում դուք կսովորեք, թե ինչպես ներառել տառատեսակները CSS- ում, ինչ վեբ տառատեսակներ են և ինչպես աշխատել դրանց հետ, ինչ տառատեսակներ կան, ինչպես օգտագործել Google տառատեսակները: Նախ, եկեք նայենք CSS տառատեսակի միացման հեշտ օրինակին.

P (տառատեսակի ընտանիք ՝ Verdana;)

Այս փոքրիկ կտոր կոդը նշանակում է, որ բոլոր պիտակները

Տառատեսակը Վերդանա է: Տառատեսակ-ընտանիքի հատկությունը սահմանում է, թե որ տառատեսակն է օգտագործվելու: Այս ոճի ճիշտ ցուցադրումը օգտագործողի դիտարկիչում կախված է նրանից, թե նշված տառատեսակը տեղադրված է նրա համակարգչում: Մեր դեպքում, եթե Verdana տառատեսակը բացակայում է օգտագործողի համակարգչում, դիտարկիչը կցուցադրի կանխադրված տառատեսակը:

Timeամանակին դիզայներները ստիպված էին լրացուցիչ նշել մի քանի փոխարինող տառատեսակներ, եթե հիմնականը բացակայում էր օգտագործողի համակարգչում: Ենթադրենք, դուք ցանկանում եք տեքստը ձևավորել Verdana տառատեսակով և տեղադրել Trebuchet MS, Geneva տառատեսակները և ցանկացած sans-serif տառատեսակ որպես հետընտրական: Այսպես է գրված.

P (տառատեսակ-ընտանիք ՝ Verdana, «Trebuchet MS», vaնև, sans-serif;)

Այս ծածկագիրը մշակելիս դիտարկիչը նախ ստուգելու է Verdana տառատեսակի առկայությունը օգտվողի համակարգչում: Եթե ​​տառատեսակը ներկա է, պիտակների բովանդակությունը

Displayուցադրված է այս տառատեսակով: Եթե ​​տառատեսակը բացակայում է, դիտարկիչը կստուգի ցուցակի հաջորդ տառատեսակը `Trebuchet MS: Եթե ​​այս տառատեսակը բացակայի, ապա հաջորդ տառատեսակը կստուգվի `Geneնև: Եթե ​​օգտագործողը համակարգչում չունի Geneնև, զննարկիչը կընտրի մեկ այլ մատչելի sans-serif տառատեսակ և դրա հետ կցուցադրի տեքստը:

Նշում:ծածկագրում մենք չակերտների մեջ գրի առանք Trebuchet MS տառատեսակի անունը: Անհրաժեշտ է տառատեսակի անունը ներառել կրկնակի կամ մեկ չակերտների մեջ, երբ այն բացատներ է պարունակում:

Թե ինչ է serif և sans-serif տառատեսակը, կարող եք կարդալ Վիքիպեդիայի էջում:

Վեբ տառատեսակներ

Տառատեսակների օգտագործման վերը նշված եղանակն ունի հսկայական թերություն. Դուք սահմանափակ եք տառատեսակների քանակով: Դուք ստիպված կլինեք բավարարվել միայն այն տարբերակներով, որոնք ամենայն հավանականությամբ տեղադրված են համակարգիչների մեծ մասում:

Ինչպե՞ս կարող եք մեծացնել տառատեսակների ընտրությունը ՝ էջի ձևավորումն անհատականացնելու, ինքնատիպություն ավելացնելու համար: Վեբ տառատեսակները գալիս են օգնության: Կարդացեք գլուխը ՝ պարզելու, թե ինչպես աշխատել նրանց հետ:

Այսպիսով, օգտագործողի դիտարկիչում ցանկալի տառատեսակը ցուցադրելու համար մեզ անհրաժեշտ է, որ այս տառատեսակը ներբեռնվի հենց իր համակարգչում: Սա բավականին հեշտ է իրականացնել: Տառատեսակները CSS- ին միացնելու այս մեթոդը իսկապես մեծ հնարավորություններ է բացում դիզայներների համար: Բայց արժե նշել քսուքի մեջ եղած ճանճը. Նախ ՝ ամեն դիտարկիչ չի աջակցում տառատեսակի որոշակի ձևաչափ (ինչը կհանգեցնի նրան, որ տառատեսակը չի ցուցադրվի), և երկրորդ ՝ եթե տառատեսակով ֆայլը մեծ քաշ ունի, այն կարող է դանդաղեցնել ներքևի էջի բեռնում:

Ձևաչափի աջակցություն

Ինչպե՞ս վարվել ֆայլի ձևաչափի անհամապատասխանության խնդրի հետ: Եկեք նայենք աղյուսակին, որը ցույց է տալիս տառատեսակի ամենահայտնի ձևաչափերը և տեսնենք, թե որ բրաուզերներն են դրանք աջակցում.

Նշում:Դուք միշտ կարող եք գտնել տառատեսակի ձևաչափի աջակցության վերաբերյալ վերջին տեղեկությունները caniuse.com կայքում: Որոնման տողում դուք պետք է մուտքագրեք ձևաչափի անունը (օրինակ ՝ ttf):

Եթե ​​թիրախավորում եք ժամանակակից բրաուզերներին, ապա ձեզ հարկավոր կլինի միայն օգտագործել TTF տառատեսակի ձևաչափը `ամենատարածվածն ու օգտագործվածը: Այն դեպքում, երբ դուք պետք է ունենաք մեկ տառատեսակի մի քանի ձևաչափ, կարող եք օգտագործել հատուկ առցանց փոխարկիչներ ՝ մեկ ձևաչափից մյուսը, այնուհետև միացնել բոլոր ֆայլերը մեկ առ մեկ: Այսպիսով, դիտարկիչը կկարողանա ընտրել տառատեսակի ձևաչափը, որով այն աշխատում է:

Ներառյալ վեբ տառատեսակ ՝ օգտագործելով @ font-face

Ենթադրենք, դուք ունեք ձեր ուրույն տառատեսակը, որը կոչվում է MyUniqueFont TTF ձևաչափով և ցանկանում եք, որ ձեր վեբ էջի հիմնական տեքստը ցուցադրվի այս տառատեսակով: Առաջին բանը, որ պետք է անել, պատճենել տառատեսակի ֆայլը այն թղթապանակում, որտեղ տեղակայված են կայքի մյուս բոլոր ֆայլերը: Խառնաշփոթությունից խուսափելու համար դուք կարող եք ստեղծել առանձին թղթապանակ հատուկ տառատեսակների համար `անվանելով այն, օրինակ` տառատեսակներ:

@ font-face (font-family: MyUniqueFont; src: url ("fonts / MyUniqueFont.ttf");)

Տառատեսակի ընտանիքի հատկությունը այս դեպքում այլ դեր է խաղում. Դրանով մենք տառատեսակին տալիս ենք անուն, որպեսզի ոճը գրելիս կարողանանք օգտագործել այս անունը.

P (տառատեսակի ընտանիք ՝ MyUniqueFont;)

Երկրորդ տողը պարունակում է տառատեսակի ֆայլի ուղին: Մեր օրինակում MyUniqueFont.ttf ֆայլը գտնվում է տառատեսակների թղթապանակում: Ձեր URL- ը կարող է տարբեր լինել:

Google տառատեսակներ

Google- ը հեշտացնում է Google Fonts- ի հավաքածուից ցանկացած տառատեսակի ներառումը: Այն, ինչ ձեզ հարկավոր է սկսել ձեր նախընտրած տառատեսակը, Google- ում տառատեսակի էջում նշեք մի քանի կարգավորումներ, այնուհետև պատճենեք այս տառատեսակի հատուկ հղումը և ավելացրեք այն ձեր վեբ փաստաթղթում:

Նշում: Google- ի տառատեսակների ամբողջ հավաքածուն հասանելի է կայքում Google տառատեսակներ... Էջում կարող եք օգտագործել տարբեր զտիչներ ՝ տառատեսակներ որոնելու ըստ կատեգորիայի, հաստության, այբուբենի:

Ստորև մենք նկարագրելու ենք Google- ից տառատեսակ միացնելու յուրաքանչյուր քայլ: Հասկանալու համար, թե ինչի մասին է խոսքը, ընտրեք ցանկացած տառատեսակ Google Տառատեսակների էջից և բացեք այն ՝ կտտացնելով Արագ գործածման կոճակին:

Քայլ 1: Ընտրեք դեմք

Առաջին հերթին, ընտրված տառատեսակի էջում կցուցադրվեն դրա ոճի տարբերակները, ինչպես նաև արագաչափի պատկերակը, ինչը ոչ այլ ինչ է նշանակում, քան տառատեսակի բեռնման արագություն: Որքան շատ ոճ ընտրեք տառատեսակի համար, այնքան ավելի երկար կպահանջվի այն ներբեռնելու համար: Հետևաբար, խորհուրդ է տրվում ընտրել միայն տառատեսակի այն տարբերակները, որոնք նախատեսում եք օգտագործել:

Քայլ 2: Ընտրեք այբուբեն

Հետագա էջում հնարավոր է ընտրել նիշերի շարք ՝ լատիներեն, կիրիլյան և այլն: Կախված տառատեսակից, այբուբենի ոչ բոլոր տարբերակները կարող են հասանելի լինել դրանում: Նախորդ կետի նման, ավելի լավ է տիզ դնել միայն ձեզ անհրաժեշտ այբուբենի դիմաց:

Քայլ 3: Կոդ ավելացրեք կայքում

Առաջին մեթոդը ներառում է HTML սերվերում Google սերվերի հղում ավելացնելը, որտեղից ներբեռնվում է տառատեսակը: Դուք պետք է պատճենեք պատրաստի կոդը և տեղադրեք այն պիտակների միջև ձեր HTML փաստաթղթում: Օրինակ:

...

Երկրորդ ճանապարհն այն է, որ տառատեսակը միացնենք ՝ օգտագործելով @import հրահանգը: Ավարտված կոդը գտնվում է 3 -րդ կետի երկրորդ ներդիրում `ընտրված Google տառատեսակի էջում: Այն պետք է ավելացվի ձեր ոճաթերթի սկզբում (հակառակ դեպքում ֆայլը չի ​​ներմուծվի): Կոդն այսպիսին է.

@import url (http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

Առաջին մեթոդի առանձնահատկությունն այն է, որ յուրաքանչյուր էջի վերնագրում անհրաժեշտ է ավելացնել տառատեսակի հղում, որտեղ նախատեսում եք օգտագործել այն: Սա հեշտ է անել փոքր քանակությամբ էջերով կայքերում, բայց խնդրահարույց է մեծ ռեսուրսների համար: Երկրորդ մեթոդը հարմար է, քանի որ կոդը կարող է տեղադրվել արտաքին ոճաթերթի հենց սկզբում, այնուհետև բոլոր էջերը, որոնց այս աղյուսակը միացված է, կստանան անհրաժեշտ տառատեսակը, որը կբեռնվի ՝ օգտագործելով @import հրահանգը:

Քայլ 4: Ստեղծեք ոճ

Նախորդ քայլերն ավարտելուց հետո կարող եք սկսել կիրառել տառատեսակը: Դուք նախկինում տեսել եք, թե ինչպես է գրված նման CSS կանոն.

P (տառատեսակ-ընտանիք ՝ «Roboto», sans-serif;)

Եթե ​​առաջին քայլին ընտրեցիք տառատեսակի մի քանի տարբերակ (օրինակ ՝ ավելացրեց համարձակ տիպի Bold 700 տարբերակ), ապա երրորդ քայլում ծածկագիրը մի փոքր կփոխվի.

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

Այնուհետև տառատեսակը համարձակ դարձնելու համար CSS ոճը գրեք այսպես.

P (տառատեսակ-ընտանիք ՝ «Roboto», sans-serif; տառաչափը ՝ 700;)

Նշում: Google տառատեսակները տառատեսակի քաշը ցույց տալու համար օգտագործում են միայն 100 -ից 900 -ի սովորական պայմանական միավորներ: Օրինակ ՝ նորմալ (լռելյայն) համարժեքը 400 է (նորմալ), իսկ ստանդարտ համարը համարժեք է 700 -ին (համարձակ):

Google Fonts ծառայության հիմնական առավելություններն են.

• օգտագործման հարմարավետություն (նույնիսկ սկսնակը կարող է պարզել ծառայությունը, և բոլոր անհրաժեշտ ծածկագրերը ինքնաբերաբար են ստեղծվում. պարզապես անհրաժեշտ է պատճենել այն);
• տառատեսակների առկայություն (դրանց համար վճարելու կարիք չկա);
• տրամադրված են բոլոր օգտագործվող տառատեսակների ձևաչափերը (սա նշանակում է, որ յուրաքանչյուր դիտարկիչ կկարողանա ներբեռնել հենց այն տառատեսակի ձևաչափը, որով այն աշխատում է):

Theառայության թերությունների շարքում տառատեսակների շատ լայն տեսականի չկա, հատկապես կիրիլիցայի: Ի դեպ, ինտերնետում կան նմանատիպ այլ ծառայություններ, օրինակ ՝ TypeKit (վճարովի):

Արդյունքներ

Այսօր մենք ունենք մի քանի տարբերակ ՝ բնօրինակ և ոչ ստանդարտ տառատեսակները վեբ էջերին միացնելու համար: Այս մեթոդներից յուրաքանչյուրն ունի իր դրական և բացասական կողմերը: Ընտրանքներից որն է ավելի լավ օգտագործել, դուք պետք է որոշեք ինքներդ: Սա հաճախ կախված է իրավիճակից, և տարբեր մոտեցումներ կարող են օգտակար լինել տարբեր դեպքերում: Այս պահին պարզապես անհրաժեշտ է իմանալ, թե ինչպես օգտագործել տառատեսակներ CSS- ում:

Google տառատեսակները անվճար վեբ տառատեսակների լավագույն ռեսուրսներից մեկն է, և Google- ը ձեզ տալիս է դրանք մի քանի եղանակ ներմուծելու ձեր վեբ կայք: Unfortunatelyավոք, դրանցից ոչ մեկը չի ներառում հանրահայտ WordPress շարժիչը: Սա նշանակում է, որ դուք կամ պետք է օգտագործեք հավելումներ, որոնցից շատերը կան, կամ ձեր ձեռքերը կեղտոտեք ՝ կոդի հետ շփոթվելով:

Լավ նորությունն այն է, որ կարող եք տեղադրել Google գրադարանի ցանկացած տառատեսակ գրեթե ցանկացած WordPress թեմայի վրա ՝ առանց ավելորդ քաշքշուկների: Ինչպես ճշգրիտ - մենք ձեզ այսօր կսովորեցնենք:

Գոյություն ունի երկու տարբերակ ՝ միացրեք plugin- ը կամ մի փոքր շոշափեք function.php ֆայլով:

Բայց նախ, ես կցանկանայի թվարկել Google տառատեսակների առավելություններն ու թերությունները, որպեսզի վերջապես որոշեք ՝ դրանք օգտագործել ձեր նախագծերում, թե ոչ:

Լավ և վատ Google վեբ տառատեսակներ

Ինչ վերաբերում է վեբ տառատեսակներին, Google- ը լավագույն տարբերակներից մեկն է: կատարման առումով ... Բոլորը ՝ թեթև կառուցվածքի և քեշավորման համակարգի պատճառով: Այցելուները չպետք է սպասեն Google Տառատեսակների բեռնումին, եթե նրանք վերջերս այցելել են դրանք օգտագործող կայք: Հանրաճանաչ տառատեսակները, ինչպիսիք են Open Sans- ը, կարող են բարելավել ձեր կայքի աշխատանքը `նվազեցնելով բեռնման ժամանակը:

Մեկ այլ առանձնահատկությունն այն է Google- ը թույլ է տալիս ներբեռնել այս տառատեսակները այնպես որ կարող եք դրանք օգտագործել ձեր դասավորության մեջ:

Եւ, վերջապես հարթակը լիովին անվճար է ... Տառատեսակներ օգտագործելու համար պարզապես անհրաժեշտ է մուտք գործել կամ ստեղծել փոստարկղ Gmail- ում (իսկ ո՞վ այսօր Gmail- ում փոստ չունի):

Թերություններից դա կարող եք նշել google տառատեսակների ընտրությունը փոքր է , նրանցից շատերը նման են միմյանց: Արժանապատիվ, օրիգինալ տառատեսակ գտնելու համար շատ որոնումներ են պահանջվում: Կիրիլյան տառատեսակներ շատ քիչ կան:

Բացի այդ, կան սովորական անվտանգության մտահոգությունները - ձեր կայքում Google- ից տառատեսակներ տեղադրելիս պետք է տրամադրեք որոշ անձնական տվյալներ:

Ինչպես տեղադրել Google տառատեսակներ ՝ օգտագործելով WordPress հավելումները

Եթե ​​որոնում եք հավելումներ, առաջին բանը, որ տեսնում եք որոնման արդյունքներում, դա է WP Google տառատեսակներ և Easy Google վեբ տառատեսակներ հավելումներ ... Սրանք իսկապես երկու լավագույն հավելումներն են:

Պլագինները իդեալական լուծում չեն Google տառատեսակները WordPress կայքում տեղադրելու համար ՝ ոչ միայն կատարման տեսանկյունից, այլև այն պատճառով, որ հավելումները թույլ չեն տալիս ընտրել տեքստի որոշակի կտորներ: Այնուամենայնիվ, եթե դուք կամ ձեր հաճախորդը համոզված եք, որ ավելի լավ է օգտագործել plugins, ապա նայեք այս երկու տարբերակներին:

Այս հավելվածը թույլ է տալիս թիրախավորել որոշակի տարրեր, ինչպիսիք են H1- ի վերնագրերը, պարբերությունները և մեջբերումները: Դուք նաև ստանում եք հատուկ CSS տարբերակ ՝ հատուկ տառատեսակներ հետագա ոճավորելու համար: Ձեր WordPress կայքում Google տառատեսակների ավելացումն ու հարմարեցումը բավականին հեշտ է այս հավելումով:

Հեշտ Google վեբ տառատեսակները համապատասխանում են իր անունին և Google տառատեսակների տեղադրումը չափազանց հեշտ է դարձնում նույնիսկ սկսնակների համար: Դուք կարող եք օգտագործել Live Preview հնարավորությունը ՝ առանց կայքից դուրս գալու տառատեսակները նախադիտելու, փորձարկելու և օպտիմալացնելու համար և ստեղծելու ձեր տառատեսակի կանոնները ՝ առանց կոդի տող գրելու:

WordPress ձևանմուշում Google տառատեսակները տեղադրելու ճիշտ ձևը

Ի վերջո, մենք հասնում ենք այն գործառույթին, որը բացում է functions.php ֆայլը և մի փոքր կոդ պատրաստում: Նախքան դա անելը, դուք պետք է տառատեսակ ընտրեք Google գրադարանից: Որպես օրինակ, եկեք փորձենք վերցնել շատ սիրվածը Բաց առանց բառերի.

Այնուհետեւ դուք պետք է ընտրեք տառատեսակի ոճ `նորմալ, համարձակ կամ շեղագիր: Դուք ինքներդ կարող եք դա անել :)

Ոճերն ընտրելուց հետո Google- ը ձեզ կտրամադրի կոդի հատված: Մեր տեսքն այսպիսին է.

Բացի այդ, մենք ստացանք CSS ոճը.

font-family: "Open Sans", sans-serif;

Այժմ ժամանակն է բացել ձեր functions.php ֆայլը (ֆայլի ուղին ՝ wp-content / themes / yourtheme): Ֆայլի վերջում ավելացրեք նոր գործառույթ.

ֆունկցիա load_fonts ()
{
wp_register_style ("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style ("et-googleFonts");
}
add_action ("wp_print_styles", "load_fonts");

Այս գործառույթի բանալին «wp_enqueue_style» հրամանն է, որը ստիպում է WordPress- ին յուրաքանչյուր էջի վերնագրում կանչել տառատեսակի ոճի թերթեր: Եթե ​​ուշադիր նայեք, կտեսնեք, որ մենք հեռացրել ենք href = և rel = 'stylesheet' type'text / css 'հղումը Google- ի տված ծածկագրից, և նույնը պետք է անեք, եթե ցանկանում եք ավելացնել որևէ այլ Google տառատեսակ ձեր WordPress կայքի համար:

Այն, ինչ այժմ պետք է անեք, բացեք հիմնական CSS ֆայլը և տեղադրեք ոճը Open Sans- ից: Սովորական կանոններն այստեղ գործում են, ուստի ձեր ոճաթերթին ավելացրեք հետևյալ ծածկագիրը, պահպանեք և թարմացրեք.

մարմին
{
տառատեսակ `նորմալ 1em" Բաց Sans ", sans-serif;
գույնը ՝ # 313131;
}

Այս ոճը կգործի ամբողջ կայքում: Տեքստի առանձին հատվածների համար կարող եք այլ ոճ սահմանել.

Համարձակ տեքստ
{
տառատեսակ ՝ համարձակ 1em "Բաց Sans", sans-serif;
}

Ինչպես տեսնում եք, դա իրականում շատ պարզ է: Փորձեք և ստուգեք արդյունքը :)

Վլադ Մերժևիչ

Տառատեսակը վեբ դիզայնի անբաժանելի մասն է, տալիս է կայքի արտահայտիչությունն ու ճանաչումը, արտահայտում է կայքի բնորոշ ոճը և անմիջականորեն կապված է տեքստերի ընկալման հետ: Հնարավոր է, որ լավ ընտրված տառատեսակը չնկատվի, բայց առանց դրա չի լինի վեբ կայքի ձևավորումն ավարտող եռանդ:

Եթե ​​ձեր համակարգչում արդեն տեղադրված է որոշակի տառատեսակ, ապա ոճերում բավական է ավելացնել տող:

h1 (տառատեսակի ընտանիք ՝ SuperPuperFont;)

Տառատեսակ-ընտանիքի հատկության արժեքը տառատեսակի անունն է, այն կկիրառվի բոլոր վերնագրերի վրա

... Բայց ի՞նչ կտեսնեն կայքի այցելուները, եթե տեղադրված չլինի մեր տպավորիչ և հազվագյուտ տառատեսակը: Այս իրավիճակը ամենայն հավանականությամբ է, այնպես որ, եթե դիտարկիչը չի ճանաչում հայտարարագրված տառատեսակը, այն կօգտագործի կանխադրված տառատեսակը, օրինակ ՝ Windows- ում դա Times New Roman- ն է: Մեր բոլոր մանրակրկիտ մտածված տիպի դիզայնը մեկ գիշերվա ընթացքում կփլուզվի, ուստի մենք պետք է փնտրենք առավել բազմակողմանի լուծում: Առաջին բանը, որ անմիջապես միտք է գալիս, կազմակերպել տառատեսակի ներբեռնումը օգտագործողի համակարգչում և տեքստը ցուցադրել ընտրված տառատեսակով: Այլ մեթոդների համեմատ, ինչպիսին է տեքստի ցուցադրումը նկարի միջոցով, այս մեթոդը ամենապարզ և բազմակողմանի է:

Որո՞նք են տառատեսակի ֆայլը ներբեռնելու և այն CSS- ի միջոցով կիրառելու առավելությունները:

• Տեքստը հեշտ է ավելացնել և խմբագրել:
• Theննարկիչում կարող եք օգտագործել որոնումը և գտնել ցանկալի արտահայտություններ:
• Theննարկչի կարգավորումներում կարող եք նվազեցնել կամ մեծացնել տառատեսակի չափը `հարմարավետ դիտման հասնելու համար:
• Որոնման համակարգերը լավ են ինդեքսավորում փաստաթղթերի բովանդակությունը:
• Տեքստը կարող է ընտրվել և պատճենվել սեղմատախտակին, ինչպես նաև թարգմանվել այլ լեզվով:
• Տեքստի պարամետրերը, ինչպիսիք են տողերի միջև ընկած տարածությունը, գույնը, չափը և այլն, հեշտությամբ փոխվում են ՝ օգտագործելով CSS հատկությունները:
• Կրկին, CSS- ի միջոցով կարող եք պարզապես տարբեր էֆեկտներ ավելացնել տեքստին, օրինակ ՝ ստվեր:

Ինչպես տեսնում եք, շատ առավելություններ կան: Կան փոքր թերություններ, որոնք հավասարակշռության համար արժե նշել:

• Browserննարկչի ոչ բոլոր տարբերակներն են աջակցում ներբեռնվող տառատեսակը և նույն ձևաչափը բոլորի համար:
• Տառատեսակը պարունակող ֆայլը կարող է մեծ լինել, դրանով իսկ դանդաղեցնելով վեբ էջի բեռնումը:

Աղյուսակ 1 -ը թվարկում է զննարկչի տարբերակները և տառատեսակի ձևերը, որոնք նրանք աջակցում են:

Ներդիր 1. Աջակցվող ձևաչափեր

Ձևաչափ	Internet Explorer	Chrome	Օպերա	Սաֆարի	Firefox	Android	iOS
TTF	9.0+	4.0+	10.0+	3.1+	3.5+	2.2+
EOT	5.0-8.0
WOFF	9.0+	5.0+			3.6+
SVG		1.0+	9.0+	3.1+	3.5+		1.0+

Առավել աջակցվող ձևաչափը TTF- ն է: Բացառությամբ IE- ի մինչև 9.0 տարբերակի և iOS- ի, բոլոր դիտարկիչները դա հիանալի հասկանում են: Այսպիսով, եթե դուք ունեք այս ձևաչափով տառատեսակ և թիրախավորում եք ժամանակակից բրաուզերներին, ապա ձեզ հարկավոր չէ որևէ լրացուցիչ քայլ կատարել: Բավական է ոճով գրել հետևյալ կոդը (օրինակ 1):

Օրինակ 1. TTF- ի միացում

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Նախ, բեռնեք տառատեսակի ֆայլը ՝ օգտագործելով @ font-face կանոնը: Դրա ներսում գրեք տառատեսակի անունը ՝ օգտագործելով font-family պարամետրը և src- ի միջոցով ֆայլի ուղին: Հաջորդը մենք սովորաբար օգտագործում ենք տառատեսակը: Այսպիսով, եթե մենք պետք է սահմանենք տառատեսակը վերնագրի համար, ապա h1 ընտրիչի համար, ինչպես ցույց է տրված օրինակում, մենք սահմանում ենք font-family հատկությունը բեռնված տառատեսակի անունով: IE- ի հին տարբերակների համար մենք թվարկում ենք ստորակետներով առանձնացված հետադարձ կապը: Այս դեպքում վերնագրի տառատեսակը կլինի «Comic Sans MS», քանի որ IE8 և ներքևում չեն աջակցում TTF ձևաչափը:

Այս օրինակի արդյունքը ներկայացված է Նկ. մեկը

Բրինձ 1. Բեռնված տառատեսակով վերնագիր

Ի՞նչ անել, եթե ձեզ անհրաժեշտ է նախշազարդ տառատեսակ IE8- ում: Բարեբախտաբար, @ font-face- ը թույլ է տալիս միաժամանակ ներառել տարբեր ձևաչափերի բազմաթիվ տառատեսակի ֆայլեր: Theննարկչին մնում է միայն ընտրել համապատասխանը: Այսպիսով, ունիվերսալ լուծումը, որն աշխատում է բոլոր դիտարկիչներում, հանգում է գոյություն ունեցող TTF ձևաչափի EOT- ի փոխակերպմանը և երկու ֆայլերը միացնելուն:

Փոխակերպման համար կան մի քանի առցանց ծառայություններ, որոնք թույլ են տալիս ներբեռնել TTF ֆայլ և ելքի վրա ստանալ EOT ֆայլ: Unfortunatelyավոք, այս ծառայությունների մեծ մասը նույն խնդիրն ունի. Մենք ստանում ենք ֆայլը, բայց դրանում ռուսերենը չի ապահովվում: Արդյունքում, ցանկալի արդյունքի չի հասնում, փոխակերպումը սխալ է: Իմ ստուգած կայքերից մեկը կար, որը տեքստը ճիշտ էր ցույց տալիս IE- ում:

Գնացեք այս կայք, բեռնեք TTF ֆայլը և կտտացրեք «Փոխարկել TTF- ին EOT» կոճակին, որից հետո ստացված ֆայլը պահում ենք տառատեսակների թղթապանակում: Ոճերում մնացել է մի փոքր հնարք ՝ ստիպել տարբեր բրաուզերներին բեռնել տառատեսակը ճիշտ ձևաչափով: Դա անելու համար ավելացրեք երկու src պարամետր: Առաջինը մատնանշում է EOT ֆայլը և IE- ի հին տարբերակների համար է: Երկրորդ src պարամետրը պետք է պարունակի երկու հասցե ՝ բաժանված ստորակետներով, որոնցից մեկը մատնանշում է TTF ֆայլը: Փաստն այն է, որ IE 8.0 և ավելի վաղ տարբերակը չի հասկանում src պարամետրում ստորակետը և, համապատասխանաբար, ամբողջությամբ անտեսելու է պարամետրը: Կարող են լինել մի քանի ուղղագրական տարբերակներ, օրինակ ՝ կրկնել url- ը, նշել տեղական տառաչափի տառատեսակի անունը կամ ընդհանրապես գրել գոյություն չունեցող տառատեսակ: Եթե ​​զննարկիչը չի կարող բեռնել նման տառատեսակ, ապա այն կանցնի ցուցակի երկրորդին, և մենք այն ճիշտ ենք գրել: Գրելու ընդունելի եղանակներ:

src: url (տառատեսակներ / pompadur.ttf), url (տառատեսակներ / pompadur.ttf);
src: տեղական (pompadur), url (տառատեսակներ / pompadur.ttf);
src: տեղական («բլա բլա»), url (տառատեսակներ / pompadur.ttf);

Բրաուզերների բոլոր տարբերակների համար տառատեսակ միացնելու աշխատանքային տարբերակը ցուցադրված է 2 -րդ օրինակում:

Օրինակ 2. EOT- ի միացում

HTML5 CSS3 IE Cr Op Sa Fx

Քաղաքական գործընթացի ժամանակակից տարր

Փաստորեն, Մոնտեսքյուի քաղաքական դոկտրինը առաջնորդում է քաղաքական մշակույթի մայրցամաքային-եվրոպական տեսակը, որն արտացոլվել է Միշելսի ստեղծագործություններում:

Ինչ վերաբերում է iOS- ին, ապա ինձ թվում է, որ առանձնապես իմաստ չունի SVG ձևաչափով առանձին տառատեսակ պատրաստելու և ներբեռնելու համար: IOS- ով այն դիտող կայքերի լսարանը դեռ փոքր է, բացի այդ, նրանք փորձում են հեշտացնել բջջային սարքերի համար կայքի տարբերակը, և ցանկալի չէ լրացուցիչ մի քանի տասնյակ կիլոբայթ ներբեռնել:

Google վեբ տառատեսակներ

Հարմար ծառայություն, որը ստանձնում է տառատեսակների տարբեր ձևաչափերի և դիտարկիչների տարբերակների աջակցման ռեժիմը, կարող եք գտնել այստեղ www.google.com/webfonts... Չնայած հավաքածուում համեմատաբար քիչ տարբեր տառատեսակներ կան (դրանք մի քանի տասնյակ են), բայց դրանք բոլորը շատ որակյալ են և անվճար են վեբ կայքերում օգտագործելու համար:

Տառատեսակ ընտրելուց առաջ Script- ի արժեքը փոխեք կիրիլիցայի, այնուհետև կտեսնեք ռուսերենին աջակցող տառատեսակների ցուցակ (նկ. 2):

Բրինձ 2. Google Web Fonts- ում տառատեսակների ընտրություն

Ձեզ դուր եկած տառատեսակը նախ պետք է ավելացվի հավաքածուին ՝ կտտացնելով «Ավելացնել հավաքածուին» կոճակին, այնուհետև էկրանի ներքևի աջ անկյունում գտնվող «Օգտագործել» կոճակին: Հաջորդ էջում (նկ. 3) վերջապես կարող եք ընտրել ձեզ անհրաժեշտ տառատեսակները: Պետք է հասկանալ, որ տառատեսակը կարող է պարունակել մի քանի ոճ, և դրանցից յուրաքանչյուրը մեծացնում է ներբեռնված ֆայլերի ծավալը:

Բրինձ 3. Էջում բեռնված տառատեսակներ

Ընտրված տառատեսակները կարող եք միացնել երեք եղանակներից մեկով. Ավելացված ծածկագիրը կարող է պատճենվել էջում:

1. Տարերքի միջոցով ... Գիծը նման կլինի հետևյալին.

2. @import կանոնի միջոցով: Մենք այս տողը տեղադրում ենք մեր CSS ֆայլում հենց վերևում:

@import url (http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);

3. JavaScript- ի միջոցով:

Հիմնականում բոլոր ուղիները հավասար են, այնպես որ ընտրեք ըստ ձեր նախասիրության:

Այս ծառայությունից օգտվելու առավելությունները հետևյալն են.

• Տառատեսակների օգտագործումը անվճար է, դրանց համար անհրաժեշտ չէ վճարել:
• Առաջարկվող տառատեսակները «սրվում են» էկրանին դիտելու համար, ֆայլերը օպտիմիզացված են և զբաղեցնում են համեմատաբար փոքր ծավալ:
• Theննարկիչը ինքնաբերաբար հայտնաբերվում է և դրա համար ցուցադրվում է անհրաժեշտ ձևաչափով տառատեսակ:

Առայության հիմնական առավելություններից մեկն այն է, որ տառատեսակները պահվում են TTF, EOT, WOFF, SVG ձևաչափերով և բեռնվում բրաուզերը ստուգելուց հետո: Այսպիսով, EOT ձևաչափը հասանելի կլինի միայն IE- ի հին տարբերակների համար:

Google Web տառատեսակներից օգտվել -չօգտվելը ձեր խնդիրն է: Եթե ​​այնտեղ համապատասխան տառատեսակ չեք գտել, միշտ կարող եք միացնել հանրաճանաչ և տարածված TTF- ը: Ավելին, այն ապահովվում է բոլոր հայտնի բրաուզերների վերջին տարբերակներով:

Տառատեսակը կարևոր դեր է խաղում կայքի ձևավորման մեջ, այն կարող է ընդգծել ընդհանուր ոճը, օգնել օգտվողին նավարկելու տեքստի բովանդակությունը: Անվճար տառատեսակների որոնում, այնուհետև մի քանի ֆայլ տարբեր զննարկիչների համար միացնելը գոհացուցիչ խնդիր չէ, բայց կա ելք `տառատեսակներ Google տառատեսակներից:

Google տառատեսակներից գտնել ճիշտ տառատեսակը

Եկեք գնանք Google տառատեսակի ծառայություն և նայենք դրա հնարավորություններին:

Ձախ (կողային) վահանակում կարող եք կազմաձևել տառատեսակի զտման պարամետրերը և, որ ամենակարևորն է, ընտրել, արդյոք այն պատկանում է կիրիլական կամ լատինական այբուբենին:
Վերին մասում կարող եք փոխել ցուցադրական տեքստի ցուցադրումը ՝ բառի, նախադասության, պարբերության, պաստառի տեսքով: Փոխեք տառատեսակի չափը և դեմո տարբերակի փոխարեն մուտքագրեք ձեր սեփական տեքստը:

Google Fonts- ից տառատեսակի միացում

Ընտրված տառատեսակն ընտրելուց հետո կտտացրեք «արագ օգտագործման» կոճակին (տե՛ս ստորև նկարը)

Տառատեսակի միացման էջում դուք պետք է ընտրեք.

1. Տառատեսակի ոճեր ՝ համարձակ, շեղագիր և այլն: Շատ մի գերլարվեք, ընտրեք միայն ամենաանհրաժեշտը, քանի որ այս ամենը ազդում է տառատեսակի բեռնման արագության և, համապատասխանաբար, ձեր կայքում տեքստի բեռնման արագության վրա: Հետևեք ցուցիչի ցուցիչներին աջ կողմում (նկարի 5 -րդ կետ)
2. Ընտրեք, թե ինչ տառեր են ձեզ անհրաժեշտ այս տառատեսակում (հիմնականում լատիներեն և կիրիլիկա):
3. Պատճենեք հղման պիտակի ծածկագիրը HEAD բլոկում
4. Մենք օգտագործում ենք տառատեսակի հայտարարագիրը ոճերում, ինչպես ցույց է տրված 4 -րդ պարբերությունում (տես նկարը)