css տառատեսակի միացում ttf. Սահմանեք տառատեսակներ css-ում

Տառատեսակները հսկայական դեր են խաղում վեբ կայքի ձևավորման մեջ: Տարբեր տառատեսակներով գրված նույն տեքստը կարող է հակառակ տպավորություններ ստեղծել մարդու վրա։

Տեսեք ինքներդ.

Որոշ տառատեսակներ ավելի համոզիչ են թվում, մյուսներն ավելի ինտրիգային:

Բայց ինչպե՞ս կարելի է ցանկացած տառատեսակ միացնել կայքին և կիրառել այնտեղ, որտեղ ուզում ես:

Այս հոդվածում Ի Ես ձեզ ցույց կտամ 3 ճանապարհ, որով կարող եք ձեր կայքին միացնել ցանկացած, ամենատարբեր և ոչ ստանդարտ տառատեսակները։ Եվ կարևոր չէ, թե որ CMS-ն եք օգտագործում՝ WordPress, Joomla, Drupal կամ Open Cart:

Դուք կտեսնեք, որ տառատեսակները կայքին միացնելու մեջ բարդ բան չկա։

Դու կսովորես:

Մեթոդ թիվ 1. Տառատեսակների արագ միացում WordPress կայքին (դժվարություն՝ ⭐ ⭐ ⭐)

Եթե ​​ձեր կայքում տեղադրված է պրեմիում թեմա, կարող եք միացնել տառատեսակները 2 րոպեում։

Օրինակ:

Դուք ցանկանում եք փոխել ձեր հոդվածների վերնագրերի տառատեսակը: Սրա համար:

1. Ադմինիստրատորի վահանակում գնացեք «Թեմայի ընտրանքներ» բաժինը: Կախված ձեր ձևանմուշից, այս բաժինը կարող է մի փոքր այլ կերպ կոչվել, բայց իմաստը միշտ նույնն է՝ «թեմայի կարգավորումներ»:

2. Գնացեք Տպագրություն բաժին:

3. Ընտրեք այն տարրը, որի տառատեսակը ցանկանում եք փոխել (վերնագրեր, պարբերություններ).

Եթե ​​ձեր կայքը աշխատում է այլ շարժիչով, կամ ձեր թեման նման կարգավորումներ չի ապահովում, անցեք հաջորդ մեթոդին:

Մեթոդ թիվ 2. Օգտագործեք Google Fonts-ի հզորությունը
(դժվարություն՝ ⭐ ⭐ ⭐ ⭐)

Երբևէ լսե՞լ եք Google Fonts-ի մասին: Մի խոսքով, սա ծառայություն է, որով կարող եք ձեր կայքին միացնել ավելի քան 700 տառատեսակներ։

Քայլ 1. Գնացեք ծառայության պաշտոնական կայք:

Քայլ 2. Գտեք ձեզ հարմար տառատեսակներ Google տառատեսակների հավաքածուում: Աջ ընտրացանկում կարող եք նեղացնել շրջանակը՝ սահմանելով տառատեսակի լեզուն, ոճը և հանրաճանաչությունը.

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

Քայլ 3 Ենթադրենք ձեզ դուր է գալիս Roboto տառատեսակը: Կտտացրեք «+» պատկերակին.

Դուք կարող եք ավելացնել ցանկացած տառատեսակ՝ սեղմելով «+» նշանի վրա:

Քայլ 4. Դրանից հետո դուք պետք է ընդլայնեք զամբյուղը ընտրված տառատեսակներով.

Անցնելով Անհատականացնել ներդիրը՝ կարող եք ընտրել ոճեր և լեզուներ: Ինչ վերաբերում է ոճերին, ես ձեզ խորհուրդ եմ տալիս ընտրել ստանդարտ հավաքածու՝ նորմալ (400), շեղ (400 շեղ), թավ (700) և շեղ-թավ (թավ 700 շեղ):

Բայց եթե ուզում եք միայն համարձակ (վերնագրերի համար), ընտրեք միայն դա:

Հիշեք, որ որքան շատ ոճեր ընտրեք, այնքան մեծ կլինի վերբեռնված ֆայլի չափը:

Որպեսզի չդանդաղեցնեք կայքի բեռնման արագությունը, ընտրեք հնարավորինս քիչ տառատեսակների ոճեր։

Քայլ 5. Վերադարձեք Embed բաժին և ընտրեք @IMPORT ներդիրը: Հաջորդը, պատճենեք «@import» պարունակող կոդի տողը և տեղադրեք այն ձեր կայքի CSS ֆայլի առաջին տողում.

Եթե ​​դուք ունեք WordPress կայք, CSS ֆայլը, ամենայն հավանականությամբ, գտնվում է այստեղ. wp_content/themes/"yourtheme"/css/... CSS թղթապանակում, ամենայն հավանականությամբ, կլինի Fonts ֆայլ, որտեղ դուք պետք է փոխանցեք ներկառուցված կոդը Google-ից.

Կարևոր չէ, թե ինչ CMS-ով է աշխատում ձեր կայքը, պարզապես տեղադրեք կոդը, և ամեն ինչ կլինի 👌

Քանի որ տառատեսակները պետք է նախ բեռնվեն, միայն դրանից հետո մնացած ամեն ինչ. տեղադրեք տառատեսակի միացման կոդը CSS ֆայլի հենց սկզբում:

Դուք կարող եք սահմանել տառատեսակը կայքի որոշակի տարրերի համար նույն CSS ֆայլում:

Օրինակ:

Բոլոր պարբերություններին Roboto տառատեսակը տալու համար ես կգրեմ հետևյալը. p ( տառատեսակ-ընտանիք՝ Roboto;)

Մեթոդ թիվ 3. Հատուկ տառատեսակի միացում՝ օգտագործելով CSS (դժվարություն՝ ⭐ ⭐ ⭐ ⭐ ⭐)

Եթե ​​դուք բավականաչափ հմուտ եք, ձեր լավագույն խաղադրույքն այն է, որ ինքներդ ներառեք տառատեսակները CSS-ի միջոցով: Այս դեպքում տառատեսակները կտեղակայվեն ձեր սերվերի վրա հատուկ թղթապանակում: Բայց նախ պետք է դրանք ինչ-որ տեղ հասցնել:

Որտեղ ստանալ վեբ տառատեսակներ կայքի համար

Գիտեի՞ք, որ վեբ տառատեսակներ օգտագործելու համար անհրաժեշտ է առանձին լիցենզիա գնել:

Միացրեք տառատեսակները անվճար լիցենզիայի միջոցով: Դրանք գտնելու ամենահեշտ ձևը Fontsquirrel ծառայության միջոցով է, որը մենք կանենք:

Քայլ 1. Գնացեք ծառայության պաշտոնական կայք

Քայլ 2. Աջ ընտրացանկում Լեզուներ բաժնում ընտրեք կիրիլիցա:

Քայլ 3. Գտեք համապատասխան տառատեսակ: Ուշադրություն դարձրեք տառատեսակների քանակին.

Օրինակ, եթե կա 4 ոճ, ապա կգրվի 4 ոճ.

Տառատեսակի ոճերի նշանակումը՝ նորմալ (400/կանոնավոր), շեղ (շեղ), թավ (700/թավ), թավ շեղ (700 շեղ):

Քայլ 5. Սեղմեք տառատեսակի անվան վրա և անցեք կարգավորումների էջ:

Քայլ 6. Գնացեք Webfont Kit բաժին: Ընտրեք տառատեսակի բոլոր ձևաչափերը և սեղմեք Ներբեռնեք @FONT-FACE KIT: Եթե ​​հասանելի է միայն 1-2 ֆորմատ, դա սարսափելի չէ:

Տառատեսակներ ներառելու համար օգտագործեք @Font-face

@font-face հրահանգի միջոցով դուք կարող եք մեկ կամ մի քանի տառատեսակներ ներառել ձեր կայքում: Բայց այս մեթոդն ունի իր դրական և բացասական կողմերը:

Կողմերը:

  • CSS-ի միջոցով կարող եք ներառել ցանկացած ձևաչափի տառատեսակներ՝ ttf, otf, woff, svg:
  • Տառատեսակի ֆայլերը կտեղակայվեն ձեր սերվերում. դուք կախված չեք լինի երրորդ կողմի ծառայություններից:

Մինուսները:

  • Յուրաքանչյուր ոճի համար տառատեսակի ճիշտ միացման համար անհրաժեշտ է գրել առանձին ծածկագիր։
  • Առանց CSS իմանալու, հեշտ է շփոթվել:

Դուք կարող եք պարզապես պատճենել իմ պատրաստի կոդը և որտեղ դուք պետք է տեղադրեք ձեր արժեքները:

Քայլ 1. Ներբեռնված տառատեսակի ֆայլերը տեղափոխեք ձեր կայք: Դա կարելի է անել ձեր հոսթինգի կառավարման վահանակի կամ FTP-ի միջոցով:

Ես առաջարկում եմ ստեղծել տառատեսակների թղթապանակ նույն գրացուցակում, ինչ ձեր CSS ֆայլը: Տեղափոխեք բոլոր տառատեսակի ֆայլերը այս պանակ:

Քայլ 2. CSS ֆայլի հենց սկզբում գրեք հետևյալ գրառումը.

@font-face(
տառատեսակ-ընտանիք՝ «MyWebFont»;
src: url ("../fonts/WebFont.eot");
src՝ url ("../fonts/WebFont.eot?iefix") ձևաչափ ("eot"),
url ("../fonts/WebFont.woff") ձևաչափ ("woff"),
url ("../fonts/WebFont.ttf") ձևաչափ ("truetype"),
url ("../fonts/WebFont.svg#webfont") ձևաչափ ("svg");
տառատեսակի քաշը՝ նորմալ
տառատեսակի ոճը՝ նորմալ
}

Այնտեղ, որտեղ MyWebFont-ը տառատեսակի անունն է, իսկ src հատկության արժեքը (փակագծերում գտնվող տվյալները չակերտներում)՝ դրանց գտնվելու վայրը (հարաբերական հղումներ): Մենք պետք է նշենք յուրաքանչյուր ոճը առանձին:

Քանի որ մենք նախ ներառում ենք նորմալ տառատեսակ, մենք սահմանել ենք տառատեսակի քաշի և տառատեսակի ոճի հատկությունները նորմալ:

Քայլ 3. Շեղ ոճը միացնելիս գրեք հետևյալը.

@font-face(
տառատեսակ-ընտանիք՝ «MyWebFont»;
src՝ url ("../fonts/WebFont-Italic.eot");
src՝ url("../fonts/WebFont-Italic.eot?iefix") ձևաչափ ("eot"),
url ("../fonts/WebFont-Italic.woff") ձևաչափ ("woff"),
url ("../fonts/WebFont-Italic.ttf") ձևաչափ ("truetype"),
url ("../fonts/WebFont-Italic.svg#webfont") ձևաչափ ("svg");
տառատեսակի քաշը՝ նորմալ
տառատեսակի ոճը՝ շեղ;
}

Այնտեղ, որտեղ ամեն ինչ նույնն է, միայն մենք տառատեսակի ոճի հատկությանը տվել ենք շեղ արժեքը:

Քայլ 4. Թավ ոճը միացնելու համար ավելացրեք հետևյալ կոդը.

@font-face(
տառատեսակ-ընտանիք՝ «MyWebFont»;
src՝ url ("../fonts/WebFont-Bold.eot");
src՝ url("../fonts/WebFont-Bold.eot?iefix") ձևաչափ ("eot"),
url ("../fonts/WebFont-Bold.woff") ձևաչափ ("woff"),
url ("../fonts/WebFont-Bold.ttf") ձևաչափ ("truetype"),
url ("../fonts/WebFont-Bold.svg#webfont") ձևաչափ ("svg");
տառատեսակի քաշը՝ թավ;
տառատեսակի ոճը՝ նորմալ
}

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

Համոզվեք, որ յուրաքանչյուր ոճի համար նշեք տառատեսակի ֆայլերի ճիշտ գտնվելու վայրը:

Քայլ 5. Թավ շեղ տիպը միացնելու համար գրեք հետևյալը.

@font-face(
տառատեսակ-ընտանիք՝ «MyWebFont»;
src՝ url ("../fonts/WebFont-Italic-Bold.eot");
src՝ url ("../fonts/WebFont-Italic-Bold.eot?iefix") ձևաչափ ("eot"),
url ("../fonts/WebFont-Italic-Bold.woff") ձևաչափ ("woff"),
url ("../fonts/WebFont-Italic-Bold.ttf") ձևաչափ ("truetype"),
url ("../fonts/WebFont-Italic-Bold.svg#webfont") ձևաչափ ("svg");
տառատեսակի քաշը՝ թավ;
տառատեսակի ոճը՝ շեղ;
}

Դե, վերջ :) Դուք հենց նոր 4 տառատեսակի ոճ եք ավելացրել Ձեր կայքում:

Բայց կա մեկ նշում՝ տառատեսակների այս միացումը Internet Explorer 8 բրաուզերում ճիշտ չի ցուցադրվի, մխիթարությունն այն է, որ դրանցից շատ քիչ են մնացել։

Ինչպես միացնել տառատեսակները տարբեր CMS կայքերի համար

Կարևոր չէ, թե ինչ շարժիչով է ձեր կայքը (WordPress, Joomla, Drupal, Opencart) – եթե մուտք ունեք CSS ֆայլ, կարող եք միացնել տառատեսակները կամ Google Fonts-ի միջոցով, կամ դրանք վերբեռնելով ձեր սերվերում Fontsquirrel-ի միջոցով:

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

Ինչպես նաեւ:

Բաժանորդագրվեք իմ տեղեկագրինորպեսզի բաց չթողնեք օգտակար և հետաքրքիր բլոգային գրառումները:

Շատ դիզայներներ, ովքեր ստեղծում են լուրջ և հետաքրքիր դասավորություններ, ունեն բազմաթիվ եզակի և գեղեցիկ տառատեսակներ: Նման տառատեսակների շնորհիվ դիզայնը ստանում է իր եռանդն ու բացառիկությունը։ Բայց ոչ ստանդարտ տառատեսակները կցուցադրվեն միայն այն համակարգչում, որի վրա դրանք արդեն տեղադրված են, հետևաբար, դրանց հետ ճիշտ աշխատելու համար դիզայները պետք է ձեզ տրամադրի բոլոր այն տառատեսակները, որոնք նա օգտագործում է իր դասավորության մեջ: Քանի որ դասավորությունը դնելիս դուք ստիպված կլինեք տեղադրել այս տառատեսակները ձեր համակարգչում: Բայց ձեր կայքի օգտատերը իր համար չի ներբեռնի բոլոր տառատեսակները և չի տեղադրի դրանք իր համակարգչում, այնպես որ դուք պետք է ստիպեք զննարկիչին ինքնուրույն քաշել անհրաժեշտ տառատեսակները: Կանոնը կօգնի այստեղ, դեռ կան Cufon-ի օգտագործման կամ տառատեսակներ ներբեռնելու տարբերակներ Google Webfonts-ից կամ Fontsquirrel-ից, սակայն Google Webfonts-ին և Fontsquirrel-ին կարող է տառատեսակի կարիք չունենալ, այնպես որ հաշվի առեք լավագույն տարբերակը՝ եզակի տառատեսակներ միացնել @font-face-ի միջոցով:

Տառատեսակ ներառելու ամենահեշտ ձևը այն ոճաթերթում գրելն է.

@font-face ( տառատեսակ-ընտանիք՝ «PF Din CompPro», src՝ url («fonts/pfdintextcomppro-medium-webfont.ttf»); ) body( տառատեսակ՝ «PF Din CompPro», Arial, sans-serif ;)

Այստեղ «PF Din CompPro»-ն տառատեսակի անունն է, և այնուհետև կարող եք նշել այս տառատեսակը կայքի անհրաժեշտ տարրերի համար, և fonts/pfdintextcomppro-medium-webfont.ttf-ը ձեր տառատեսակի ուղին է, որը գտնվում է տառատեսակների թղթապանակում, այն է՝ Կարևոր է, որ անվանման մեջ տառատեսակի ֆայլում բացատներ չկան, ավելի լավ է դրանք փոխարինել գծիկներով:

Սա ամենահեշտ ճանապարհն է, բայց այն պարզապես չի աշխատում բոլոր բրաուզերներում, և սա մեծ խնդիր է:

Յուրաքանչյուր բրաուզեր աջակցում է իր տառատեսակի ձևաչափերը.
իսկական տեսակՏառատեսակներ Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+ համար
EOTտառատեսակներ Internet Explorer 4+-ի համար
ՎՈՖՖտառատեսակներ Firefox 3.6+, Internet Explorer 9+, Chrome 5+ համար
SVGՏառատեսակներ iPad-ի և iPhone-ի համար

Հետևաբար, դուք ստիպված կլինեք պատրաստել ևս մի քանի նույն տառատեսակներ ձեր տառատեսակներից մեկից .ttf ձևաչափով, միայն այլ ձևաչափով: Այստեղ է, որ fontsquirrel.com-ի տառատեսակների գեներատորը հարմար է: Այս էջում վերբեռնեք ձեր տառատեսակը, ընտրեք Օպտիմալ կարգավորումները, նշեք ներբեռնված տառատեսակի օրինականությունը հաստատող վանդակը (որոշ տառատեսակներ արժեն մեծ գումար, և դուք պետք է ունենաք թույլտվություն դրանք օգտագործելու համար), այնուհետև սեղմեք «Ներբեռնեք ձեր հավաքածուն» կոճակը։ և դուք կստանաք անհրաժեշտ արխիվը ձեր տառատեսակի բոլոր ձևաչափերով:

Ներբեռնեք ձեր տառատեսակների բոլոր ձևաչափերը արխիվից, տեսականորեն դրանք 4 ֆայլ են .eot, .svg, .ttf և .woff ընդլայնումներով, պատճենեք այս ֆայլերը ձեր կայքի տառատեսակների թղթապանակում, կկատարվի նաև stylesheet.css ֆայլը։ եղեք արխիվում - դրա մեջ արդեն գրված կլինեն տառատեսակների միացման բոլոր կանոնները, դուք կարող եք ապահով կերպով պատճենել դրանք ձեր ոճի թերթիկում, պարզապես մի մոռացեք նշել ձեր ուղիները դեպի տառատեսակի ֆայլեր, օրինակ, տառատեսակների թղթապանակ: Իմ կայքերից մեկում տեղի ունեցածի օրինակ.

@font-face ( տառատեսակ՝ «PF Din CompPro», src՝ url («fonts/pfdintextcomppro-medium-webfont.eot»); src՝ url («fonts/pfdintextcomppro-medium-webfont.eot?#iefix» ) ձևաչափ ("ներկառուցված-բացտիպ"), url ("տառատեսակներ/pfdintextcomppro-medium-webfont.woff") ձևաչափ ("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") ձևաչափ ("truetype" ), url ("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") ձևաչափ ("svg"); տառատեսակի քաշը՝ նորմալ; տառատեսակի ոճը՝ նորմալ; Arial, Tahoma, Verdana, sans-serif;)

Այս կարգավորումներով տառատեսակները ցուցադրվում են բոլոր բրաուզերներում, ներառյալ սիրելի IE-7-8-9-ը:

Եթե ​​դուք օգտագործում եք ոչ ստանդարտ տառատեսակներ կիրիլիցայի համար, այսինքն՝ ռուսերեն գրանշանների համար, և տառատեսակը սխալ է ցուցադրվում կայքում, ապա առաջադեմ կարգավորումներով տառատեսակ ստեղծելը կարող է օգնել՝ http://www.fontsquirrel.com/tools էջում։ /webfont-generator ներբեռնեք ձեր տառատեսակը և ընտրեք «Expert» կարգավորումները: Կարգավորումներ շատ կան, ես ամեն ինչ չգիտեմ, բայց ուշադիր կարդացեք և ընտրեք ձեզ անհրաժեշտները, իսկ կիրիլիցային աջակցելու համար ընտրեք Subsetting բլոկում՝ Custom Subsetting բաժինը ... և նշեք Cyrillic վանդակը, ինչպես նաև. նշեք ձեզ անհրաժեշտ լեզուներն ու ձևաչափերը:

Ահա մի օրինակ, թե ինչ եմ ստացել.

Ի՞նչ է իրականում տեսնում կայքի այցելուն բրաուզերի մշակման այս փուլում ոչ ստանդարտ վեբ տառատեսակ օգտագործելիս:

Շատերը տուժում են կայք ստեղծելիս: Շատ դեպքերում կայքը պահանջում է օգտագործել ոչ ստանդարտ տառատեսակ կամ հիերոգլիֆ: Դուք ներբեռնում եք գեղեցիկ տառատեսակ և սկսում եք էջը դնել, բայց ոչ բոլոր օգտատերերն ունեն այդպիսի տառատեսակներ: Ոմանք չեն ամաչում և պարզապես գրաֆիկական ֆայլ են ստեղծում՝ օգտագործելով իրենց անհրաժեշտ տառատեսակը, սակայն հավելյալ գրաֆիկան միշտ չէ, որ տեղավորվում է էջին, և շատերն, այնուամենայնիվ, բավականաչափ դրանցից են: Բայց կա մեկ հարմար ելք. Այս ելքը CSS տեխնոլոգիան է (Cascading Style Sheets) կամ պարզապես «Cascading Style Sheets»: Սովորաբար CSS-ը ներառված է հենց ստեղծված ֆայլում՝ էջում, բայց դուք կարող եք առանձին ստեղծել CSS ֆայլ (.css) և միացնել այն՝ լրացնելով պիտակի միջև: այսպես.

Իսկ CSS-ի օգնությամբ մենք պետք է ավտոմատ կերպով ներբեռնենք և տեղադրենք True Type Font (.ttf) տառատեսակի ֆայլը, սակայն տեղադրումը տեղի կունենա միայն այն դեպքում, եթե օգտատիրոջ համակարգիչը չհայտնաբերի անհրաժեշտ տառատեսակը։ Նախ պետք է նշենք տառատեսակի տեղը։ Դա անելու համար մենք գրում ենք պիտակների միջև ևԱյսպիսով.

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

Անկեղծ ասած, դա անելն ավելի հեշտ և ճիշտ է.


Թեև վեբ տառատեսակները աջակցվում են բրաուզերների մեծամասնության կողմից, դրանք Օպերայում ի սկզբանե խելագար են: Որոշ համակարգերում դրանք ընդհանրապես չեն աշխատում, դրանցում, որոնք աշխատում են, էջերը կարող են կամ չաշխատել վերաբեռնելիս.

Հետևաբար, սա չպետք է օգտագործվի լուրջ նախագծերում, միայն անձնական բլոգներում, և միայն 30px-ից մեծ տեքստի համար, որպեսզի չտեսնեք հակաալիզինգի և քերնինգի հրաշքները:

Միևնույն ժամանակ Googleապահովում է - API ոչ ստանդարտ տառատեսակների խաչաձեւ զննարկիչային միացման համար:







Վեբը դարձնելով գեղեցիկ:



Google-ը հայտնաբերում է զննարկիչը և թողարկում է վավեր CSS և տառատեսակ դրա համար:

ՀԱՐԱԿԻՑ ՀՈԴՎԱԾՆԵՐ