Kā izveidot skaistu fontu html: izmēri, krāsas, html fontu tagi. Pielāgots fonts, izmantojot CSS HTML savu fontu

Jauna fonta pievienošana vietnei nav vieglākais uzdevums. Kur izvēlēties, lejupielādēt un kā pievienot fontu vietnei CSS? Šajā rakstā mēs parādīsim vienu no ērtākais veidi, kā instalēt un savienot fontu ar vietni.

Kā CSS vietnē iekļaut fontu

Piemēram, mums ir fonts Raleway.ttf un mēs vēlamies to izmantot visās galvenēs ( h1) mūsu tīmekļa vietnē. Lai to izdarītu, veiciet šādas darbības:

h1 ( fontu ģimene: "RalewayRegular"; }

Tagad visi 1. līmeņa virsraksti vietnē tiek parādīti mums vajadzīgajā fontā.

Ja vēlaties savienot vairākus fontus (vai to stilus), vienkārši pievienojiet tos zem iepriekšējā:

@font-face { fontu ģimene: "RalewayRegular"; src: url("../fonts/RalewayRegular.ttf") formāts ( "patiesais tips"); fonta stils: normāls; fonta svars: normāls; } @font-face{ fontu ģimene: "RalewayBold"; src: url("../fonts/RalewayBold.ttf") formāts ( "patiesais tips"); fonta stils: normāls; fonta svars: normāls; }

Iespējams, esat ievērojuši, ka ir dažādi fontu formāti - .ttf, .woff, .eot, .svg utt. Ir arī formāts mūsdienu pārlūkprogrammām. woff2, bet par to mēs runāsim kādā no nākamajiem rakstiem. Parasti katrs fonts tiek iekļauts 3 formātos vienlaikus. Tas tiek darīts, lai fonts tiktu pareizi parādīts visās pārlūkprogrammās, tostarp. un vecie. Tas izskatās šādi:

@font-face { fontu ģimene: "RalewayRegular"; src: url( "../fonts/RalewayRegular/RalewayRegular.eot") ; src: url( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") formāts ("embedded-opentype"), url( "../fonts/RalewayRegular/RalewayRegular.woff") formāts ( "woff"), url( "../fonts/RalewayRegular/RalewayRegular.ttf") formāts ( "patiesais tips"); fonta stils: normāls; fonta svars: normāls; }

Šeit seko Pievērsiet uzmanību savienojuma secībai - tas ir svarīgi!

Mēs neiedziļināsimies detaļās, vienkārši atcerieties šī dizaina izskatu.

Ja jums ir fonts tikai vienā formātā, izmantojiet dažādus fontu pārveidotājus. Šeit ir viens no tiem.


Kā savienot fontu, izmantojot dažādus pakalpojumus

Varat arī izmantot fonts4web pakalpojumu, lai savienotu fontus:


Vienkāršākais veids, kā savienot fontus


Kā savienot fontu ar Moguta CMS veidni


Kā Moguta CMS veidnei pievienot saiti ar Google fontiem


Tagad jūs zināt, kā vietnei pievienot fontu, izmantojot CSS un citus. Mēs ar prieku atbildēsim uz visiem jūsu jautājumiem

Mūsdienās arvien biežāk var atrast vietnes, kurās tiek izmantoti nestandarta fonti. Tas atbilst mūsdienu tīmekļa dizainam, kurā radošums ir svarīgāks par lasāmību. Protams, šāda kombinācija nenotiek bieži, bet gadās. Angļu resursos nestandarta fonti ir diezgan populāri. Šeit, piemēram, skatieties oriģinālā, tas ir, autora dzimtajā valodā. Un mēs redzēsim, kā unikālie fonti tiek izmantoti gandrīz katrā trešajā tēmā.

No autora: “Pirms rakstīju šo rakstu, es pārlūkoju diezgan daudz informācijas par tēmu “Fonti”. Un es ļoti skaidri atcerējos vienu punktu: daudzi cilvēki negatīvi runā par nestandarta fontu savienošanu. Precīzāk, viņi to neiesaka, viņi saka, ka tas ir nepareizi, tā ir liela slodze un tamlīdzīgi.

Faktiski šāds paziņojums daudzos gadījumos tiek uzskatīts par sava viedokļa uzspiešanu vai pat kāda cita viedokļa paušanu no sevis. Ir vērts atzīmēt, ka absolūti jebkurš papildu savienojums rada slodzi vietnei, ievērojot šo argumentu, jūs varat droši nojaukt pusi vietnes. Ja ir pārliecinošāki argumenti par labu atteikšanās no fontiem, tad jā, lūdzu... pretējā gadījumā... ir jāeksperimentē.”

Ko nozīmē pielāgots fonts?

Šis ir fonts, kas pēc noklusējuma nav pieejams programmatūrā (Windows, Linux utt.). Līdz ar to, ja lietotāja programmatūrā nav atbilstoša fonta, viņš automātiski izmantos standarta fontu no sistēmas. Tas pārkāpj autora sākotnējo ideju par dizaina vēlamā rakstura nodošanu.

Fontu savienošana ar vietni

Fonta savienojums notiek, izmantojot @font-face noteikumu CSS kaskādes tabulā. Tas ietver: burtveidolu, relatīvo vai tiešo ceļu un fonta klātbūtnes pārbaudi lietotāja programmatūrā. Visa šī struktūra izskatās šādi:

@font-face ( font-family: namefont;/*typeface*/ src: local("namefont"),/*check*/ url: (fonts/namefont.ttf);/*path*/ )

Paskaidrojums. Rekvizīts font-family norāda fontu saimi un src: local pārbauda, ​​vai lasītājā ir instalēts fonts. Bet iespēja, ka fonts tiks instalēts, notiek reizi miljonā. Tāpēc rindiņa “pārbaude” nav tik obligāta, taču noteikti ir jābūt pēdējam url “ceļam” (jo tas ir ceļš uz pašu fontu, kas tiks ielādēts tieši vietnē).

Vairāku pārlūkprogrammu fontu saderība

Jāpiemin pārlūkprogrammas atbalsts, jo var rasties neatbilstības. Visas populārās pārlūkprogrammas, jaunākās versijas, lieliski darbojas, savienojot fontus formātā ttf. Un runājot par jaunākām versijām, jo ​​īpaši IE, kā arī Apple ierīcēm, var rasties grūtības. Šo problēmu atrisina speciālie pakalpojumi, kas ļauj ģenerēt fonta formātu katrai pārlūkprogrammai atsevišķi.

Manuprāt, tā ir absolūta nepieciešamība. Ļaujiet man paskaidrot: IE zem versijas 10 jau prasa papildu darbības. Bet tā izmantošanas procents ir ļoti mazs. Kas attiecas uz Apple mobilajām ierīcēm, tas viss ir saistīts ar minimālismu. noteikti vajadzētu būt ātrākam un vienkāršākam nekā parasti.

Formāts Explorer Chrome Firefox Safari Opera iOS Android
TTF 9.0+ 4.0+ 3.5+ 3.1+ 10.0+ X 2.2+
OTF 9.0+ 4.0+ 3.5+ 3.1+ 10.0+ X 2.2+
EOT 6.0+ X X X X X X
WOFF 9.0+ 5.0+ 3.6+ 5.1+ 11.1+ 5 X
WOFF2 X 36.0+ 35.0+ X 26.0+ X X
SVG X 4.0+ X 3.2+ 9.0+ 3.1+ X

Fontu formāti

Fontiem, tāpat kā daudziem citiem failiem, ir dažādi paplašinājumi (formāti). Īsā pārskatā mēs apskatīsim, kuri no tiem…

TTF (TrueType fonti)– visizplatītākais fontu formāts operētājsistēmās. Saskaņā ar vienu avotu to 80. gadu beigās izstrādāja Apple, bet citā kopā ar Microsoft. Visbiežāk šis fonta formāts tiek izmantots, lai izveidotu savienojumu ar tīmekļa lapu. Pamatojoties uz visu populāro pārlūkprogrammu atbalstu jaunākajām versijām.

OTF (OpenType Fonts)– tā priekšgājēja (TrueType) modifikācija ar uzlabotām iespējām. Vairāk rakstzīmju un mazāks svars. To 1996. gadā oficiāli ieviesa Adobe, un tā tika izstrādāta kopā ar Microsoft.

WOFF (tīmekļa atvērtā fonta formāts)– izveidots, pamatojoties uz pirmajiem diviem fontiem ar dažām izmaiņām.

WOFF 2.0 (tīmeklī atvērtā fonta formāts)– nelielas kompresijas izmaiņas.

EOT (iegultais OpenType)– Microsoft izveidoja 2007. gadā tikai pārlūkprogrammām Internet Explorer.

SVG fonti- iOS Safari atbalsts.

Fontu konvertēšanas pakalpojums

Bet tomēr gadījumi ir atšķirīgi, un, ja jums ir jāatbalsta fonts visās pārlūkprogrammās un ierīcēs, jums būs jāizmanto pakalpojumi.

1. darbība.

2. darbība.

Skripta kreisajā pusē atlasiet kirilicas alfabētu.

3. darbība.

Izlemiet par fonta izvēli un noklikšķiniet uz ikonas "ātrā lietošana".

4. darbība.

Sākumlapā ir informācija, kas sadalīta posmos:

1. Izvēlieties fonta stilu (parasts, treknraksts utt.);
2. Izvēlieties atbalstu (latīņu, kirilicas utt.);
3. Savienojuma metodes (sīkāka informācija zemāk);
4. Fontu integrācija.

5. darbība.

Pēdējā posmā mēs apskatīsim savienojuma metodes. Patiesībā viss ir ļoti vienkārši. Katra no trim metodēm ir atsevišķs kods, kas ir savienots savā veidā atkarībā no izvēles.

1. Standarta savienojums, izmantojot tagu, parasti tiek ierakstīts starp tagiem (WordPress fails: header.php).

2. Importēšana kaskādes tabulā, izmantojot @import kārtulu (WordPress fails: style.css).

3. Savienojums caur JavaScript atsevišķā failā vai arī starp tagiem .

Pēc savienojuma izveides stilos būs jānorāda tikai fonta burtveidols.

Fontu saime: "Comfortaa", kursīvs;

Tas ir viss! Es ceru, ka šajā materiālā atradāt kaut ko noderīgu sev. Ja jums ir kādi jautājumi, lūdzu, uzdodiet tos komentāros, nekautrējieties).

Lielākā daļa teksta elementu pēc noklusējuma ir Times New Roman. CSS ir iespēja instalēt citus fontus. Varat arī iekļaut CSS fontu, kas sākotnēji netika nodrošināts pārlūkprogrammās. Šajā tēmā mēs apskatīsim, kā to izdarīt.

Fontu saimes

Fonti ir sadalīti saimēs. Pastāv šādas fontu saimes:

serif - serif

sans-serif — sans serif

monospace - monospace

cursive - cursive

fantāzija - dekoratīva

Droši fonti

Ir diezgan daudz fontu. Grūtības to lietošanā ir tādas, ka katrai operētājsistēmai ir savs fontu komplekts. Turklāt dažādas pārlūkprogrammas var nerādīt visus fontus. Ja teksta elementam ir iestatīts fonts, kas nav pieejams lietotāja datora operētājsistēmā, teksts tiks parādīts citā fontā. Fonti, kas tiek rādīti visos datoros un visās pārlūkprogrammās, tiek saukti par drošiem fontiem. Tiek uzskatīts, ka absolūti drošu nav. Tomēr joprojām ir vairāki fonti, kas ir lielākajai daļai lietotāju. Tālāk ir norādīti droši fonti un to saimes.

Times New Roman, serif

Ariāls, bez serifa

Verdana, sans-serif

Tahoma, bez serifa

Ietekme, bez serifa

Trebuchet MS, sans-serif

Kurjers Jauns, monospace

Comic Sans MS, kursīvs

Citus fontus varat atrast, ja ierakstāt jebkurā meklētājprogrammā: standarta fonti.

Fonta iestatīšana

Lai mainītu vai iekļautu fontu CSS, izmantojiet rekvizītu fontu saime. Šī īpašuma vērtība ir fonta nosaukums. Piemēram, izveidosim rindkopu un iestatīsim tai fontu:

Stils:

Fontu saimes rekvizīts ļauj norādīt vairākus fontus, atdalot tos ar komatiem. Varat arī norādīt fontu saimi. Šajā gadījumā tiks izmantots vispirms norādītais fonts. Ja tas tā nav, tiek izmantots nākamais fonts utt. Būtībā tas ir tas, ko viņi dara īstās lapās. Tas tiek darīts, lai nodrošinātu, ka lapa tiks parādīta, kā paredzēts.

15
16
17
18

div (fontu saime: Tahoma, Verdana, sans-serif;)

Kā iekļaut pielāgotu fontu CSS

Papildus lietotāja operētājsistēmā esošajiem fontiem var izmantot citus fontus. Tos var atrast internetā vai izveidot pats. Ir daudz pielāgotu fontu. Lai tos atrastu, meklētājprogrammā ir jāraksta fonti. Fonta fails ir jālejupielādē un jāpievieno lapai. Izvēloties, jāņem vērā, ka daži fonti ir apmaksāti. Lapā, no kuras lejupielādējat fontu, ir jābūt informācijai par to.

Pielāgotu fontu izmantošanas grūtības rada tas, ka katra pārlūkprogramma atbalsta atšķirīgu formātu kopu. Tāpēc, izmantojot nestandarta fontu, ir jāpārbauda, ​​kā lapa tiek parādīta dažādās pārlūkprogrammās. Ir daudz fontu formātu. Universālākais ir woff formāts. Tam vajadzētu darboties lielākajā daļā mūsdienu pārlūkprogrammu.

Lai iekļautu nestandarta CSS fontu, izmantojiet @font-face noteikumu. Tam ir jāsatur divi rekvizīti: rekvizīts font-family norāda fonta nosaukumu, ar kuru šis fonts tiks izmantots vietnē. Jūs pats izvēlaties nosaukumu. Un rekvizīts src norāda ceļu uz nestandarta fonta failu. Pēc tam fontu var izmantot jebkuram atlasītājam. Fontu saimes rekvizītā jānorāda fontam izvēlētais nosaukums.

Piemēram, es izmantoju fonta failu unineue.woff. Tā atrodas tajā pašā mapē, kur lapa. Es nosaukšu fontu Nfont.

Daudziem dizaineriem, kas veido nopietnus un interesantus izkārtojumus, ir pieejams ļoti daudz unikālu un skaistu fontu. Pateicoties šādiem fontiem, dizains iegūst savu garšu un ekskluzivitāti. Taču 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, dizaineram ir jānodrošina jūs ar visiem fontiem, kurus viņš izmanto savā izkārtojumā. Jo, izkārtojot izkārtojumu, šie fonti būs jāinstalē datorā. Bet jūsu vietnes lietotājs nelejupielādēs visus fontus 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, ir arī iespējas izmantot Cufon vai ielādēt fontus no Google Webfonts vai Fontsquirrel, taču Google Webfonts un Fontsquirrel fonts var nebūt vajadzīgs, tāpēc apsvērsim labāko variantu - unikālu fontu savienošanu, izmantojot @font-face.

Vienkāršākais veids, kā savienot 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 fontos. mapi, svarīgi, lai nosaukumā fonta failā nebūtu atstarpes, labāk tās aizstāt ar domuzīmi.

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

Katra pārlūkprogramma atbalsta savus fontu formātus:
TrueType 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

Tāpēc no viena no jūsu fontiem .ttf formātā jums būs jāizveido vēl vairāki tādi paši fonti tikai citā formātā. Šeit var palīdzēt fontu ģenerators vietnē fontsquirrel.com. Šajā lapā lejupielādējiet 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 vajadzīgo arhīvu ar visiem saviem fontu formātiem.

No arhīva lejupielādējiet visus savu fontu formātus, teorētiski tie ir 4 faili ar paplašinājumiem .eot, .svg, .ttf un .woff, kopējiet šos failus uz savas vietnes fontu mapi, arhīvā būs arī fails stylesheet.css - tajā ir Visi fontu savienošanas noteikumi jau būs pierakstīti, varat tos droši iekopē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 parametrus, fonti tiek parādīti jebkurā pārlūkprogrammā, tostarp ikviena iecienītākajā IE-7-8-9.

Ja izmantojat nestandarta fontus kirilicas alfabētam, t.i., krievu rakstzīmēm, un fonts vietnē netiek pareizi parādīts, iespējams, palīdzēs fonta ģenerēšana ar papildu iestatījumiem, lejupielādējiet lapu http://www.fontsquirrel. com/tools/webfont-generator savu fontu un atlasiet “Ekspertu” iestatījumus. Iestatījumu tur ir ļoti daudz, es visu nezinu, bet izlasiet uzmanīgi un izvēlieties vajadzīgos, un lai atbalstītu kirilicas alfabētu, atlasiet blokā Subsetting: sadaļā Custom Subsetting... un atzīmējiet izvēles rūtiņu kirilica, kā arī pārbaudiet nepieciešamās valodas un formātus.

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

Nākamajā projektā es atkal redzu virsrakstus un izvēlnes nestandarta fontā. Padarīt to ar attēliem? Sūc: neveikli, neelastīgi, lēni. Zibspuldze? Es viņu nevaru ciest. Javascript? Pagaidām, protams, labākais risinājums, taču tas joprojām ir kruķis, kas mums atgādina par pārlūkprogrammu ierobežojumiem. Ir pienācis laiks iedziļināties standartos: ko tie piedāvā un kur tas jau darbojas.

Piezīme

Turpretim pielāgots fonts ir fonts, kura, visticamāk, trūkst lielākajai daļai vietnes apmeklētāju.

Uzdevums

Ieviesiet pielāgotu fontu, neizmantojot attēlus, JavaScript un Flash. Mēs izmantojam tikai jaunākos sasniegumus .

Risinājums

Bet IE gadījumā tas nav tik vienkārši. Lai gan tas bija pirmais, kas atbalstīja trešo pušu fontu ieviešanu (kopš 1997. gada ar Internet Explorer 4. versijas izlaišanu!!!), tam nepieciešams īpašs fonta formāts - EOT (Embedded OpenType). EOT formāts vienlaikus atrisina divas problēmas:

  • saspiež fonta failu, padarot tā svaru vairākas reizes mazāku (spriežot pēc kolēģu pārbaudēm, šī metode saspiež labāk nekā RAR, ZIP un gzip metodes)
  • šifrē failu: informācija tiek ierakstīta fonta failā, kur tā ir jāizmanto. Šis fonts nedarbosies ārpus šīs adreses.

Rezultātā fonta savienošana stilos izskatīsies šādi:

/* tikai pārlūkprogrammai Internet Explorer */ @font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.eot); ) /* tālāk visām pārējām pārlūkprogrammām */ @ font-face ( fontu saime: Scriptorama; src: local("Scriptorama"), url(ceļš uz/Scriptorama.ttf); ) [...] h1 ( fontu saime: Scriptorama, arial; fonta svars: normāli ;)

Uzlaušanas vietā varat izmantot .

atjaunināts 23.08.11 Pilnīgāka fontu iegulšanas sintakse, kurā ņemtas vērā dažas iespējamās IE kļūdas un lielāks pārlūkprogrammas atbalsts:

@font-face ( fontu saime: "JournalRegular"; src: url("journal-webfont.eot"); src: url("journal-webfont.eot?#iefix") formāts ("embedded-opentype"), url("journal-webfont.woff") formāts("woff"), url("journal-webfont.ttf") formāts("truetype"), url("journal-webfont.svg#JournalRegular") formāts ("svg" "); fonta svars: normāls; fonta stils: normāls; )

Piezīme

atjauninājums 10.11.10 IE lokālais var nedarboties. Turklāt tā dēļ fonts var nebūt savienots. Savos projektos mēs pievēršam uzmanību šim punktam: ja tas nedarbojas, mēs to vienkārši noņemam vietējam IE.

Priekšrocības:

  • elastība - vietnes īpašnieks var mainīt jebkuru tekstu, kā viņš vēlas;
  • ātrs ielādes ātrums - minimālais ārējo failu skaits ar jebkādu teksta daudzumu nestandarta fontā;
  • vietnes maksimālais ātrums - nulle papildu elementu DOM struktūrā, nulles skripti un flash objekti, kas palēnina vietni;
  • teksts uzvedas kā teksts (galu galā tas paliek teksts), t.i. izceļas, reaģē uz izmaiņām krāsā, drosme, stils utt., ideāls SEO;
  • Diezgan vienkārša ieviešana, pat ņemot vērā fontu optimizāciju.

Trūkumi:

Fontu saspiešana un konvertēšana

Ja fontu izstrādātāji centās izpatikt visiem, tad fonts, visticamāk, saturēs daudz, daudz rakstzīmju un attiecīgi svērs daudz, daudz. Tātad Arial Unicode MS fonts satur 51 tūkstoti rakstzīmju un sver vairāk nekā 23 megabaitus! Laiks padomāt, vai vietne izmantos udmurtu vai somugru valodas? Un arī dažādi papildus simboli, pieturzīmes un cipari? Jāņem vērā arī tas, ka katram fontam ir noteikts stilu skaits: parastais, slīpraksts, treknraksts, daļēji treknraksts. Fontā var būt līdz 9 treknraksta veidiem (atcerieties pieņemamās vērtības).

Ko darīt

Mēs izslēdzam no fonta visu, kas nav nepieciešams uzdevuma sasniegšanai. Piemēram, ja fonts tiek izmantots tikai izvēlnei, tad pieturzīmes, dažādi papildu simboli un cipari būs lieki.

Kā to izdarīt

Šajā jautājumā var palīdzēt:

Tiešsaistes pakalpojums @font-face Generator

Kas var:

  • divi darbības režīmi: Easy - tiem, kas nevēlas tajā iedziļināties, un Expert - maksimālai optimizācijai
  • dažādi rezultātu formāti, un tas ir vienuviet! Tie. nav nepieciešams vispirms saspiest True Type visām pārlūkprogrammām un pēc tam atsevišķi konvertēt uz EOT IE
  • dažādas iespējas rezultātu iegūšanai. Līdz pat fonta aizsardzībai no vietējās lietošanas un faila Cufon!
  • precīza rakstzīmju atlase saspiestam fontam. Varat norādīt valodu un papildu rakstzīmju kopu vai norādīt izmantoto rakstzīmju diapazonu, vai vienkārši uzskaitīt vajadzīgās rakstzīmes vai izmantot visu metožu simbiozi
  • tiem, kas ir vāji CSS, veidosies pat stila noteikumi

Eksperimentam es saspiedu 145 Kb fontu ar testa uzdevumu “Izmantot izvēlnei”. Es atstāju tikai mazus krievu burtus. Pēdējais fonta lielums bija 8Kb. Apbrīnojami!

Trūkumi:

  • EOT tiek ģenerēts bez piesaistes konkrētam domēnam (nopietniem projektiem EOT joprojām būs jāveic atsevišķi)
  • ne visus licencētos fontus var apstrādāt (tas ir relatīvs trūkums)

Iespaids- fantastiski, izcili, super-duper, pārsteidzoši!!! Es saņemšu sev PayPal, lai veiktu ziedojumu.

Tīmekļa fontu optimizētājs

Tiešsaistes pakalpojums, kas ļauj atstāt tikai nepieciešamās rakstzīmes. Darbojas.

Plusi: vienkāršs un skaidrs. Rezultāts ir True Type saspiests fonts, EOT fonts IE un CSS kods savienojumam.

Negatīvā puse: pakalpojums ir pieejams tikai stingri noteiktam fontu sarakstam, kas ir viņu vietnē.

AUDI

Programmatūra no Microsoft. Palīdz pārvērst fontu uz EOT. Plus padara neiespējamu fonta izmantošanu ārpus norādītās vietnes. Lejupielādēt un sīkāk iepazīties var skriptam veltītajā lapā.

TTF2EOT

No nosaukuma ir skaidrs, ka tas pārvērš fontu no TTF uz EOT. Tas darbojas lokāli, izmantojot komandrindu, kas pats par sevi nav ērti. Jūs varat lejupielādēt skriptu un lasīt vairāk par to projekta vietnē.

Tiešsaistes fontu pārveidotājs

Viegli lietojams, ļauj konvertēt licencētos fontus. Pieejams.

Trūkumi: nepieciešama reģistrācija.

Kā ar fontu aizsardzību?

Ja fonts ir kvalitatīvs, to izstrādā augsti profesionāļi, bieži vien profesionāļu komanda, bieži vien ilgāk par vienu mēnesi. Šāds fonts var maksāt ne mazāk kā “Žiguli” no montāžas līnijas. Fontu izstrādātāji sāka tos reģistrēt kā preču zīmes, nodrošinot autortiesību īpašnieka tiesības uz fontu rūpnieciskā īpašuma aizsardzības līmenī.

Tie. Lai izmantotu fontu tīmeklī, vietnes īpašniekam ir jāiegādājas fonts ar tiesībām to izmantot tīmeklī. Bet iegāde ir puse no problēmas. Arī fonts ir jāaizsargā no nelikumīgas kopēšanas. Šādu problēmu gandrīz nav, ja vietnē licencētais fonts ir ieviests ar attēliem vai izmantojot Javascript. Bet, ja to ieviešat, izmantojot @font-face, fonts atklāti atrodas serverī, kuru var lejupielādēt jebkurš lietotājs. Un tas jau draud ar tiesas prāvām.

Piezīme

Miljoniem mazo vietņu nelegāla fontu izmantošana var un pāries bez sekām, taču foršiem, komerciāliem, īpaši starptautiskiem projektiem būtu nopietni jādomā par licenču iegādi.

Kā aizsargāt fontu?

IE šī problēma tika atrisināta nekavējoties - EOT formāts šifrē failu. Rezultātā mums ir fonts, kas darbosies tikai šajā vietnē.