Tīmekļa fontu savienošana, izmantojot @font-face. Juridisks jautājums par fontu izmantošanu

Treknrakstā teksts

Treknrakstā teksts

Vairāk nekā parasti

Mazāk nekā parasti

Kursīvs

Kursīvs

Ar pasvītrojumu

Izsvītrots

Stila atribūtu iespējas

Papildus aprakstītajiem tagiem ir vēl vairāki veidi, kā mainīt fontu html. Viens no tiem ir vispārīgā stila atribūta izmantošana. Izmantojot tā rekvizītu vērtības, varat iestatīt fontu displeja stilu:

1) font-family — rekvizīts nosaka fontu saimi. Ir iespējams uzskaitīt vairākas vērtības.
Ja lietotāja operētājsistēmā nav instalēta iepriekšējā saime, HTML fonta maiņa uz nākamo vērtību notiks.

Rakstīšanas sintakse:

fontu saime: fonta nosaukums [, fonta nosaukums[, ...]]

2) font-size – lielums ir iestatīts no 1 līdz 7. Šis ir viens no galvenajiem veidiem, kā palielināt fontu HTML.
Rakstīšanas sintakse:

fonta izmērs: absolūtais izmērs | relatīvais izmērs | nozīme | procenti | mantot

Varat arī iestatīt fonta lielumu:

• pikseļos;
• Absolūtos skaitļos ( xx-mazs, x-mazs, mazs, vidējs, liels);
• Procentos;
• Punktos (pt).

Fonta lielums: 7

Fonta lielums: 24 pikseļi

Fonta lielums: x-large

Fonta lielums: 200%

Fonta lielums: 24 pt

fonta stils: normāls | slīpraksts | slīpi | mantot

Vērtības:

• normāls – normāla pareizrakstība;
• slīpraksts – slīpraksts;
• slīps – fonts slīps pa labi;
• inherit – pārmanto vecākelementa pareizrakstību.

Piemērs, kā mainīt fontu html, izmantojot šo rekvizītu:

font-style: inherit

fonta stils: slīpraksts

font-style:normāls

fonta stils: slīps

fonta variants: normāls | mazie burtiņi | mantot

Piemērs, kā mainīt fontu html, izmantojot šo rekvizītu:

font-variant: inherit

fonta variants:normāls

fonta variants: mazie burti

fonta svars: trekns|treknāks|vieglāks|parasts|100|200|300|400|500|600|700|800|900

Vērtības:

• treknraksts – iestata html fontu uz treknrakstu;
• drosmīgāks – drosmīgāks attiecībā pret parasto;
• gaišāks - mazāk piesātināts salīdzinājumā ar parasto;
• normāls – normāla pareizrakstība;
• 100-900 – iestata fonta biezumu skaitliskā ekvivalentā.

font-weight:bold

font-weight:bolder

fonta svars: vieglāks

fonta svars: normāls

fonta svars: 900

fonta svars: 100

html fonta rekvizītu un fonta krāsu

Fonts ir vēl viens konteinera īpašums. Sevī tas apvienoja vairāku rekvizītu vērtības, kas paredzētas fontu maiņai. fonta sintakse:

fonts: font-size font-family | mantot

Vērtību var iestatīt arī fontiem, ko sistēma izmanto dažādu vadīklu etiķetēs:

• paraksts – pogām;
• ikona – ikonām;
• izvēlne - izvēlne;
• ziņu lodziņš – dialoga logiem;
• mazie paraksti – mazām vadīklām;
• status-bar – statusa joslas fonts.

Šajā raksta apmācībā es jums pastāstīšu, kā vietnei izveidot savu fontu, izmantojot ikonas, kuras izveidojāt pats. Viss, kas mums nepieciešams, ir vektorgrafikas izveides programma (Adobe Illustrator vai Inkspcape) un piekļuve internetam. Visus šim izmantotos attēlus, ikonas un css fontus varat lejupielādēt raksta beigās.

Šajā apmācībā mēs darīsim kaut ko vienkāršu. Pirmajai ikonai mēs uzzīmēsim parastu zvaigzni. Otrajai ikonai - ērglis ar burtu W iekšā. To ir diezgan viegli zīmēt, un jūs varat izveidot jebkuras formas un kombinācijas. Šiem nolūkiem es izmantoju ilustratoru.

Kad esat pabeidzis radošo daļu, jūsu darbs ir jāsaglabā SVG formātā. Noklikšķiniet uz “Saglabāt kā” un atlasiet faila veidu kā SVG. Tagad varat pāriet tieši uz fonta izveidi.

Šiem nolūkiem mēs izmantojam populāro un bezmaksas pakalpojumu IcoMoon.

Pirmā lieta, kas jādara, ir izveidot jaunu projektu, tāpēc noklikšķiniet uz izvēlnes augšējā kreisajā stūrī un noklikšķiniet uz "Jauns projekts". Pēc tam mēs ielādējam gatavos svg failus pēc noklikšķināšanas uz pogas “Importēt ikonas”. Pēc šo darbību veikšanas monitorā vajadzētu redzēt šādu attēlu:

Tagad mums ir iespēja mainīt katras ikonas kodu (mūsu gadījumā tas būs e600 un e601), mūsu fonta nosaukumu, CSS prefiksu un tā tālāk. Tas viss tiek darīts sadaļā “Preferences”. Tāpat mēs varam redzēt fontu darbībā, noklikšķinot uz saites “Iespējot ātro lietošanu”, kas ļaus mums iegūt pagaidu saiti uz mūsu fontu, kā arī iespēju skatīt kodu CodePen.

Kad esat visu konfigurējis, lapas apakšā noklikšķiniet uz pogas "Lejupielādēt" un lejupielādējiet arhīvu. Šajā arhīvā jūs atradīsiet savu fontu ttf, eot, svg un woff formātos + demonstrācijas lapu ar fontu.

Izmantojot ikonas vietnē

Tagad viss, kas mums nepieciešams, ir iekļaut CSS fontu, izmantojot @font-face, un norādīt citus parametrus (tie visi ir ierakstīti css failā jūsu lejupielādētajā arhīvā.

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; runāt: nav fonts-variant: normal line-height: 1; -izlīdzināšana: pelēktoņu ) .wdm-star:before ( saturs: "\e600"; ) .wdm-eagle:before ( saturs: "\e601"; )

Tagad mēs varam izmantot mūsu fontu HTML kodā, piemēram:

Tagam klases nosaukuma norādīšana mēs iegūstam savu ikonu.

Mēs piedāvājam jums bezmaksas pakalpojumu izlasi dizaineriem. Šī ir pirmā iespēja, nākotnē plānojam to paplašināt, pievienojot jaunas sadaļas un rīkus.

Fonti

• Google fonti ir ikviena iecienītākā fontu bibliotēka. Ļauj atlasīt un lejupielādēt dažādus fontus visiem gadījumiem.
• 1001 bezmaksas fonts — fontu bibliotēka. Tajā ir vienkārša navigācija – fonti ir sakārtoti gan alfabētiskā secībā, gan pēc veida. Ir krievu fontu sadaļa.
• Fontstruct ir tiešsaistes fontu dizainers. Ļoti vienkāršs rīks, kas ļaus jums izveidot savu fontu. Jūs varat zīmēt ne tikai ar standarta kvadrātiem, bet arī ar citām formām - punktiem, noapaļotiem stūriem utt. Iesācējam tas ir ideāls rīks, lai izmēģinātu un redzētu tipogrāfiju darbībā.
• Font Squirrel ir viena no lielākajām fontu bibliotēkām. Turklāt varat augšupielādēt attēlu un iegūt tajā izmantoto fontu nosaukumus. Ir fontu veikals un pat apģērbu veikals ar logotipiem.
• Type light ir pilna funkcionalitāte fontu redaktors. Ļauj izveidot, rediģēt un konvertēt OpenType, TrueType un PostScript fontus. Nepieciešams lejupielādēt un instalēt. Bezmaksas versijai ir ierobežota funkcionalitāte salīdzinājumā ar bezmaksas versiju. Bet ar to pietiek, lai izveidotu vienkāršu fontu.
• Kas ir fonts ir tiešsaistes pakalpojums vietņu fontu atlasei. Mēs lejupielādējam fonta failu, norādām vietnes URL un skatāmies, kā lejupielādētais fonts izskatīsies vietnē. Ērts serviss.
• 1001 Fonts – fontu bibliotēka (vairāk nekā 15 000). Ērta navigācija – fontu var izvēlēties pēc izmēra, veida, tēmas, dizaina utt. Izvēlne ļauj pielāgot izvadi, kas ļauj redzēt katru fontu dažādās opcijās: lielums, stils utt.
• Font Flame ir tiešsaistes pakalpojums saderīgu fontu pāra izvēlei. Tas darbojas ļoti vienkārši - galvenajā lapā ir lapa ar diviem uzrakstiem, kas izgatavoti dažādos fontos. Ja jums patika, noklikšķiniet uz “Mīlestība”, ja nepatika, noklikšķiniet uz “Naids”. Pēc tam varat vēlreiz skatīt atlasītos. Noklikšķinot uz fonta nosaukuma, tiek atvērts Google fonti.
• Typecast – fonta izvēle prototipam. Varat redzēt, kā fonts izskatīsies jebkurā ierīcē. Ir nepieciešams identificēt dažādus teksta veidus - virsrakstus, pēdiņas utt. Varat izvēlēties burtveidolu, izmēru, stilu un iestatīt atkāpes. Savu nākamo lapu redzēsit instalētajos fontos. Liels pluss ir izkārtojuma izvēle (viena kolonna vai vairākas, dažādi bloku izkārtojumi).
• Vārdzīme — ļauj izvēlēties lietotāja datorā instalēto fontu tekstam, logotipam vai nosaukumam. Ievadot tekstu laukā, tas tiek rādīts dažādos fontos. Jūs varat izvēlēties izmēru, reģistrēt, attēlot melnbaltu vai otrādi. Jums tīkamās opcijas tiek publicētas Twitter vai Facebook — pēc lietotāja izvēles. Var nosūtīt pa e-pastu.

Fonda fotoattēli

• Unsplash ir pastāvīgi atjaunināts fotoattēlu krājums. Kolekcijas ir sadalītas pa tēmām. Jūs varat atrast jebko, sākot no "afroamerikāņu" līdz "dabai". Katrai fotogrāfijai ir savs vērtējums, var redzēt labākos vai jaunos.
• FoodiesFeed – ēdienu fotogrāfijas. Attēli ir sadalīti kategorijās. Jūs varat izvēlēties labāko, ekskluzīvo, ikonas, maketus utt.
• Bezmaksas Refe Photos - milzīgs saraksts ar "Reālās dzīves" attēliem. Galvenokārt ainavu un dabas fotografēšana. Neērta navigācija, ritinot parādās visi fotoattēli galvenajā lapā.
• Little Visuals – augstas kvalitātes ainavu un ēku fotogrāfijas. Varat lejupielādēt nedēļas laikā publicēto labāko fotoattēlu arhīvu. Fotoattēli ir marķēti ar atsaucēm, taču tie nav iedalīti kategorijās.
• Gratisogrāfija ir milzīga bezmaksas fotoattēlu bibliotēka. Visas fotogrāfijas ir sadalītas sešās tēmās: cilvēki, grimases, pilsētas, objekti, daba un dzīvnieki. Jūs varat meklēt pēc vārdiem.
• Death to the Fonda fotogrāfija – fonda fotoattēli. Jūs nevarat vienkārši skatīties un izvēlēties. Viņi veic atlasi mēnesi iepriekš un ļauj to lejupielādēt pēc e-pasta ievadīšanas. Arhīvs sver aptuveni 11 MB. Labākās fotogrāfijas un lejupielādes saite tiek nosūtīta pa e-pastu.
• Superfamous – liela fotogrāfiju kolekcija no neierasta leņķa. Komplekts mazs, bet interesants.
• Rakstu bibliotēka – raksti un faktūras. Komplekts diezgan liels, veidnes neparastas. Tos aizstāj ar ritināšanu un pakāpeniski. Varat redzēt, kā veidne izskatīsies visā ekrānā vai tā daļā.
• New Old Stock – vintage fotogrāfijas no arhīviem. Bezmaksas fotoattēlu ir maz, taču regulāri parādās jaunas.
• Pexels – liels skaits fotogrāfiju visiem gadījumiem. Tie ir sadalīti pa tēmām, ļoti viegli meklējami.
• Jay Mantri - liels fotoattēlu komplekts. Klasifikācijas kā tādas nav, var skatīt pa mēnešiem.

Krājuma grafika

• Brusheezy — bezmaksas otas, veidnes, faktūras un daudz kas cits programmai Photoshop. 12 kategorijas, katra ar apakškategorijām. Izvēle ir milzīga.
• Iconfinder – ikonas, gan maksas, gan bezmaksas. Jūs varat lejupielādēt ICO, PNG, ICNS, SVG formātos.
• Brushez ir liela Photoshop otu kolekcija. Papildus tiem ir arī vektoru primitīvi, formas, veidnes, stili. Katra sadaļa ir sadalīta apakšsadaļās. Piemēram, otām ir vairāk nekā 20 kategorijas.
• Vecteezy ir vektorgrafikas bibliotēka, ieskaitot attēlus un ilustrācijas. Liels skaits kategoriju un milzīgs skaits grafiku.
• Iconbird ir ikonu meklēšanas pakalpojums krievu valodā. Varat ievadīt tēmu un iegūt ikonu kopu, vai arī varat pārlūkot pēc kategorijas.
• Icons8 ir krievu valodas pakalpojums, kas piedāvā vairāk nekā 42 000 ikonu par dažādām tēmām.

Infografikas

• Vizualize ir tiešsaistes pakalpojums infografikas “Par mani” izveidei. Būtībā izveido grafisku CV.
• Canva ir vienkāršs rīks jebkura dizaina izveidei. Ļauj noformēt prezentāciju, plakātu, ievietot ierakstus sociālajos tīklos, grāmatas, vēstules, materiālus un daudz ko citu. Viss tiek darīts pēc šabloniem, teksts mainās. Bet ir daudz veidņu, no kurām izvēlēties.
• Viegli – izveidojiet infografikas, pamatojoties uz veidnēm. Iebūvētais tiešsaistes redaktors ļauj mainīt dizainu, ievietot papildu elementus un mainīt tekstu.
• Infogram ir tiešsaistes pakalpojums infografiku un interaktīvu diagrammu izveidei. Ne visas funkcijas ir pieejamas, jums būs jāiegādājas konts.
• Visage ir vienkāršs rīks jebkura vizuālā satura (diagrammas, infografikas, emuāra attēli utt.) izveidei. Daudz veidņu, vienkāršs redaktors. Dažas funkcijas ir maksas.
• Gliffy ir tiešsaistes pakalpojums diagrammu izveidei. Redaktors darbojas pēc Microsoft Visio principa.
• Visme ir tiešsaistes rīks prezentāciju un infografiku veidošanai. Vairāk nekā 1000 veidņu. Redaktors ļauj pievienot tekstu (virsrakstus, sarakstus, citātus un parasto), animētu tekstu un logrīkus. Bezmaksas kontā varat to lejupielādēt kā JPG failu.
• Piktokarte - izveidojiet augstas kvalitātes grafiku - prezentācijas, infografikas vai drukātus materiālus. Augšupielādē dažādu izmēru PNG, JPG.
• Drawio ir ērts tiešsaistes pakalpojums diagrammu izveidei. Varat saglabāt dropbox un līdzīgos pakalpojumos vai diskā.
• Venngage – vienkārša infografiku, plakātu, reportāžu, sociālo tīklu materiālu u.c. izveide. Bezmaksas versijā tas nodrošina tikai saiti uz publikāciju. Jums ir jāmaksā par lejupielādi.
• Cacoo ir tiešsaistes pakalpojums diagrammu un vietņu karšu zīmēšanai. Iespējams, ka labākais pēc iespējām. Liels skaits rīku un veidņu. Varat eksportēt uz PNG, PDF, SVG, PPT utt.
• Creately ir tiešsaistes diagrammu veidošanas pakalpojums. Pieejams tikai publicēšanai. Par lejupielādi ir jāmaksā.
• Lucidchart ir tiešsaistes pakalpojums diagrammu un rasējumu izveidei. Ir iespējams importēt Microsoft Visio diagrammu. Eksports uz PDF, PNG un JPG. Pieejama maksas funkcionalitāte.

Krāsas

• Color Hunt – krāsu kombināciju izvēle. Varat izvēlēties līdz četrām krāsām. Ir gatavi risinājumi, no kuriem izvēlēties.
• TinEye – analizē vietni un parāda resursu sarakstu, kas izmanto vietnes attēlu.
• ColorZilla – ļauj izveidot krāsas un gradientus. Parāda tiem css rekvizītus.
• Adobe Color CC – krāsu shēmu izveide.
• Colicious — nospiediet atstarpes taustiņu un ģenerējiet jaunu krāsu.
• Krāsu shēma - krāsu shēmu izvēle. Ir versija angļu un krievu valodā. Ļauj izvēlēties vietnes krāsas. Ir precīzs regulējums un parāda krāsu kodu. Galu galā tas ļauj skatīt lapu izvēlētajā krāsu shēmā. Lielākā priekšrocība ir gammas skatīšana krāsu uztveres novirzes ziņā. Tas arī ļauj izvēlēties dažādu krāsu modeļus. Paletē saglabā Gimp, CSS, PNG utt. Ir krāsu pārveidotājs, lai pārveidotu no viena krāsu modeļa uz citu.
• Paletton ir rīks krāsu kombināciju veidošanai. Neatšķiras no krāsu shēmas.
• Pictaculous — analizē PNG, JPG vai GIF attēla paleti. Augšupielādējiet attēlu un iegūstiet visu tajā esošo krāsu komplektu.
• Hex Color Tool – krāsu izvēles rīks. Izmantojiet slīdņus, lai pielāgotu krāsu, un varat izvēlēties spilgtumu. Pēc tam izvēlētā krāsa tiek saglabāta. Jūs varat izvēlēties paleti.
• (Un)clrd ir pārlūkprogrammas spraudnis, kas noņem visas krāsas un atstāj vietni melnbaltā krāsā.
• BrandColors - lielākā oficiālo zīmolu krāsu kodu kolekcija. Atlasiet zīmola nosaukumu un lejupielādējiet tā krāsu nosaukumus, tostarp css failu.
• Colortyper - krāsu izvēle no neparasta leņķa. Ekrānā ir redzami daudzkrāsaini simboli, kas krustojas. Krustojuma rezultāts ir jauna krāsa. Izskatās interesanti.

Iedvesma

• Dribbble — lielākā dizaineru kopiena. Darbs, kopiena, komunikācija – šeit var atrast jebko.
• Freebble — veidnes un dizaini no Dribbble. Dažas lietas var lejupielādēt bez maksas, dažas var iegādāties. Jūs varat atrast CMS veidnes, dizainerus, ikonas, maketus, izstrādātas vietņu veidnes un daudz ko citu.
• Muzli - ikdienas dizaina iedvesma. Resurss dizaineriem ar neparastāko darbu piemēriem.
• Awwwards - labākie dizaineru sasniegumi. Organizēta kā kopienas balsošanas vietne. Tiek izvēlēta dienas, mēneša, gada uc vietne Liels skaits dizainu, video, izstrādes.
• Design You Trust ir dizaineru kopiena, kas dalās ar jaunākajām tendencēm, jaunumiem, portfolio, dizainu un radošiem paziņojumiem.
• Tiešām labi e-pasta ziņojumi — milzīga labi izstrādātu e-pasta ziņojumu kolekcija. Izvēlieties veidni un iegūstiet tās html, css un js kodu. Varat mainīt tekstu, attēlus utt.
• Fubiz – publikācijas no dizaina un radošuma jomas. Jūs varat atrast fotogrāfijas, dizainu, grafiku, video utt. Viss ir sadalīts kategorijās.
• Designspiration ir Pinterest stila dizainu kolekcija. Milzīgs skaits ideju un piemēru - tipogrāfija, logotipi, burti un daudz kas cits.
• Behance ir profesionāļu portfeļu kolekcija. Varat atstāt vakanci vai CV.
• Mobile-patterns – iOS un Android ekrānuzņēmumu bibliotēka. Viss ir sadalīts sadaļās. Jūs varat atrast daudzas idejas.
• One Page Love ir labāko tīmekļa lapu dizainu galerija. Jūs varat iegādāties veidnes un motīvus. Ir arī bezmaksas.
• Uispace ir resurss dizaineriem. Jūs varat bez maksas lejupielādēt psd, skici, fontus, maketus utt.

Grafiskie redaktori

• DAZ 3D - 3D modelēšana. Reģistrējieties un lejupielādējiet darbvirsmas lietojumprogrammu.
• Gimp ir bezmaksas Photoshop analogs. Ļauj pielāgot moduļu režģi, izveidot ceļvežus, strādāt ar slāņiem, pievienot efektus utt. Tas ir labs Photoshop bezmaksas aizstājējs. Tas ir paplašināms - jūs varat lejupielādēt papildu spraudņus.
• Blenderis - 3D modelēšana, animācija, renderēšana, skaņa, video. Ļauj izveidot spēles. Strauji augošs redaktors, ļoti populārs.
• Aviary ir tiešsaistes fotoattēlu rediģēšanas pakalpojums. Daudzas iespējas, tostarp sarkano acu efekts, izmēru maiņa utt.
• Pixlr ir tiešsaistes fotoattēlu redaktors un atsevišķs grafikas redaktors. Pēdējais izskatās pēc Photoshop. Saglabā diskā.
• BeFunky ir tiešsaistes fotoattēlu rediģēšanas pakalpojums. Efekti, kadri, grafika, retušēšana un daudz kas cits. Ir krievu valodas interfeiss.
• Inkscape ir pilnīgs atvērtā koda vektorgrafikas redaktors. Atbalsta SVG formāta iespējas - darbu ar formām, kontūrām, tekstu, rastra grafikas vektorizāciju utt. Papildus vektora attēlu apstrādei tas ļauj izveidot vietnes veidni un to izgriezt - ir pieejams modulārs režģis. Ļauj zīmēt fonus, banerus, vektoru logotipus utt.
• IconEdit2 ir ļoti vienkārša programma ikonu zīmēšanai. Ir filtri. Ļauj eksportēt attēlu Android un Apple ierīcēm. Varat pielāgot krāsu dziļumu, pagriezt un pielāgot ikonu. Atbalsta caurspīdīgumu, vairākus attēlus vienā ICO failā un antialiasing visos zīmēšanas rīkos.
• Falco GIF Animator ir programma kadru pa kadram animācijas un animētu ikonu izveidei. Resursā varat lejupielādēt daudzas dažādas programmas.
• Krita ir profesionāls atvērtā koda darbvirsmas redaktors. Pieejams dažādām OS.
• Boxy-SVG ir vektorgrafikas redaktors, kas līdzīgs Adobe Illustrator, Sketch un Inkscape.
• Photopos ir daudzfunkcionāla programma ar foto redaktora, grafiskā redaktora un datorgrafikas veidošanas aplikācijas funkcijām.
• 5Dfly ir bezmaksas sērijveida fotoattēlu apstrādes lietojumprogramma. Var izveidot slaidrādes, izmantojot PowerPoint. Jūs varat lejupielādēt PDF pārveidotāju atsevišķi.
• PaintStar ir bezmaksas attēlu redaktors. Saskarne ir ļoti līdzīga programmai Paint, taču tai ir vairāk iespēju. Piemēram, slāņi.
• PhotoScape ir vienkāršs fotoattēlu redaktors. Tam ir funkcijas spilgtuma un krāsu pielāgošanai, baltās krāsas balansam, fona apgaismojuma korekcijai, rāmjiem, baloniem, mozaīkas režīmam, teksta pievienošanai, attēlu zīmēšanai, apgriešanai, filtriem, sarkano acu efekta noņemšanai, krāsošanai, otai, klona zīmogam, efektu otiņai utt.

Sveiki visiem! Šodien tīmekļa dizaina sadaļas ietvaros es vēlos runāt par fontiem, kas būtu jāizmanto, veidojot tīmekļa vietni.

Parasti ne visi domā par to, kādus fontus vajadzētu izmantot vietnes satura daļā. Skaistu fontu izvēle vietnei ir vissvarīgākā dizaina izstrādes sastāvdaļa. Tā kā vietnes informācijas lasāmība ir atkarīga no šīs daļas, un, kā mēs zinām, tas ir vissvarīgākais vietnē. Šī iemesla dēļ šis jautājums ir jāuztver ļoti nopietni.

Bet vietnes dizainā varat izmantot tikai tādus fontus, kas ir pieejami nākamajiem vietnes apmeklētājiem. Tas tiek darīts, lai nodrošinātu, ka lapas tiek pareizi parādītas visiem lietotājiem ar dažādām operētājsistēmām un pārlūkprogrammām. Pretējā gadījumā, ja izmantojat nestandarta fontus, lielākā daļa apmeklētāju redzēs visu savādāk un vairumā gadījumu neizskatīgi. Šī iemesla dēļ ieteicams izmantot tālāk norādītos standarta fontus. Fontu sarakstā ir iekļauti fonti, kas ir instalēti operētājsistēmā Windows XP un jaunākās versijās.

Šajā rakstā es neņemu vērā fontus no citām operētājsistēmām. Pieredzējušam maketētājam jāzina fontu salīdzinājums dažādās operētājsistēmās, un izkārtojuma laikā viņš šo punktu ierakstīs CSS stilos.

Būtībā, izstrādājot dizaina satura daļu, tiek izmantoti divu veidu fonti:

• serif fonti
• sans serif fonti

Serif fonti- (angļu serif — serif) fonti, kuru stils sākas un beidzas ar triepieniem. Piemēram, Times New Roman.

Sans serif fonti(sasmalcināti fonti) - (angļu sans-serif - sans serif) fonti ar stingrām, taisnām līnijām bez serifiem. Piemēram, Arial.

Zemāk varat redzēt serif un sans serif fontu ekrānuzņēmumu.

Fonti tīmekļa dizainam:

• Arial
• Arial Black
• Arial Šaurs
• Grāmata Antiqua
• gadsimta gotika
• Komikss Sans MS
• Kurjers Jauns
• Franklina gotiskais medijs
• Gruzija
• Ietekme
• Lucida konsole
• Lucida Sans Unicode
• Microsoft Sans Serif
• Palatino Linotips
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Pīteņi (dažādi simboli un zīmes)
• Spārni (dažādi simboli un zīmes)

Es vēlos atzīmēt arī tādu lietu kā slīpraksta trūkums vairākos fontos, bet tie izmanto slīpumu, kas padara tekstu grūti lasāmu.

No standarta fontiem sistēmā Windows, kuriem nav slīpraksta:

• Arial Black
• Komikss Sans MS
• Franklina gotiskais medijs
• Ietekme
• Lucida konsole
• Lucida Sans Unicode
• Microsoft Sans Serif
• Sylfaen
• Tahoma

Tā kā es minēju fontus, kuriem nav slīpraksta, vēlos atzīmēt arī faktu, ka ir fonti, kas sākotnēji ir treknraksti. Šo iemeslu dēļ nav jēgas izmantot stilus, kas norāda treknrakstu, jo rezultāts nebūs tas, kas mums vajadzīgs.

Ir ļoti daudz veidu, kā atrast savai vietnei pareizo fontu. Piemēram, varat izmantot pakalpojumus ar milzīgām fontu bibliotēkām, kurām nepieciešams maksas abonements.

Ja jums ir ierobežots budžets vai eksperimentējat ar nelielu projektu, varat izmantot bezmaksas tīmekļa fontus, kas ir publiski pieejami. Jūsu vietnei piemērotā tīmekļa fonta atrašana var būt laikietilpīga, tāpēc mēs piedāvājam jums labāko no tiem.

1. Montserrata

Tipogrāfijai attīstoties, tā attālinās no senlaicīgiem pilsētu plakātiem un izkārtnēm. Šī fonta veidotāja centās saglabāt pilsētas plakātu tipogrāfijas skaistumu, ko viņa redzēja Buenosairesas ielās.

2. Abrils Resnā seja

Abril Fatface ir daļa no lielas fontu saimes, kas ir pieejama 18 stilos, kas izveidoti dažādiem mērķiem. Šim fontam ir spēcīga, eleganta klātbūtne, padarot to par lielisku risinājumu pievilcīgu virsrakstu veidošanai. Visbiežāk tas tiek kombinēts ar Lato, Open Sans un Droid Sans.

3. Playfair displejs

Ņemot vērā lielo x augstumu un mazos burtu apakšindeksus, Playfair Display ir piemērots arī virsraksta rakstīšanai, it īpaši, ja vieta ir ierobežota. Tas labi sader ar Džordžiju un bieži tiek izmantots ar Osvaldu, Lato un Arvo.

4. GT Walsheim

Mūsdienās daudzos emuāros izmantotais GT Walsheim ir ģeometrisko bez serifu pārstāvis un ir daļa no Grilli Type saimes. Jums ir jāmaksā par pilnu fontu komplektu, taču Grilli Type piedāvā bezmaksas GT Walsheim izmēģinājuma versiju.

5. Merivezers

Ja ekrāna lasāmība ir jūsu projekta prioritāte, pārbaudiet Merriweather, kas tika izveidots šim nolūkam. Turklāt šis fonts tiek pastāvīgi uzlabots.

6. Žozefīne Sansa

Josefin Sans ir iedvesmojies no antīkā zviedru dizaina, un tam ir eleganta, ģeometriska estētika.

7. Gravitas One

Gravitas One pamatā ir “UK fat face” — drosmīgs reklāmas fonts, kas parādījās rūpnieciskās revolūcijas laikā Anglijā. Šis fonts izskatās lieliski vidējā un lielā mērogā un ir piemērots virsrakstiem, nosaukumiem un cilnēm.

8. Jura

Šī fonta burti atkārto Kaya-li burta formas. Tajā ir arī kirilicas un grieķu alfabēta glifi. Tas ir pieejams ar vieglu, normālu, vidēju un treknu svaru.

9.Līga Gotika

Sākotnēji 1903. gadā kompānijai American Type Founders Company izstrādāja Moriss Fullers Bentons, League Gothic tika atrasts jauns pielietojums ar atjauninājumu un jaunu glifu pievienošanu.

10. Fjords

Fjord ir serifa fonts, kas sākotnēji radīts drukātām grāmatām un ir īpaši piemērots gara teksta ievietošanai mazās drukas formātā. To var izmantot, lai vietnē izveidotu lielu teksta saturu, jo fontam ir skaidra struktūra, pamanāmi serifi un garas, elegantas galvas un pēdas.

11. Amarants

Amaranth fontu saimei ir neslīps slīpraksta dizains ar nelielu kontrastu un pamanāmām līknēm. Visi trīs Amaranta stili labi sader ar gandrīz jebkuru citu fontu. Jūs varat spēlēt ar šo fontu - eksperimentējiet un izvēlieties labāko.

12. Poli

Šis vidēja kontrasta fonts sākotnēji tika izveidots vietējai Wayuunaiki valodai, kurai nepieciešami plaši glifi. Tam ir mazi kāti un liels x augstums, kas padara to īpaši noderīgu mazos izmēros.

13. Gentium Basic

Šis fonts tika izveidots kā daudzvalodu fonts, ieskaitot latīņu un grieķu burtus, kā arī kirilicas un uzlaboto atbalstu Gentium Plus versijā. Gentium Basic un Gentium Book Basic ir pieejamas bezmaksas tīmekļa versijā, taču tās attiecas tikai uz latīņu alfabētu.

14. Atvērt Sans

Open Sans ir humānisma groteskas pārstāvis. Šis fonts ir labi salasāms un pielāgojas gan tīmekļa, gan mobilajām saskarnēm. Tas ir nešķībs fonts ar vienkāršu burtu stilu, kam raksturīgs neitrāls, bet pietiekami patīkams izskats, lai to varētu izmantot visdažādākajiem mērķiem.

15. Virsgrāmata Regulāra

Tas ir daudzfunkcionāls fonts ar lielu x augstumu, spēcīgu krāsu kontrastu un labi definētiem serifiem, kas veicina teksta lasāmību. Šis fonts izskatās labi gan drukātā veidā, gan zemas izšķirtspējas ekrānā.

16. Signika

Šis bezmaksas tīmekļa fonts pārstāv sans serif. Zems kontrasts un augstais x-augstums ļauj Signikai labi parādīties ekrānā. Plašā ikonu izvēle ietver simbolus, piktogrammas un bultiņas.

17. Josefin Slab

Izveidots saskaņā ar 30. gadiem raksturīgā ģeometriskā fonta kanoniem, pievienojot skandināvu iezīmes, Josefin Slab ir ar plātņu fonta īpašībām un atgādina rakstāmmašīnas fontu. Interesanti, ka tā x-augstums ir puse no lielā burta augstuma.

18. Forums

Kā norāda nosaukums, šis ir romiešu fonts, kas ir piemērots burtu bloķēšanas virsrakstiem, taču ir piemērots arī teksta attēlošanai. Šī fonta elegantās proporcijas atgādina klasisko arhitektūru ar pusloku arkām, horizontālām karnīzēm un vertikālām kolonnām.

Tikal Sans nosaukta pēc vienas no slavenākajām maiju pilsētām, un tai ir glifu iezīmes, kas tika izmantotas Dienvidamerikas civilizācijas rakstīšanā. Tā veidotājs izvēlējās lielu x-height, kas piešķir fontam modernu izskatu un labvēlīgi ietekmē tā salasāmību, turklāt lielā stilu izvēle ļauj to izmantot dažādiem mērķiem.

20. Arvo

Šis ģeometriskais plāksnes fonts ir piemērots gan drukāšanai, gan tīmeklim, un tas ir pieejams romiešu, slīpraksta, romiešu treknrakstā un treknrakstā slīprakstā. Arvo zemais kontrasts uzlabo tā lasāmību ekrānā.

21. Bevans

Bevan tika izveidots, pamatojoties uz tradicionālo 1930. gadu plātņu fontu. Burti tika digitalizēti, tiem tika piešķirta jauna forma un optimizēti tīmekļa versijai. Šis ir viens no retajiem īpaši treknajiem fontiem, kas ir piemērots vietnēm.

22. Vecais standarta TT

Old Standard TT pamatā bija Modern serif fonts, kas bija populārs 19. gadsimta beigās un 20. gadsimta sākumā un pēc tam ilgu laiku tika aizmirsts. Šis fonts ir piemērots stila pievienošanai noteikta veida saturam, piemēram, zinātniskiem pētījumiem vai tekstiem grieķu vai kirilicā.

23. Kreons

Šis serif fonts ir ideāli piemērots ziņu vietnēm un emuāriem, un tam ir arī tādas pašas iezīmes kā plātņu fontam, taču tā līdzsvars un zemais kontrasts padara Kreon ievērojami personiskāku.

24. Droid Sans

Droid Sans ir optimizēts maksimālai lasāmībai pat mazās saskarnēs, piemēram, izvēlnēs mobilo tālruņu ekrānos. Šis ir neitrāls, neslīps fonts ar vienkāršām, atvērtām burtu formām.

25. itāļu valoda

Šī fonta veidotāju iedvesmojusi klasiskā itāļu kaligrāfija, tāpēc fonts ļoti noderēs projektos, kur jāpievieno elegance. Italiana ir piemērota arī ziņu virsrakstu rakstīšanai gan drukātā, gan elektroniskā formātā.

26. Vollkorns

Šis detalizētais, ar funkcijām bagātais serifa fonts ir ļoti populārs. Tā skaidrība un stabilitāte rada pārliecību un enerģiju, padarot fontu vienlīdz efektīvu gan lielākos izmēros virsrakstos un virsrakstos, gan lielos teksta daudzumos mazākos formātos.

27. Aktieris

Šim fontam ir īpaši liels x-height, kas prasa diezgan daudz vietas. Dažiem varoņiem aktierim ir arī vecmodīgs stils, piemēram, cipariem 6 un 9.

Humānistiskais burtveidols Garamond, kura saknes meklējams 16. gadsimtā, ir kļuvis par īstu tipogrāfijas ikonu, kas bieži kalpo par pamatu modernu burtveidolu, tostarp EB Garamond, izveidei.

31. Ubuntu

Ubuntu Grotesque tika izveidots, lai personalizētu tīmekļa tekstu gan galddatoros, gan mobilajās ierīcēs. Lietotāji tiek aicināti eksperimentēt ar šo fontu, modificēt un uzlabot to pēc saviem ieskatiem.

32. Rosario

Rosario ir klasisks humānistisks bez serifa, kas ir lieliski piemērots teksta rindkopu stilizēšanai.

33. Roboto plāksne

Roboto Slab ir viens no Roboto saimes fontiem. Bloku versija īpaši piesaista uzmanību ar savām ģeometriskajām formām un atvērtajām līknēm. Tas ir vienlīdz piemērots sīkrīku ekrāniem un drukātām tekstu versijām.

34. Osvalds

Fonts ir klasiskā Alternate Gothic bez serifa pārstrādāta versija. Osvalds nesen tika atjaunināts, piedāvājot dažādus svarus, paplašinātu rakstzīmju kopu un labāku atzarojumu.

35. Strupceļš

Stalemate ir gluds ar roku rakstīts fonts ar zināmu senatnīgu nokrāsu. Tas ir piemērots akcentu veidošanai un vietnes personalizēšanai.

36. Karmīnsarkans teksts

Šo rūpīgi izstrādāto klasisko proporcionālo fontu var izmantot gan liela teksta apjoma attēlošanai, gan virsrakstu rakstīšanai.