css fonta savienojums ttf. Iestatiet fontus css

Fontiem ir milzīga loma vietņu dizainā. Viens un tas pats teksts, kas rakstīts dažādos fontos, var radīt pretējus iespaidus uz cilvēku.

Paskaties pats:

Daži fonti izskatās pārliecinošāki, citi – intriģējošāki.

Bet kā savienot fontus ar vietni un lietot tos, kur vien vēlaties?

Šajā rakstā I Es jums parādīšu 3 veidus, ar kuru jūs varat pievienot savai vietnei jebkurus, visdažādākos un nestandarta fontus. Un nav svarīgi, kuru CMS izmantojat: WordPress, Joomla, Drupal vai Open Cart.

Jūs redzēsit, ka fontu savienošanā ar vietni nav nekā sarežģīta.

Tu iemācīsies:

1. metode. Ātra fontu savienošana ar WordPress vietni (grūtības: ⭐ ⭐ ⭐)

Ja jūsu vietnē ir instalēts augstākās kvalitātes motīvs, fontus varat savienot 2 minūšu laikā.

Piemēram:

Jūs vēlaties mainīt rakstu nosaukumu fontu. Priekš šī:

1. Administratora panelī atveriet sadaļu Motīvu opcijas. Atkarībā no jūsu veidnes šī sadaļa var tikt saukta nedaudz savādāk, taču nozīme vienmēr ir vienāda - "motīva iestatījumi".

2. Dodieties uz sadaļu Tipogrāfija.

3. Atlasiet elementu, kura fontu vēlaties mainīt (virsraksti, rindkopas):

Ja jūsu vietne darbojas citā dzinējā vai jūsu motīvs nenodrošina šādus iestatījumus, pārejiet uz nākamo metodi.

2. metode. Izmantojiet Google fontu iespējas
(grūtības pakāpe: ⭐ ⭐ ⭐ ⭐)

Vai esat kādreiz dzirdējuši par Google fontiem? Īsāk sakot, šis ir pakalpojums, ar kuru jūs varat pievienot savai vietnei vairāk nekā 700 fontu.

1. darbība. Dodieties uz pakalpojuma oficiālo vietni.

2. darbība. Google fontu kolekcijā atrodiet sev piemērotos fontus. Labajā izvēlnē varat sašaurināt loku, iestatot fonta valodu, stilu un popularitāti:

Lai pakalpojums rādītu fontus ar krievu valodas atbalstu, vienumā Valodas atlasiet kirilicu.

3. darbība Pieņemsim, ka jums patīk Roboto fonts. Noklikšķiniet uz ikonas "+":

Varat pievienot jebkurus fontus, noklikšķinot uz "+" zīmes.

4. darbība. Pēc tam jums ir jāpaplašina grozs ar atlasītajiem fontiem:

Dodoties uz cilni Pielāgot, varat izvēlēties stilus un valodas. Attiecībā uz stiliem iesaku izvēlēties standarta komplektu - normāls (400), slīpraksts (400 slīpraksts), treknraksts (700) un slīpraksts-treknraksts (treknraksts 700 slīpraksts):

Bet, ja vēlaties tikai treknrakstu (virsrakstiem), izvēlieties tikai to.

Atcerieties, jo vairāk stilu izvēlaties, jo lielāks būs augšupielādētā faila izmērs.

Lai nepalēninātu vietnes ielādes ātrumu, izvēlieties pēc iespējas mazāk fontu stilu.

5. darbība. Atgriezieties sadaļā Iegult un atlasiet cilni @IMPORT. Pēc tam nokopējiet koda rindiņu, kurā ir “@import”, un ielīmējiet to savas vietnes CSS faila pirmajā rindā:

Ja jums ir WordPress vietne, CSS fails, visticamāk, atrodas šeit: wp_content/themes/"yourtheme"/css/... CSS mapē, visticamāk, būs Fonts fails, kurā jums ir jāpārsūta iegulšanas kods no Google:

Nav svarīgi, kurā SPS darbojas jūsu vietne, vienkārši ielīmējiet kodu, un viss būs 👌

Tā kā vispirms ir jāielādē fonti, tad tikai pēc tam viss pārējais - ievietojiet fonta savienojuma kodu CSS faila pašā sākumā.

Tajā pašā CSS failā varat definēt fontu noteiktiem vietnes elementiem.

Piemēram:

Lai piešķirtu Roboto fontu visām rindkopām, es uzrakstīšu sekojošo: p ( font-family: Roboto;)

3. metode. Pielāgots fonta savienojums, izmantojot CSS (grūtības: ⭐ ⭐ ⭐ ⭐ ⭐)

Ja esat pietiekami prasmīgs, vislabāk ir iekļaut fontus pats, izmantojot CSS. Šajā gadījumā fonti atradīsies jūsu serverī īpašā mapē. Bet vispirms jums tie kaut kur jānogādā.

Kur iegūt tīmekļa fontus vietnei

Vai zinājāt, ka tīmekļa fontu izmantošanai ir jāiegādājas atsevišķa licence?

Savienojiet fontus ar bezmaksas licenci. Vienkāršākais veids, kā tos atrast, ir Fontsquirrel serviss, ko mēs arī darīsim.

1. darbība. Dodieties uz pakalpojuma oficiālo vietni

2. darbība. Labajā izvēlnē sadaļā Valodas atlasiet kirilicu.

3. darbība. Atrodiet piemērotu fontu. Pievērsiet uzmanību fontu skaitam.

Piemēram, ja ir 4 stili, tiks rakstīti 4 stili:

Fontu stilu apzīmējumi - normāls (400/regulārs), slīpraksts (slīpraksts), treknraksts (700/bold), trekns slīpraksts (700 slīpraksts).

5. darbība. Noklikšķiniet uz fonta nosaukuma un dodieties uz iestatījumu lapu.

6. darbība. Dodieties uz sadaļu Webfont Kit. Atlasiet visus fontu formātus un noklikšķiniet uz Lejupielādēt @FONT-FACE KIT. Ja ir pieejami tikai 1-2 formāti, tas nav biedējoši.

Lai iekļautu fontus, izmantojiet @Font-face

Izmantojot direktīvu @font-face, savā vietnē varat iekļaut vienu vai vairākus fontus. Bet šai metodei ir savi plusi un mīnusi.

Plusi:

Izmantojot CSS, varat iekļaut jebkura formāta fontus: ttf, otf, woff, svg.
Fonta faili atradīsies jūsu serverī - jūs nebūsiet atkarīgs no trešo pušu pakalpojumiem.

Mīnusi:

Lai pareizi savienotu fontu katram stilam, jums jāieraksta atsevišķs kods.
Nezinot CSS, ir viegli apjukt.

Jūs varat vienkārši nokopēt manu gatavo kodu un vietu, kur jums jāievieto vērtības.

1. darbība. Pārsūtiet lejupielādētos fontu failus uz savu vietni. To var izdarīt, izmantojot hostinga vadības paneli vai FTP.

Es iesaku izveidot fontu mapi tajā pašā direktorijā, kur atrodas jūsu CSS fails. Pārvietojiet visus fontu failus uz šo mapi.

2. darbība. CSS faila pašā sākumā ierakstiet šādu ierakstu:

@font-face(
fontu saime: "MyWebFont";
src: url(../fonts/WebFont.eot");
src: url(../fonts/WebFont.eot?iefix") formāts ("eot"),
url(../fonts/WebFont.woff") formāts ("woff"),
url(../fonts/WebFont.ttf") formāts ("truetype"),
url("../fonts/WebFont.svg#webfont") formāts("svg");
fonta svars: normāls
fonta stils: normāls
}

Kur MyWebFont ir fonta nosaukums, bet rekvizīta src vērtība (dati iekavās pēdiņās) ir to atrašanās vieta (relatīvās saites). Mums ir jānorāda katrs stils atsevišķi.

Tā kā mēs vispirms iekļaujam parasto fontu, fonta svara un fonta stila rekvizītus iestatījām uz parasto.

3. darbība. Savienojot slīpraksta stilu, ierakstiet:

@font-face(
fontu saime: "MyWebFont";
src: url (../fonts/WebFont-Italic.eot");
src: url(../fonts/WebFont-Italic.eot?iefix") formāts ("eot"),
url(../fonts/WebFont-Italic.woff") formāts ("woff"),
url(../fonts/WebFont-Italic.ttf") formāts ("truetype"),
url("../fonts/WebFont-Italic.svg#webfont") formāts("svg");
fonta svars: normāls
fonta stils: slīpraksts;
}

Ja viss ir vienāds, tikai mēs fonta stila rekvizītam piešķīrām vērtību slīprakstu.

4. darbība. Lai iespējotu treknrakstu, pievienojiet šādu kodu:

@font-face(
fontu saime: "MyWebFont";
src: url("../fonts/WebFont-Bold.eot");
src: url(../fonts/WebFont-Bold.eot?iefix") formāts ("eot"),
url(../fonts/WebFont-Bold.woff") formāts ("woff"),
url(../fonts/WebFont-Bold.ttf") formāts ("truetype"),
url("../fonts/WebFont-Bold.svg#webfont") formāts("svg");
fonta svars: treknrakstā;
fonta stils: normāls
}

Kur mēs iestatām fonta svara rekvizītu treknrakstā.

Noteikti norādiet pareizo fontu failu atrašanās vietu katram stilam.

5. darbība. Lai iespējotu treknrakstu, slīprakstu, ierakstiet šo:

@font-face(
fontu saime: "MyWebFont";
src: url(../fonts/WebFont-Italic-Bold.eot");
src: url(../fonts/WebFont-Italic-Bold.eot?iefix") formāts ("eot"),
url(../fonts/WebFont-Italic-Bold.woff") formāts ("woff"),
url(../fonts/WebFont-Italic-Bold.ttf") formāts ("truetype"),
url("../fonts/WebFont-Italic-Bold.svg#webfont") formāts ("svg");
fonta svars: treknrakstā;
fonta stils: slīpraksts;
}

Nu, tas arī viss :) Jūs tikko pievienojāt savai vietnei 4 fontu stilus.

Taču ir viena piezīme – šis fontu savienojums netiks pareizi attēlots pārlūkprogrammā Internet Explorer 8. Mierinājums ir tāds, ka to ir palicis ļoti maz.

Kā savienot fontus vietnēm dažādās CMS

Nav nozīmes tam, kāds dzinējs darbojas jūsu vietnē (WordPress, Joomla, Drupal, Opencart) — ja jums ir piekļuve CSS failam, varat savienot fontus, izmantojot Google Fonts vai augšupielādējot tos savā serverī, izmantojot Fontsquirrel.

Labi, tagad viss ir beidzies. Ja uzskatāt, ka šis raksts var būt noderīgs citiem tīmekļa pārziņiem, lūdzu, kopīgojiet to sociālajos tīklos.

Kā arī:

Abonējiet manu biļetenu lai nepalaistu garām noderīgus un interesantus emuāra ierakstus.

Daudziem dizaineriem, kuri veido nopietnus un interesantus izkārtojumus, ir pieejams daudz unikālu un skaistu fontu. Pateicoties šādiem fontiem, dizains iegūst savu aizrautību un ekskluzivitāti. Bet nestandarta fonti tiks rādīti tikai tajā datorā, kurā tie jau ir instalēti, tāpēc, lai ar tiem pareizi strādātu, dizainerim ir jānodrošina jums visi fonti, kurus viņš izmanto savā izkārtojumā. Jo, kārtojot izkārtojumu, šie fonti būs jāinstalē datorā. Bet jūsu vietnes lietotājs nelejupielādēs visus fontus sev un neinstalēs tos savā datorā, tāpēc jums ir jāliek pārlūkprogrammai pašai izvilkt nepieciešamos fontus. Šeit palīdzēs noteikums, joprojām ir iespējas izmantot Cufon vai lejupielādēt fontus no Google Webfonts vai Fontsquirrel, taču Google Webfonts un Fontsquirrel fonts var nebūt vajadzīgs, tāpēc apsveriet labāko variantu - unikālu fontu savienošanu, izmantojot @font-face.

Vienkāršākais veids, kā iekļaut fontu, ir ierakstīt to stila lapā:

@font-face ( fontu saime: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.ttf"); ) body( font-family: "PF Din CompPro", Arial, sans-serif ;)

Šeit 'PF Din CompPro' ir fonta nosaukums, un pēc tam varat norādīt šo fontu nepieciešamajiem vietnes elementiem, un fonts/pfdintextcomppro-medium-webfont.ttf ir ceļš uz jūsu fontu, kas atrodas fontu mapē. svarīgi, lai nosaukumā fontu failā nebūtu atstarpes, labāk tās aizstāt ar domuzīmēm.

Tas ir vienkāršākais veids, taču tas vienkārši nedarbojas visās pārlūkprogrammās, un tā ir liela problēma.

Katra pārlūkprogramma atbalsta savus fontu formātus:
patiess tips Fonti Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT fonti pārlūkprogrammai Internet Explorer 4+
WOFF fonti pārlūkprogrammai Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG Fonti iPad un iPhone ierīcēm

Tādēļ jums būs jāizveido vēl vairāki tādi paši fonti no viena fonta .ttf formātā, tikai citā formātā. Šeit noder fontsquirrel.com fontu ģenerators. Šajā lapā augšupielādējiet savu fontu, atlasiet Optimālos iestatījumus, atzīmējiet izvēles rūtiņu, kas apstiprina lejupielādētā fonta likumību (daži fonti maksā daudz naudas, un jums ir jābūt atļaujai tos izmantot), pēc tam noklikšķiniet uz pogas “Lejupielādēt komplektu”. un jūs saņemsiet nepieciešamo arhīvu ar visiem sava fonta formātiem.

Lejupielādējiet visus savu fontu formātus no arhīva, teorētiski tie ir 4 faili ar paplašinājumiem .eot, .svg, .ttf un .woff, kopējiet šos failus uz savas vietnes fontu mapi, arī stylesheet.css fails būt arhīvā - tajā jau būs ierakstīti visi fontu savienošanas noteikumi, varat tos droši kopēt savā stila lapā, tikai neaizmirstiet norādīt savus ceļus uz fontu failiem, piemēram, uz fontu mapi. Piemērs tam, kas notika vienā no manām vietnēm:

@font-face ( fontu saime: "PF Din CompPro"; src: url("fonts/pfdintextcomppro-medium-webfont.eot"); src: url("fonts/pfdintextcomppro-medium-webfont.eot?#iefix" ) formāts("embedded-opentype"), url("fonti/pfdintextcomppro-medium-webfont.woff") formāts("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") formāts("truetype" ), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); fonta svars: normāls; fonta stils: normāls; ) body( font-family: "PF Din CompPro", Arial, Tahoma, Verdana, sans-serif;)

Izmantojot šos iestatījumus, fonti tiek parādīti visās pārlūkprogrammās, tostarp iemīļotajā IE-7-8-9.

Ja izmantojat nestandarta fontus kirilicai, ti, krievu rakstzīmēm, un fonts vietnē tiek parādīts nepareizi, tad var palīdzēt fonta ģenerēšana ar papildu iestatījumiem lapā http://www.fontsquirrel.com/tools. /webfont-generator lejupielādējiet fontu un atlasiet “Ekspertu” iestatījumus. Iestatījumu ir daudz, es nezinu visu, bet izlasiet uzmanīgi un atlasiet vajadzīgos, un, lai atbalstītu kirilicu, blokā Subsetting atlasiet: sadaļu Pielāgots apakšiestatījums ... un atzīmējiet izvēles rūtiņu kirilica, kā arī atzīmējiet vajadzīgās valodas un formātus.

Šeit ir piemērs tam, ko es saņēmu:

Ko vietnes apmeklētājs patiesībā redz, izmantojot nestandarta Web fontu šajā pārlūkprogrammas izstrādes posmā?

Daudzi cieš, veidojot vietni. Daudzos gadījumos vietnei ir jāizmanto nestandarta fonts vai hieroglifs. Jūs lejupielādējat skaistu fontu un sākat izkārtot lapu, taču ne visiem lietotājiem ir šādi fonti. Daži nekautrējas un vienkārši izveido grafisko failu, izmantojot sev nepieciešamo fontu, taču papildu grafikas ne vienmēr atbilst lapai, un daudziem ar tām tik un tā ir pietiekami. Bet ir viena piemērota izeja! Šī izeja ir izmantot CSS tehnoloģiju (Cascading Style Sheets) vai vienkārši "Cascading Style Sheets". Parasti CSS tiek ievietots pašā izveidotajā failā, lapā, bet CSS failu (.css) var izveidot atsevišķi un savienot to ar polsterējumu starp tagu. tādējādi:

Un ar CSS palīdzību mums ir automātiski jālejupielādē un jāinstalē True Type Font (.ttf) fonta fails, taču instalēšana notiks tikai tad, ja lietotāja dators neatklās vajadzīgo fontu. Pirmkārt, mums ir jānorāda fonta atrašanās vieta. Lai to izdarītu, mēs rakstām starp tagiem un Tātad:

Tādējādi savā vietnē varat izmantot jebkurus fontus. Bet es iesaku jums nebūt pārāk izsmalcinātam, jo arī fonta lejupielādes un instalēšanas process prasa noteiktu laiku. Un, ja jūsu fonts pats "sver" 500kb vai vairāk, tad šajā gadījumā to nav ieteicams izmantot.

Godīgi sakot, to izdarīt ir vieglāk un pareizāk:

Lai gan tīmekļa fontus atbalsta lielākā daļa pārlūkprogrammu, tie ir kļūdaini operā jau no paša sākuma. Dažās sistēmās tās nedarbojas vispār, tajās, kurās darbojas, lapas var vai var nedarboties, pārlādējot:

Tāpēc šo nevajadzētu izmantot nopietnos projektos, tikai personīgajos emuāros un tikai tekstam, kas lielāks par 30 pikseļiem, lai neredzētu anti-aliasing un kerning brīnumus.

Tajā pašā laikā Google nodrošina - API nestandarta fontu savienojumam starp pārlūkprogrammām.