Վլադ Մերժևիչ

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

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

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

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

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

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

• Տեքստը հեշտ է ավելացնել և խմբագրել:
• Բրաուզերում կարող եք օգտագործել որոնումը և գտնել ցանկալի արտահայտությունները:
• 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.

Բրինձ 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);

Browsննարկիչների բոլոր տարբերակների համար տառատեսակ միացնելու աշխատանքային տարբերակը ցուցադրված է 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- ը: Ավելին, այն աջակցվում է վերջին տարբերակներըբոլոր հայտնի բրաուզերները:

// echo get_the_post_thumbnail (get_the_ID (), "relatedthumbnail"); // ցուցադրել իմ մանրապատկերի չափը?>

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

Ինչպես միացնել տառատեսակը Google տառատեսակներից

Քայլ 1 - ընտրեք տառատեսակ

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

Արագ օգտագործման համար կտտացրեք Արագ օգտագործման կոճակին:

Քայլ 2 - տառատեսակի կարգավորումների ճշգրտում

Հաջորդ էջում մենք ընտրում ենք, թե ինչ տառատեսակներ ենք օգտագործելու: OpenSans- ն ունի 10 կշիռ ՝ շատ բարակից մինչև համարձակ: Որքան շատ ոճեր ընտրվեն, այնքան ավելի կազդի էջի բեռնման արագության վրա: Հետեւաբար, արժե միացնել միայն օգտագործվող տառատեսակները: Դրանից հետո կարող եք ընտրել նիշերի հավաքածուներ, կիրիլիցայի համար մենք ընտրում ենք կիրիլական ընդլայնված կամ կիրիլիցա և լատիներեն:

Քայլ 3 - տառատեսակը միացնելու կոդ

Այնուհետև մենք վերցնում ենք ծածկագրի տող ՝ ձեր կայքին միանալու համար: Ստանդարտ տարբերակ `երրորդ կողմի css ֆայլը html- ից միացնելը, @import ներդիրում` css ֆայլի միջոցով միանալու տող կլինի, իսկ Javascript- ի համար `երրորդ տարբերակ: Դրանից հետո կապը պատրաստ է, և դասավորության մեջ կարող եք օգտագործել այս տառատեսակը: Ստորև բերված բլոկը ցույց է տալիս տառատեսակին մուտք գործելու օրինակ. Font-family: "Open Sans", sans-serif;

Սահմանեք լայնությունը `օգտագործելով տառատեսակի քաշի պարամետրը` 300; կամ տառատեսակի քաշը `400; տառատեսակի քաշը `800; Շեղագիր - տառատեսակի միջոցով ՝ շեղագիր; ...

Օգտագործման օրինակ

Արդյունքում, եթե որոշենք տառատեսակը ներառել @import- ի միջոցով CSS- ում, մեր CSS ֆայլը կունենա այս տեսքը.

/ * Տառատեսակի միացում */@import url (http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); / * Սահմանել h1 * / h1 վերնագրի ոճը ( / * Ընտրեք «Open Sans» կապված տառատեսակը որպես տառատեսակ * / font-family: «Open Sans», sans-serif; / * Ընտրեք տառատեսակի չափը 300 , որը կհամապատասխանի տառատեսակին Light - բարակ չափի համար * / font -weight: 300;)

Ողջույն, սիրելի ընթերցողներ: Այսօր մենք խոսելու ենք google վեբ տառատեսակների մասին, ինչպես ներբեռնել դրանք և միանալ կայքին:

Գնացեք կայք www.google.com/fonts/, աջ զտիչում ընտրեք ՝ 1. ցանկալի կատեգորիա, 2. անհրաժեշտության դեպքում ՝ տեսակավորեք դրանք և 3. ընտրեք մեզ անհրաժեշտ լեզուն (եթե ձեզ հարկավոր է ռուսերեն տառատեսակ ձախ ընտրացանկում, ընտրեք Կիրիլիկ).

Այսպիսով, մենք ընտրել ենք տառատեսակը, այժմ մենք պետք է ընտրենք դրա ոճը, դրա համար ընդլայնել ստորև ներկայացված վահանակը ( Բացեք ընտրության դարակը) և անցեք ներդիրին ՊԱՏԱՍԽԱՆԵԼև ընտրեք ձեր ուզած ոճերն ու լեզուները:

Ներբեռնելու համար կտտացրեք կոճակին բեռնել

Ներբեռնված տառատեսակի միացում

Արխիվում պարունակվող տառատեսակները պատճենեք / fonts թղթապանակում, որը պետք է տեղակայված լինի ձեր HTML կայքի / css թղթապանակի նույն գրացուցակում:

Ներբեռնված տառատեսակների ստանդարտ կապկարծես այդպիսին է

@ font-face (font-family: "Font_name_any"; src: url ("Font_file_name.eot"); src: url ("Font_file_name.eot? #iefix") format ("embedded-opentype"), url ("Font_file_name .eot .woff ») ձևաչափ (« woff »), url (« Font_file_name.ttf ») ձևաչափ (« truetype »), url (« Font_file_name.svg # DSNoteRegular ») ձևաչափ (« svg »); տառաչափը ՝ նորմալ ; տառատեսակի ոճը `նորմալ;)

Իմ դեպքում կապն այսպիսի տեսք կունենա

/ * Տառատեսակ /css/style.css * / @ font-face (տառատեսակ-ընտանիք ՝ «RobotoRegular»; url («../ fonts / RobotoRegular.ttf») ձևաչափով («իրական տեսակ»); տառատեսակ - ոճը `նորմալ; տառատեսակի քաշը` նորմալ;)

Ձեր ընտրած տառատեսակը կայքին միացնելու համար անցեք ներդիրին ՓՈԽՎԵԼ Է, այնտեղ կտեսնեք միացման 2 եղանակ.

1. ՍՏԱՆԴԱՐՏ

Այս ծածկագիրը պետք է ավելացվի բաժնում ձեր HTML փաստաթուղթը:

2. @ներմուծում

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

Կարևոր. Անկախ կապի եղանակից, այս ընտանիքները սահմանելու համար օգտագործեք հետևյալ CSS կանոնները. Font-family: ‘Roboto’, sans-serif; այս մասին ավելին ՝ ստորև:

Ողջույն բոլորին! Դուք կարող եք կարդալ այդ մասին, ես գրել եմ 132 -րդ դասին: Եվ այս հոդվածում ես ձեզ կասեմ, թե ինչպես կարող եք արագ և հեշտությամբ տառատեսակ միացնել ձեր կայքին Google Տառատեսակներից: Google Font ծառայությունում դուք պետք է ընտրեք տառատեսակ ձեր կայքի համար, այնուհետև միացրեք այն:

Անհրաժեշտ չէ տառատեսակի ֆայլը վերբեռնել հոստինգում: Բավական է կայքի վերնագրում և նոր տառատեսակի անունով գրել անհրաժեշտ HTML կոդը: Տառատեսակները կարող են կապված լինել ոչ միայն WordPress կայքի, այլև ցանկացած այլ կայքի հետ:

Ինչպես միացնել Google տառատեսակները ձեր կայքին

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

Անհրաժեշտության դեպքում կարող եք սահմանել այլ պարամետրեր ՝ հաստություն (տառատեսակի հաստություն), թեք (շեղագիր), լայնություն (տառատեսակի լայնություն):

Անհրաժեշտ է նաև ընտրել կիրիլյան այբուբենը, եթե ձեր կայքը ռուսերեն է.

Երբ ընտրվում են պարամետրերը, ծառայությունը ցույց կտա բոլոր տառատեսակները, որոնք հասանելի են դրանցով:

Մենք մկնիկի կուրսորը տեղափոխում ենք այն տառատեսակի վրա, որը ցանկանում ենք տեղադրել կայքում, որից հետո լրացուցիչ պարամետրեր / պարամետրեր են հայտնվում. արագ օգտագործումը), Pop out (դիտել տառատեսակը ներսում առանձին պատուհան) և ավելացնել հավաքածուին:

Ընտրում ենք " Արագ օգտագործման«Եվ տեսեք աջ կողմ widget արագաչափի տեսքով: Այն ցույց է տալիս, թե որքան արագ է բեռնվում ընտրված տառատեսակը: Որքան ցածր լինի այս արագաչափի թիվը, այնքան լավ:

Ստորև կարող եք ընտրել տառատեսակը կայքում տեղադրելու երեք տարբերակներից մեկը `standart, @import կամ javascript:

Յուրաքանչյուր տարբերակ ունի ցուցումներ Անգլերեն Լեզուինչպես ճիշտ միացնել տառատեսակը կայքին: Ես ձեզ ցույց կտամ առաջին տարբերակը » ստանդարտ«Որովհետև դա ավելի պարզ է:

Պատճենեք կարմիրով ընդգծված տողը և այն տեղադրեք պիտակների միջև գտնվող header.php ֆայլում ….

Այնուհետեւ բացեք stylesheet style.css, գտեք այն տառատեսակը, որը պետք է փոխվի եւ գրեք նորը: Մենք պարզապես գրում ենք նոր տառատեսակի անունը: Տեղադրեք Google տառատեսակները չակերտների մեջ, օրինակ ՝ font-family: «Aladin», Arial, Helvetica, Sans-serif:

Եթե ​​դուք ընդհանրապես ոչինչ չեք հասկացել, թե ինչ եմ ձեզ ասել այստեղ, ապա դիտեք տեսանյութը, որտեղ մանրամասն պատմում եմ ձեզ, Ինչպես միացնել Google տառատեսակը WordPress կայքին

______________________
Դաս 204. և առանց հավելման

Նյութի հովանավոր:
Օդորակիչներ առցանց խանութում ՝ http://www.technodom.kz/catalog/konditsionery: Օդորակիչներ - լավագույն ապրանքները, վարկավորում, հսկայական ընտրություն, անբասիր սպասարկում:

Բարի օր, սիրելի ընթերցողներ: Դուք բոլորդ հավանաբար երազում եք ձեր կամ հաճախորդի կայքերն ավելի հակիրճ և գրավիչ դարձնելու մասին:

Հիմնական գործոններից մեկը, որը պատասխանատու է կայքում տեղեկատվության ընկալման համար, տառատեսակներն են և ինչպես ենք դրանք միասին օգտագործում: Քանի որ մեկ կայքում, երկու կամ ավելի տեսակի տառատեսակներ են առավել հաճախ օգտագործվում, օրինակ ՝ վերնագրերի և միայն տեքստի համար:

Տեքստերի ընթերցանությունը տեսողականորեն բարելավելու հնարավորություններից մեկը երրորդ կողմի տառատեսակների միացումն է: Ի վերջո, բոլորը հավանաբար գիտեն, թե Windows- ում կիրիլյան տառատեսակների ինչ «աղքատ» ստանդարտ հավաքածու է, որը պատասխանատու է բրաուզերում տեքստ ցուցադրելու համար:

Ստանդարտ տառատեսակներ.

Cufon և @ font-face

Ավելի վաղ արդեն գրել էի, որի մասին կարող եք ոչ ստանդարտ տառատեսակներ միացնել կայքին: Այժմ եկեք նայենք ավելի հեշտ եղանակի. Սա @ font -face կանոնն է css- ում և տառատեսակը բեռնվում է Google Fonts խանութից:

Cufon- ի և @ font-face- ի միջև եղած ամբողջ տարբերությունն այն է, որ առաջինը js- ն օգտագործում է տառատեսակը ընդօրինակելու համար և իր միջոցներով գծում է խորհրդանիշներ, իսկ @ font-face- ը ներբեռնում է տառատեսակը այցելուի համակարգչին, իսկ դիտարկիչն արդեն օգտագործում է այն ցուցադրելու համար: տեքստ.

Ամեն դեպքում, Cufon- ը և @ font-face- ը դանդաղեցնում են կայքի բեռնման արագությունը, թեև ոչ էականորեն:

Կայքում Google տառատեսակների օգտագործումը

Ես շատ չեմ նկարելու և երկար ժամանակ կտամ Google Fonts- ի միացման կոնկրետ օրինակ ՝ որպես օրինակ այս բլոգը:

Ինչպես տեսնում եք, իմ հոդվածների վերնագրերը և ենթավերնագրերը ոչ ստանդարտ տառատեսակով են, այնպես որ այժմ գործնականում ես ցույց կտամ, թե ինչպես դա անել, և դուք այն անալոգիայով կփորձեք ձեր կայքերում:

Պահեստում տառատեսակի ընտրություն

Որպեսզի չվախենամ, կբացատրեմ `շտեմարանը շտեմարան է, բայց բուրժուական եղանակով :): Եվ այսպես, մենք գնում ենք http://www.google.com/fonts/և ինքներս մեզ համար համապատասխան տառատեսակ փնտրեք.

Theաշացանկում շատ բան չկա.
Ձախ կողմում, ինչպես տեսնում եք, կա բլոկ ՝ բոլոր տեսակի տառատեսակների որոնման զտիչներով, որոնցում կարող եք ընտրել, օրինակ, միայն լատիներեն կամ կիրիլյան տառատեսակներ: Եվ վերևում ՝ օրինակներ ցուցադրելու կարգավորումներ, որոնք բաժանված են 4 ներդիրի.

• Բառ- մի քանի տառերի ցուցադրում: Այս ռեժիմում հարմար է միանգամից համեմատել բազմաթիվ տառատեսակներ և տեսնել, թե ինչ տեսք ունեն կոնկրետ նիշերը.
• Նախադասություն- ցուցադրել մեկ նախադասության տեսքով.
• Պարբերություն- ցուցադրվում է տեքստի մի մեծ կտոր, որը թույլ կտա տեսողականորեն համեմատել տառատեսակն արդեն իսկ տեքստում.
• Պաստառ- վերնագրերը ցուցադրվում են, համեմատության այս մեթոդը հարմար է վերնագրերում օգտագործվող տառատեսակի ընտրության համար:

Տառատեսակի միացում կայքին

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

Ստորև բերված է «ցուցադրման տիպ» ընտրող վահանակ, ընտրեք լատիներեն (լատիներեն) և կիրիլիցա (կիրիլիցա), ինչը մեզ հնարավորություն կտա ցուցադրել և՛ լատինական, և՛ կիրիլյան տառեր:

Դրանից հետո մենք անցնում ենք այս էջի երրորդ կետին, այն է ՝ կապն ինքնին: Google- ը մեզ առաջարկում է իրենց տառատեսակները տեղադրելու երեք տարբերակ ՝ js- ի միջոցով, ստանդարտ եղանակմիացման միջոցով և @import css ֆայլում: Ես օգտագործում եմ վերջին մեթոդը:

Մենք բացում ենք մեր css ֆայլը և գրում այն ​​տողը, որը մեզ տրամադրել է Google- ը.

Վերջ, Google Fonts- ից տառատեսակը մենք միացրեցինք կայքին, հիմա ինչպե՞ս օգտագործել այն:

Օգտագործումը CSS- ում

Ամեն ինչ բավականին պարզ է, @import- ի միջոցով տառատեսակը միացնելուց հետո մենք պետք է գրանցվենք ստանդարտ հրահանգայն դասերի և ցուցիչների համար, որոնց համար կկիրառվի մեր նոր տառատեսակը: Օրինակ:

h1, h2, h3 (տառատեսակ-ընտանիք ՝ «Cuprum», sans-serif;)

Այս բոլոր մանիպուլյացիաներից հետո դուք կունենաք նոր, ոչ ստանդարտ տառատեսակով վերնագրեր:

Այսքանը, շնորհակալություն ուշադրության համար և շուտով կտեսնվենք: