Sa tutorial na ito ng artikulo sasabihin ko sa iyo kung paano lumikha ng iyong sariling font para sa isang website gamit ang mga icon na ikaw mismo ang lumikha. Ang kailangan lang natin para dito ay isang programa para sa paglikha ng mga vector graphics (Adobe Illustrator o Inkspcape) at pag-access sa Internet Kaya, magsimula na tayo! Maaari mong i-download ang lahat ng mga imahe, icon at css font na ginamit para dito sa dulo ng artikulo.

Para sa tutorial na ito gagawa kami ng isang bagay na simple. Para sa unang icon, gumuhit kami ng isang regular na bituin. Para sa pangalawang icon - isang agila na may letrang W sa loob. Ito ay medyo madali upang gumuhit at maaari kang lumikha ng anumang mga hugis at kumbinasyon. Gumamit ako ng ilustrador para sa mga layuning ito.

Pagkatapos mong makumpleto ang malikhaing bahagi, dapat na i-save ang iyong nilikha sa SVG na format. I-click ang “Save As” at piliin ang uri ng file bilang SVG. Ngayon ay maaari kang magpatuloy nang direkta sa paglikha ng font.

Para sa mga layuning ito ginagamit namin ang sikat at libreng serbisyo IcoMoon.

Ang unang bagay na dapat gawin ay lumikha bagong proyekto, kaya mag-click sa menu sa kaliwang sulok sa itaas at i-click ang “Bagong Proyekto”. Susunod, nilo-load namin ang aming mga yari na svg file pagkatapos mag-click sa button na "Import Icons". Pagkatapos makumpleto ang mga hakbang na ito, dapat mong makita ang isang imaheng tulad nito sa iyong monitor:

Ngayon ay mayroon na kaming kakayahang baguhin ang code para sa bawat icon (sa aming kaso ito ay magiging e600 at e601), ang pangalan ng aming font, ang CSS prefix, at iba pa. Ginagawa ang lahat ng ito sa "Mga Kagustuhan". Gayundin, makikita natin ang pagkilos ng font sa pamamagitan ng pag-click sa link na "Paganahin ang Mabilisang Paggamit" - na magbibigay-daan sa amin na makakuha ng pansamantalang link sa aming font, pati na rin ang opsyon na tingnan ang code sa CodePen.

Pagkatapos mong i-configure ang lahat, i-click ang button na “I-download” sa ibaba ng page at i-download ang archive. Sa archive na ito makikita mo ang iyong font sa ttf, eot, svg at woff na mga format + isang demo page na may font.

Paggamit ng mga icon sa site

Ngayon, ang kailangan lang namin ay isama ang CSS font gamit ang @font-face, at tukuyin ang iba pang mga parameter (lahat sila ay nakasulat sa css file sa archive na iyong na-download.

@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; magsalita: none; font-style: normal; font-variant: normal; -smoothing: grayscale; ) .wdm-star:before ( content: "\e600"; ) .wdm-eagle:before ( content: "\e601"; )

Ngayon ay magagamit na natin ang ating font sa HTML code tulad nito:

Pagtukoy sa pangalan ng klase para sa tag makuha namin ang aming icon.

11/27/14 88.7K

Sa html, ang laki ng font ay gumaganap ng isang mahalagang papel. Pinapayagan ka nitong maakit ang atensyon ng gumagamit mahalagang impormasyon, nai-post sa pahina ng site. Bagaman hindi lamang ang laki ng mga titik ang mahalaga, kundi pati na rin ang kanilang kulay, kapal at maging ang pamilya.

Mga tag at katangian kapag nagtatrabaho sa mga html na font

Ang wika ng hypertext ay may malawak na hanay ng mga tool para sa pagtatrabaho sa mga font. Pagkatapos ng lahat, ang pag-format ng teksto ay ang pangunahing gawain ng html.

Dahilan ng paglikha HTML na wika Nagkaroon ng problema sa mga browser na nagpapakita ng mga panuntunan sa pag-format ng teksto.


Tingnan natin ang mga tag na ginagamit upang gumana sa mga font sa HTML at ang kanilang mga katangian. Ang pangunahing isa ay ang tag . Gamit ang mga halaga ng mga katangian nito, maaari kang magtakda ng ilang mga katangian ng font:
  • kulay - nagtatakda ng kulay ng teksto;
  • laki – laki ng font sa mga karaniwang unit.

Ang mga positibong halaga ng katangian mula 1 hanggang 7 ay sinusuportahan.

  • mukha – ginagamit upang itakda ang pamilya ng font ng teksto na gagamitin sa loob ng tag . Maraming mga halaga ang sinusuportahan, na pinaghihiwalay ng mga kuwit.

Ang text lang na matatagpuan sa pagitan ng mga bahagi ng nakapares na tag ng font ang naka-format. Ang natitirang bahagi ng teksto ay ipinapakita karaniwang font, na naka-install bilang default.


Gayundin sa html mayroong isang bilang ng mga ipinares na tag na tumutukoy lamang sa isang panuntunan sa pag-format. Kabilang dito ang:
  • - nagtatakda ng bold font sa html. Tag katulad ng pagkilos sa nauna;
  • — ang laki ay mas malaki kaysa sa default;
  • — mas maliit na laki ng font;
  • — italic text (italics). Katulad na tag ;
  • — tekstong may salungguhit;
  • - na-cross out;
  • — ipakita lamang ang teksto sa maliit na titik;
  • - sa upper case.

Plain text

Naka-bold na text

Naka-bold na text

Higit sa karaniwan

Mas mababa kaysa karaniwan

Italiko

Italiko

May salungguhit

Naka-cross out

Mga kakayahan sa katangian ng istilo

Bilang karagdagan sa mga inilarawang tag, mayroong ilang higit pang mga paraan upang baguhin ang font sa html. Ang isa sa mga ito ay ang paggamit ng generic style attribute. Gamit ang mga halaga ng mga katangian nito, maaari mong itakda ang estilo ng pagpapakita ng font:

1) font-family – itinatakda ng property ang font family. Posibleng maglista ng maraming halaga.
Ang pagpapalit ng font sa html sa susunod na halaga ay magaganap kung ang nakaraang pamilya ay hindi naka-install sa operating system ng user.

Pagsusulat ng syntax:

font-family: font-name [, font-name[, ...]]

2) font-size - ang laki ay nakatakda mula 1 hanggang 7. Ito ay isa sa mga pangunahing paraan upang madagdagan ang font sa HTML.
Pagsusulat ng syntax:

laki ng font: ganap na laki | kamag-anak na laki | ibig sabihin | interes | magmana

Maaari mo ring itakda ang laki ng font:

  • Sa mga pixel;
  • SA ganap na halaga (xx-maliit, x-maliit, maliit, katamtaman, malaki);
  • Sa porsyento;
  • Sa mga puntos (pt).

Laki ng font:7

Laki ng font:24px

Laki ng font: x-malaki

Laki ng font: 200%

Laki ng font: 24pt


3) font-style - nagtatakda ng estilo ng pagsulat ng font. Syntax:

font-style: normal | italic | pahilig | magmana

Mga halaga:

  • normal – normal na spelling;
  • italic – italic;
  • pahilig - ang font ay nakahilig sa kanan;
  • inherit – namamana ang ispeling ng parent element.

Isang halimbawa kung paano baguhin ang font sa html gamit ang property na ito:

font-style:inherit

font-style:italic

font-style: normal

font-style:pahilig


4) font-variant - kino-convert ang lahat ng malalaking titik sa malalaking titik. Syntax:

font-variant: normal | maliliit na takip | magmana

Isang halimbawa kung paano baguhin ang font sa html gamit ang property na ito:

font-variant:inherit

font-variant:normal

font-variant:small-caps


5) font-weight - nagbibigay-daan sa iyo upang itakda ang kapal ng teksto (saturation). Syntax:

timbang ng font: bold|mas matapang|mas magaan|normal|100|200|300|400|500|600|700|800|900

Mga halaga:

  • bold – itinatakda ang html font sa bold;
  • mas matapang - mas matapang na may kaugnayan sa normal;
  • mas magaan - hindi gaanong puspos kumpara sa normal;
  • normal – normal na spelling;
  • 100-900 – itinatakda ang kapal ng font sa katumbas ng numero.

font-weight: bold

font-weight:mas matapang

font-weight:mas magaan

font-weight: normal

font-weight:900

font-weight:100

HTML font property at kulay ng font

Ang font ay isa pang property ng container. Sa loob mismo, pinagsama nito ang mga halaga ng ilang mga katangian na inilaan para sa pagbabago ng mga font. syntax ng font:

font: font-size font-family | magmana

Ang halaga ay maaari ding itakda sa mga font na ginagamit ng system sa mga label sa iba't ibang mga kontrol:

  • caption - para sa mga pindutan;
  • icon – para sa mga icon;
  • menu - menu;
  • message-box – para sa mga dialog box;
  • maliit na caption – para sa maliliit na kontrol;
  • status-bar – font ng status bar.
.

Marami akong natutunang bagong bagay tungkol sa paksang ito. Sa partikular, dalawang paraan upang ikonekta ang mga font, isang tampok ng pagtatrabaho sa serbisyo ng Google Mga font at density ng font numerical scale, mga mapagkukunan para sa paghahanap ng mga libreng font, ang mga salimuot ng pagtatrabaho sa generator ng FontSquirrel, mga mapagkukunan sa mga icon ng font. Para sa akin, ang impormasyon ay naging lubhang kapaki-pakinabang at kawili-wili.

Nasa ibaba ang isang maikling buod ng lahat ng mga tanong na tila kawili-wili at bago sa akin sa aking pagsasanay, muling sinabi sa sarili kong mga salita. Umaasa ako na ang materyal na ito ay magiging kapaki-pakinabang hindi lamang para sa akin.

Pagkonekta ng mga web font gamit ang @font-face:

  • pagkonekta ng hindi karaniwang font gamit ang isang direktiba

Direktiba

Nagtuturo sa browser na ilapat ang font na may tinukoy na pangalan sa mga napiling elemento ng pahina.

Mayroong ilang mga format ng web font. Ang pinakakaraniwan ay: EOT, WOFF, OTF o TTF,

EOT na format, na nauunawaan ng mga browser ng IE hanggang sa bersyon 8. Sa totoo lang, nilikha ang format ng font na ito at umiiral lamang para sa browser na ito at sa mga bersyon nito. Para makakuha ng EOT format na font, kailangan mo ng espesyal software upang i-convert ang TTF sa OET na format.

WOFF na format(Web Open Font Format) ay ang pinakamahusay ngayon para sa paggamit sa Web: ang pinakamaliit at pinakamagaan, na sinusuportahan ng lahat ng modernong browser (kabilang ang IE9 at mas mataas); ang format na ito ay partikular na nilikha para sa Web. Sa katunayan, ito ay isang magaan na bersyon ng TTF o OTF na format.

Mga format ng OTF(Open Type Font) at TTF (True Type Font) ay ang pinakakaraniwang computer font na ginagamit sa karamihan mga operating system(Windows, Macintosh, Linux) at sa mga application para sa mga system na ito. Ngunit, bukod dito, ang mga naturang font ay madaling magamit sa Internet.

SVG na format- hindi ito kahit isang format ng font, ngunit isang format ng graphics, graphic na larawan. Ang kakaiba ng format na ito ay ang mga graphics sa format na ito ay nilikha ng eksklusibo gamit ang mga vector, iyon ay, mga mathematical formula.

Salamat dito, ang mga imahe sa format na ito ay na-scale nang walang pagkawala ng kalidad - kapag ang laki ng imahe ay tumaas, ang computer ay kailangan lamang muling kalkulahin ang mga vector point. Ang kakaibang format ng graphics na ito ay naging posible na gamitin ito upang lumikha ng "mga font". Iyon ay, ang isang regular na font ay na-convert sa SVG na format, kung saan ang bawat font ay talagang isang imahe sa isang scalable na format na SVG.

Bakit kailangan ang gayong mga paghihirap? Ang bagay ay ang mga browser para sa Android OS (isang napaka-karaniwang OS para sa mga mobile device) ay maaari lamang magpakita ng mga web font sa format na ito. Hindi rin makilala ng mga browser para sa iPhone (Safari 4.1 at mas mababa) ang mga web font. Ang mga "walang kakayahan" na ito ay binibigyan ng mga larawan sa anyo ng mga font - "kung hindi mo alam kung paano kumain ng regular na pagkain, pagkatapos ay kainin ito!"

Legal na isyu ng paggamit ng mga font

Ang tanong ay maaaring madaling ibalangkas sa sumusunod na dalawang pangungusap. Ang lahat ng mga font ay nahahati sa binayaran o libre.

Binayaran Ang mga font ay nahahati sa mga:

  • Pwede gamitin sa web
  • ito ay ipinagbabawal gamitin sa web

Upang maiwasan ang abala sa paglutas ng nakakalito na isyu ng mga lisensya ng font, maaari mong gamitin ang mga serbisyo sa web Mga Font ng Google o TypeKit, na naglalaman ng lahat ng mga font, na maaaring gamitin sa web. Ang mga font sa mga server na ito ay alinman libre (Mga Font ng Google), o binayaran(TypeKit).

Maikling listahan libreng mapagkukunan ng font, na maaaring gamitin sa Web:

    https://www.theleagueofmoveabletype.com/)
  • FontSquirrel (http://www.fontsquirrel.com/)
  • Mga Google Font ( https://www.google.com/fonts)
  • Ang Open Font Library (http://openfontlibrary.org/ru)
  • Fontex.org (http://fontex.org/)
  • Exljbris Font Foundry (http://www.exljbris.com/)

Karamihan sa mga serbisyo sa web na nagbibigay ng mga font para sa Web ay inihahatid ang mga ito sa OTF o TTF na format. Samakatuwid, kailangan mong i-convert ang font na ito sa apat na format na inilarawan sa itaas upang makita ng maximum na bilang ng mga bisita sa site ang nilalaman ng site na ito sa kanilang mga device. Hindi mo kailangang maghanap ng espesyal na software para ma-convert. Maaari mong gamitin ang libreng @font-face Generator na matatagpuan sa server ng FontSquirrel (http://www.fontsquirrel.com/).

Ang tanging limitasyon ng serbisyong ito ay mayroon itong sariling blacklist, na naglalaman ng mga font na ipinagbabawal sa ilalim ng lisensya para sa paggamit sa Web. Sa madaling salita, kung "i-slip" mo ang generator na ito gamit ang isang lisensyadong font na binili ng pirated, ito ay tatanggi na bumuo ng huli.

Generator

ay mahalaga at dapat ay: @font-face ( font-family : "PTSans" ; src : url("PTSansRegular.eot") ; src : format ("embedded-opentype") , url("PTSansRegular.woff") format ("woff"), url("PTSansRegular.ttf") format ("truetype"), url("PTSansRegular.svg") na format ("svg")
  • EOT- format para lamang sa Internet Explorer 8 at sa ibaba
  • WOFF- ang pinakamoderno at pinakamaliit na font na naiintindihan ng karamihan sa mga modernong browser
  • TTF- ang font ay medyo malaki ang laki at medyo luma na
  • SVG- ang pinakamalaking font sa laki at volume, kaya dapat itong ilagay sa pinakahuling linya. Bilang karagdagan, ang format ng font na ito ay ginagamit lamang sa mga browser ng Android OS o Safari browser 4 (ibig sabihin, iPhone)

Binabasa ng browser ang katawan ng direktiba

ay hindi random at empirically verified batay sa karanasan ng mga nakaraang web developer.

h1 ( font-family : "League Gothic" , Arial , sans-serif ; font-weight : normal ; ) Tamang paggamit ng nakakonektang League Gothic web font. Dito unang ipinahiwatig ang pangalan ng konektadong font, at pagkatapos - mga backup na font na kilalang naka-install sa system ng user

(pangalan ng font na garantisadong magagamit sa system at pamilya ng font).

Ang isang matulungin na mambabasa ay magbibigay-pansin sa pangalawang linya at sasabihin: ito ay hindi kailangan dito, isang uri ng walang kapararakan. Actually hindi naman ganoon. Palaging sinusubukan ng mga browser na gawing bold ang mga heading bilang default. Samakatuwid, narito, sinasabi namin sa browser na huwag gawin ito, at iyon lang.

Bilang karagdagan sa mga titik, ang mga font ay maaaring binubuo ng mga icon o larawan. Mga mapagkukunang nakatuon sa paksa ng mga icon at icon ng font:

Mga uri ng font

Kapag nagkokonekta ng mga font na naka-install sa isang computer, kadalasan ay walang mga tanong na lumalabas at hindi namin iniisip kung paano nangyayari na kapag sinabi namin sa browser na mag-render ng text na bold gamit ang isang tag
1 ang teksto ay talagang ginawang italic; at may naka-bold na italics sa pamamagitan ng mga tag
malakas em

ito ay ginawa sa bold italic. Para sa amin, ginagawa ng browser ang teksto sa paraang sinasabi namin.

Kapag sinabihan ang browser kung aling istilo ang gagamitin, kukunin lang nito ang font na may tinukoy na istilo at ipapakita ito. Halimbawa, ang Arial font ay may apat na istilo. Kung tinukoy na ang isang naka-bold na istilo ay kinakailangan, ang browser ay gumagamit ng Arial na naka-bold na istilo. Ang browser mismo ay hindi maaaring mag-convert ng isang estilo sa isa pa sa anumang paraan. Isa lang ang magagawa niya - subukang gawin ang karaniwang "italic" na istilo. Ang utos na nagsasabi sa browser na gawin ang ganoong gawain ay tinatawag

ay makabuluhang mas kumplikado at maaaring gawin sa dalawang paraan: simple lang, na hindi naiintindihan ng IE8 (ngunit naiintindihan ng lahat ng iba pang browser) at kumplikado, na magiging available din sa IE8.

Isang madaling paraan upang ikonekta ang isang web font

Ang isang simpleng paraan ay ang magdagdag sa direktiba

at ang mga panuntunang ito ay nagsisilbi ng isa pang tungkulin, pinipilit nila ang browser na i-load ang web font na may tinukoy na istilo at timbang. Upang maging mas malinaw, agad kaming magbibigay ng halimbawa ng pagkonekta sa PTSans web font na may apat na opsyon para sa pagpapakita nito: @font-face ( font-family : "PTSans" ; src : url("PTSansRegular.eot") ; src : url("PTSansRegular.eot#iefix") format ("embedded-opentype"), url("PTSansRegular.woff") format ("woff"), url("PTSansRegular.ttf") format ("truetype"), url("PTSansRegular.svg") format (" svg" );

font-weight: normal;

font-style: normal;
  • - i-load ang font ng tinukoy na timbang;
  • ay ginawa sa bawat oras sa pamamagitan ng isang hiwalay na function na tawag sa mga napiling elemento ng pahina: p ( font-family : PTSans ; )

    At pagkatapos ay mga HTML tag

    tukuyin kung saang istilo ng font ilalapat tinukoy na mga elemento: dolor ets< strong >lorem ipsum dolor etslorem ipsum ipsum dolor ets lorem ipsum< em >dolor ets lorem ipsum dolorets lorem ipsum dolor ets

    "Hihilahin" ng browser ang font ng gustong istilo (bold o italic o bold italic) mula sa PTSans array at ilalapat ito sa mga tinukoy na elemento ng page.

    Advantage ang pamamaraang ito Ang koneksyon ng isang web font ay ang versatility nito. Ito ay sapat na upang ipahayag ang font sa sandaling gamit ang direktiba

    At .

    Sa mga lugar kung saan inilalapat ang mga tag

    , ang IE8 browser mismo ang gagawa ng mga istilo mula sa font ng PTSans. Ang isang halimbawa ng isang IE8-friendly na web font connection na opsyon ay ipinapakita sa ibaba: @font-face ( font-family : "PTSansRegular" ; src : url("PTSansRegular.eot") ; src : url("PTSansRegular.eot#iefix") format ("embedded-opentype"), url("PTSansRegular.woff") format ("woff"), url("PTSansRegular.ttf") format ("truetype"), url("PTSansRegular.svg") format (" svg" ); ) @font-face ( font-family : "PTSansItalic" ; src : url("PTSansItalic.eot" ; src : url("PTSansItalic.eot#iefix") format ("embedded-opentype" ), url("PTSansItalic . woff") format ("woff"), url("PTSansItalic.ttf") format ("truetype"), url("PTSansItalic.svg") na format ("svg" ); ) @font-face ( font-family : "PTSansBold" ; src : url("PTSansBold.eot") ; src : url("PTSansBold.eot#iefix") format ("embedded-opentype") , url("PTSansBold.woff") format ("woff" ) , url("PTSansBold.ttf") format ("truetype"), url("PTSansBold.svg") format ("svg") @font-face ( font-family : "PTSansBoldItalic" ; src : url( "PTSansBoldItalic. eot" ; src : url("PTSansBoldItalic.eot#iefix")

    format ("embedded-opentype"), url("PTSansBoldItalic.woof") format ("woff"), url("PTSansBoldItalic.ttf") format ("truetype"), url("PTSansBoldItalic.svg") format (" svg" );

    At , ? Gaano kabusog ang mga style sheet sa kasong ito! Paano kung biglang (nawa'y hindi!) kailangan mong gumawa ng mga pagbabago sa naturang code?

    p ( font-family: PTSansRegular ; font-weight : normal ; font-italic : normal ; font-size : 36px ; ) p strong ( font-family : PTSansBold ; font-weight : bold ; font-italic : normal ; ) p em ( font-family : PTSansItalic ; font-weight : normal ; font-italic : italic ; ) p strong em ( font-family : PTSansBoldItalic ; font-weight: bold ; font-italic : italic ; )

    Ang paggamit o hindi ang paggamit ng pangalawang paraan ng pagkonekta ng mga web font ay isang bagay kung gaano kinakailangan ang suporta ng IE8 para sa isang partikular na site. Pakitandaan na ang bahagi ng IE8 ay bumabagsak at patuloy na babagsak.

    Mga Font ng Google

    Upang hindi mag-abala sa paghahanap ng isang font, pag-download nito sa TTF o OTF na format, pag-convert nito gamit ang isang generator tulad ng FontSquirrel Generator, pagkonekta sa mga nagresultang estilo ng CSS sa proyekto gamit ang maraming mga direktiba

    , ang pangalawa ay mas maigsi gamit ang direktiba - sapat na upang ikonekta ito sa simula ng mga style sheet upang ang mga napiling font ay mailapat sa lahat ng mga pahina ng HTML. Pangatlong paraan Sa gamit ang JavaScript

    Bukod sa pagiging kumplikado, wala itong iba pang mga pakinabang sa iba pang dalawa. Hindi ipinapahiwatig ng Google ang density ng font na ginagamit

    mga keyword

    , at sa numerical scale - 100 hanggang 900. Ang value na 400 ay tumutugma sa Gentium Book Basic na font ng normal na italic weight: em ( font-family: "Gentium Book Basic", serif; font-weight: 400; font-style: italic;)

Tinatapos nito ang talakayan sa mga web font.
Matagal na akong hindi nagsusulat ng kahit ano, pero oh well. SA sa ngayon ginagawa ko pagbuo ng web

at ang tanong ay lumitaw tungkol sa isang magandang menu. May animation, ngunit walang JS o Flash. Siyempre, ang lahat ng ito ay ginagawa gamit ang CSS3, at bilang karagdagan hindi kami gagamit ng mga imahe. Sa lahat.

I-download o kaagad mula sa .

Inilunsad namin ito, nakikita namin ang bintana

Buksan ang "Text > SVG Font Editor...", may lalabas na panel sa kanan

Mag-click sa font 1, palitan ito ng pangalan ng iyong font, halimbawa MySomeFont, i-clear ang *Typeface* field sa kanan. Ngayon buksan ang tab na *Glyphs* lahat ng nasa aming panel *SVG Font Editor*. Tulad ng nakikita natin, ang mga glyph ng English na layout ay naidagdag na para sa atin. Maaari mong alisin ang lahat kung ito ay makakasagabal, i-right click

pag-click ng mouse sa kanila. Maaari mo ring i-edit ang pangalan ng glyph at ang simbolo na kinikilala nito

I-import ang "File > Import..." (Ctrl+I) ang imahe na gusto naming isama sa font. Kung ito ay isang raster graphic, pagkatapos idagdag ito kailangan mong gawin ang "Outline > Vectorize Raster" (Alt + Shift + B). Sa personal, hindi ko kinalikot ang mga pagpipilian, i-click lamang ang *OK* at isang imaheng vector ang nilikha.

Tinatanggal namin ang raster (Piliin ito at pindutin ang Delete key) - sa ibaba sa linya kapag pumipili ng isang bagay ito ay nakasulat kung ito ay raster (Larawan) o vector (Balangkas).

Susunod, iunat ang balangkas sa lugar ng trabaho (sa tuktok na panel ay may mga lugar ng pag-input - x: 0, y: 0; W: 1000 at H: 1000). Iniwan kong napili ang outline, pumunta sa aming paboritong panel *SVG Font Editor* sa tab na *Glyphs*. Ngayon piliin ang glyph na gusto naming iugnay sa aming outline. Hayaan itong maging isang glyph na may simbolo na *a*. Pagkatapos ay i-click lamang ang *Kumuha ng mga kurba mula sa pagpili* na buton. Upang suriin kung ginawa namin ang lahat ng tama, ilagay lamang ang idinagdag na simbolo sa *Text* na patlang sa ibaba at ang aming imahe ay dapat na ipakita. Pagkatapos suriin, ang tabas ay maaaring ilipat sa labas ng lugar ng trabaho o tanggalin ito ay hindi na kailangan.

Maaari din naming iugnay ang lahat ng hindi nagamit na character sa font sa anumang outline sa pamamagitan ng *Take from Selection* sa text na *Missing Glyph* sa tab na *Glyphs*. Ang operasyon ay nagpapatuloy tulad ng inilarawan sa itaas.

Sa pangkalahatan, idinagdag namin ang lahat ng mga contour sa aming mga simbolo. Ngayon kailangan nating i-edit nang kaunti ang XML file mismo. Buksan ang *XML Editor* (Shift+Ctrl+X) - ang button ay nasa pangunahing panel - pang-apat mula sa kanan. At kailangan nating baguhin ang *id* attribute ng item *

@font-face (
font-family: "MySomeFont";
src: url("fonts/font.svg") format("svg");
}
Ang aming SVG ay maaari ding i-convert sa ibang mga format ng font, halimbawa TTF gamit ang onlinefontconverter na serbisyo.

Well, sa pangkalahatan, iyon lang.

Mayroong isang malaking bilang ng mga paraan upang mahanap ang tamang font para sa iyong website. Halimbawa, maaari kang gumamit ng mga serbisyo na may malalaking library ng font na nangangailangan ng bayad na subscription.

Kung nasa badyet ka o nag-eeksperimento sa isang maliit na proyekto, maaari kang gumamit ng mga libreng web font na available sa publiko. Ang paghahanap ng tamang web font para sa iyong website ay maaaring magtagal, kaya ipinakita namin sa iyo ang isang seleksyon ng pinakamahusay sa kanila.

1. Montserrat

Habang umuunlad ang typography, lumalayo ito sa mga vintage urban poster at sign. Sinubukan ng lumikha ng font na ito na mapanatili ang kagandahan ng typography ng mga poster sa lungsod na nakita niya sa mga lansangan ng Buenos Aires.

2. Abril Fatface


Ang Abril Fatface ay bahagi ng isang malaking pamilya ng font na may 18 estilo na ginawa para sa iba't ibang layunin. Ang font na ito ay may malakas, eleganteng presensya, na ginagawa itong isang mahusay na solusyon para sa paglikha ng mga kapansin-pansing headline. Ito ay madalas na pinagsama sa Lato, Open Sans at Droid Sans.

3. Pagpapakita ng Playfair


Dahil sa makabuluhang x-height at maliliit na subscript ng mga titik, ang Playfair Display ay angkop din para sa pagsulat ng isang heading, lalo na kung limitado ang espasyo. Mahusay itong ipinares sa Georgia at kadalasang ginagamit sa Oswald, Lato at Arvo.

4. GT Walsheim


Ginagamit sa maraming blog ngayon, ang GT Walsheim ay isang kinatawan ng geometric sans serifs at bahagi ng pamilyang Grilli Type. Kailangan mong magbayad para sa isang buong hanay ng mga font, ngunit nag-aalok ang Grilli Type ng libreng pagsubok ng GT Walsheim.

5. Merriweather


Kung ang pagiging madaling mabasa sa screen ay isang priyoridad para sa iyong proyekto, tingnan ang Merriweather, na nilikha para sa layuning ito. Bilang karagdagan, ang font na ito ay patuloy na pinapabuti.

6. Josephine Sans


Ang Josefin Sans ay inspirasyon ng vintage Swedish na disenyo at nagtatampok ng elegante, geometric aesthetic.

7. Gravitas One


Ang Gravitas One ay batay sa "UK fat face", isang naka-bold na font ng advertising na lumitaw noong Industrial Revolution sa England. Ang font na ito ay mukhang mahusay sa medium hanggang large scale at angkop para sa mga heading, pamagat at tab.

8. Jura


Ang mga titik ng font na ito ay inuulit ang mga anyo ng Kaya-li letter. Naglalaman din ito ng mga glyph ng Cyrillic at Greek alphabet. Available ito sa magaan, normal, katamtaman at bold na timbang.

9.League Gothic


Orihinal na idinisenyo ni Morris Fuller Benton para sa American Type Founders Company noong 1903, nakahanap ang League Gothic ng bagong gamit na may update at pagdaragdag ng mga bagong glyph.

10. Fjord


Ang Fjord ay isang serif na font na orihinal na nilikha para sa mga naka-print na aklat at partikular na angkop para sa pag-akma ng mahabang teksto sa isang maliit na format ng pag-print. Maaari itong magamit upang lumikha ng isang malaking halaga ng nilalaman ng teksto sa site, dahil ang font ay may malinaw na istraktura, mga kilalang serif at mahaba, eleganteng mga ulo at paa.

11. Amaranto


Nagtatampok ang Amaranth font family ng hindi pahilig na italic na disenyo na may kaunting contrast at kapansin-pansing mga kurba. Ang lahat ng tatlong estilo ng Amaranth ay mahusay na ipinares sa halos anumang iba pang font. Maaari kang maglaro gamit ang font na ito - eksperimento at piliin ang pinakamahusay.

12. Poly


Ang medium-contrast na font na ito ay orihinal na nilikha para sa katutubong wikang Wayuunaiki, na nangangailangan ng malalawak na glyph. Nagtatampok ito ng maliliit na tangkay at malaking x-height, na ginagawa itong lalong kapaki-pakinabang sa maliliit na sukat.

13. Gentium Basic


Ang font na ito ay nilikha bilang isang multi-linguistic na font, kabilang ang Latin at Greek na mga titik, pati na rin ang Cyrillic at advanced na suporta sa bersyon ng Gentium Plus. Available ang Gentium Basic at Gentium Book Basic sa isang libreng bersyon sa web, ngunit limitado lamang sa alpabetong Latin.

14. Buksan ang Sans


Ang Open Sans ay isang kinatawan ng humanistic grotesques. Ang font na ito ay lubos na nababasa at umaangkop sa parehong web at mobile na mga interface. Ito ay isang non-slanted font na may simpleng istilo ng mga titik, na kung saan ay nailalarawan sa pamamagitan ng isang neutral, ngunit sapat na kaaya-aya na hitsura na maaari itong magamit para sa iba't ibang mga layunin.

15. Ledger Regular


Ito ay isang multi-functional na font na may malaking x-height, malakas na contrast ng kulay, at mahusay na tinukoy na mga serif na nakakatulong sa pagiging madaling mabasa ng teksto. Ang font na ito ay mukhang maganda sa pag-print at sa isang mababang resolution na screen.

16. Signika


Ang libreng web font na ito ay kinatawan ng sans serif. Ang mababang contrast at mataas na x-height ay nagbibigay-daan sa Signika na magpakita ng maayos sa screen. Kasama sa malawak na seleksyon ng mga icon ang mga simbolo, pictogram at arrow.

17. Josefin Slab


Nilikha ayon sa mga canon ng isang geometric na font na tipikal noong 1930s, kasama ang pagdaragdag ng mga tampok na Scandinavian, ang Josefin Slab ay may mga katangian ng isang font ng slab at nakapagpapaalaala sa isang font ng typewriter. Kapansin-pansin, ang x-height nito ay kalahati ng taas ng isang malaking titik.

18. Forum


Gaya ng ipinahihiwatig ng pangalan, ito ay isang Romanong font na mainam para sa mga caps lock heading, ngunit angkop din para sa pagpapakita ng teksto. Ang mga eleganteng proporsyon ng font na ito ay nakapagpapaalaala sa klasikal na arkitektura na may mga kalahating bilog na arko, pahalang na cornice at patayong mga haligi.


Pinangalanan pagkatapos ng isa sa mga pinakasikat na lungsod ng Mayan, ang Tikal Sans ay may mga tampok ng mga glyph na ginamit sa pagsulat ng sibilisasyon sa Timog Amerika. Pinili ng lumikha nito ang isang malaking x-height, na nagbibigay sa font ng modernong hitsura at may kapaki-pakinabang na epekto sa pagiging madaling mabasa nito, at ang malaking seleksyon ng mga estilo ay nagpapahintulot na magamit ito para sa iba't ibang layunin.

20. Arvo


Angkop para sa parehong print at web, ang geometric na slab na font na ito ay available sa Roman, Italic, Roman Bold at Bold Italic. Pinahuhusay ng mababang contrast ng Arvo ang pagiging madaling mabasa nito sa screen.

21. Bevan


Nilikha ang Bevan batay sa tradisyonal na font ng slab noong 1930s. Ang mga titik ay na-digitize, binigyan ng bagong hugis at na-optimize para sa web na bersyon. Ito ay isa sa ilang napaka-bold na mga font na angkop para sa mga website.

22. Lumang Pamantayan TT


Ang Old Standard TT ay batay sa Modern serif font, na sikat noong huling bahagi ng ika-19 at unang bahagi ng ika-20 siglo at pagkatapos ay nakalimutan nang mahabang panahon. Angkop ang font na ito para sa pagdaragdag ng istilo sa isang partikular na uri ng nilalaman, gaya ng siyentipikong pananaliksik o mga teksto sa Greek o Cyrillic.

23. Creon


Tamang-tama para sa mga website ng balita at blog, ang serif font na ito ay nagbabahagi din ng mga katangian ng isang slab font, ngunit ang balanse at mababang contrast nito ay ginagawang mas personal ang Kreon.

24. Droid Sans


Ang Droid Sans ay na-optimize para sa maximum na pagiging madaling mabasa kahit sa maliliit na interface, gaya ng mga menu sa mga screen ng mobile phone. Ito ay isang neutral, hindi pahilig na font na may simple, bukas na mga letra.

25. Italyano


Ang lumikha ng font na ito ay inspirasyon ng klasikong Italian calligraphy, kaya ang font ay magiging lubhang kapaki-pakinabang para sa mga proyekto kung saan kailangan mong magdagdag ng kagandahan. Angkop din ang Italiana para sa pagsulat ng mga headline ng balita sa parehong print at electronic na format.

26. Vollkorn


Napakasikat ng detalyadong, mayaman sa feature na serif na font na ito. Ang kalinawan at katatagan nito ay naghahatid ng kumpiyansa at lakas, na ginagawang pantay na epektibo ang font sa mas malalaking sukat para sa mga heading at pamagat, pati na rin ang malalaking halaga ng teksto sa mas maliliit na format.

27. artista


Ang font na ito ay may partikular na malaking x-height, na nangangailangan ng medyo maraming espasyo. Nagtatampok din ang aktor ng makalumang istilo para sa ilang karakter, gaya ng mga numero 6 at 9.

Sa mga ugat na itinayo noong ika-16 na siglo, ang humanistic typeface na Garamond ay naging isang tunay na typographic icon, kadalasang nagsisilbing batayan para sa paglikha ng mga modernong typeface, kabilang ang EB Garamond.

31. Ubuntu


Ang Ubuntu Grotesque ay nilikha upang i-personalize ang web text sa parehong mga desktop at mobile device. Hinihikayat ang mga user na mag-eksperimento sa font na ito, baguhin at pagbutihin ito ayon sa nakikita nilang angkop.

32. Rosario


Ang Rosario ay isang klasikong humanistic sans serif na perpekto para sa pag-istilo ng mga talata ng teksto.

33. Roboto Slab


Ang Roboto Slab ay isa sa mga font mula sa pamilyang Roboto. Ang block na bersyon ay lalong kapansin-pansin sa mga geometric na hugis at bukas na kurba nito. Ito ay pantay na angkop para sa mga screen ng gadget at mga naka-print na bersyon ng mga teksto.

34. Oswald


Ang font ay isang reworked na bersyon ng classic na Alternate Gothic sans serif. Kamakailan ay na-update si Oswald upang magkaroon ng iba't ibang timbang, pinalawak na hanay ng character, at mas mahusay na kerning.

35. Stalemate


Ang Stalemate ay isang makinis na sulat-kamay na font na may ilang vintage flair. Ito ay angkop para sa paglikha ng mga accent at pag-personalize ng iyong website.

36. Crimson Text


Ang maingat na idinisenyong klasikong proporsyonal na font ay maaaring gamitin para sa parehong pagpapakita ng malalaking halaga ng teksto at pagsulat ng mga heading.