CSS Å¡riftai Geriausi 5 Web Safe Fonts naudoti su CSS

Turinys:

Palyginus Å¡riftus Ä¯vairiose operacinÄ—se sistemose ir bendrose programinÄ—s Ä¯rangos paketuose, paliekate labai maÅ¾Ä… Å¡riftÅ³ pogrupÄ¯, vadinamÄ… interneto saugiais Å¡riftais. Tai yra Å¡riftai, kuriuos galite bÅ«ti pagrÄ¯stai Ä¯sitikinami, yra Ä¯diegti visuose kompiuteriuose.

Web Safe Fonts

Kiekviena iÅ¡ Å¡iÅ³ Å¡riftÅ³ paslaugÅ³ dirba Å¡iek tiek kitaip. Naudodami "Google" Å¡riftus, galite pridÄ—ti vienÄ… Å¡riftÄ…, jei norite, arba statyti Å¡riftÅ³ kolekcijÄ… ir importuoti visus Å¡riftus naudojant vienÄ… nuorodos elementÄ…. EDGE Å¡riftai turi bÅ«ti pridÄ—ta vienu metu su nauju scenarijÅ³ elementu kiekvienam Å¡riftui, kurÄ¯ norite naudoti savo svetainÄ—je. Typekit Å¡riftai gali bÅ«ti pridÄ—ti tik pastatant Å¡rifto rinkinÄ¯ Typekit svetainÄ—je, kuri yra panaÅ¡i Ä¯ "Google" Å¡rifto kolekcijÄ…. Tada visÄ… Å¡rifto rinkinÄ¯ Ä¯raÅ¡oma Ä¯ jÅ«sÅ³ svetainÄ™ vienu metu. Pirmiau pateiktame pavyzdyje failo pavadinimas FONT_KIT. S faktiÅ¡kai bÅ«tÅ³ unikali serija numeriÅ³ ir raidÅ¾iÅ³ automatiÅ¡kai generuoja TypEKIT, kad nustatytumÄ—te sukÅ«rÄ™s Å¡rifto rinkinÄ¯. PraktiÅ¡kai, tuo paÄiu metu nenaudojote visÅ³ Å¡iÅ³ paslaugÅ³. Tai labiausiai paplitusi svetainÄ—ms gauti visus savo Å¡riftus iÅ¡ vieno Å¡altinio arba savarankiÅ¡kai priimanÄiais savo svetainÄ—s naudojamus Å¡riftus.

piktogramos Å¡riftai

Piktogramos plaÄiai naudojami internete. Nors kai kurios piktogramos yra vaizdo failai, lankstus bÅ«das dirbti su piktogramomis yra naudoti piktogramos Å¡riftÄ… kaip Å¡riftas nuostabus. AnksÄiau naudojant piktogramÅ³ Å¡riftus buvo Å¡iek tiek sudÄ—tinga ir reikalinga, kad piktogramÅ³ Å¡riftÅ³ failai bÅ«tÅ³ savarankiÅ¡ki. TaÄiau dÄ—ka CDN prieglobos remia "MaxCDN" ir "Bootstrap", kiekvienas gali pridÄ—ti Å¡riftÅ³ nuostabÅ³ piktogramas Ä¯ savo svetainÄ™, nereikia surengti Å¡riftÅ³ failus savo serveryje. Visos instrukcijos pradÅ¾ios yra prieinami iÅ¡ Å¡rifto nuostabaus "Github" saugyklos. TaÄiau tai tikrai taip paprasta, kaip ir Å¡iÅ³ dviejÅ³ Å¾ingsniÅ³:

Kas daro piktogramÅ³ Å¡riftus taip daug geriau dirbti su savo Ä¯vaizdÅ¾io piktogramÅ³ kolegomis yra tai, kad jie gali bÅ«ti stiliaus su visomis tos paÄios CSS savybÄ—s, naudojamos stiliaus Å¡riftus. PavyzdÅ¾iui, jei norime padidinti piktogramos dydÄ¯, pridÄ—kite apvaliÄ… foninÄ™ spalvÄ…, pakeiskite piktogramos spalvÄ… ir pridÄ—kite papildomÅ³ padding visÄ… keliÄ… aplink piktogramÄ…, kuriÄ… galime tai padaryti su kai kuriais gana paprastais CSS.

Dalis: Web tipografija

Web Safe Fonts yra Å¡riftai, kurie yra iÅ¡ anksto Ä¯diegta daug operaciniÅ³ sistemÅ³. Nors ne visos sistemos mesti tuos paÄius Å¡riftus Ä¯diegtus, galite naudoti Å¾iniatinklio saugaus Å¡rifto kamino iÅ¡sprÄ™sti keletÄ… Å¡riftÅ³, kurie atrodo panaÅ¡Å«s, taip pat yra Ä¯diegta Ä¯ Ä¯vairias sistemas, kurias norite palaikyti. Nesvarbu, ar norite turÄ—ti nuosavybÄ—s Å¡riftus, iÅ¡skyrus iÅ¡ anksto Ä¯diegtus, kaip CSS3, galite naudoti Å¾iniatinklio Å¡riftus.

KodÄ—l "Web Safe" reikalas?

Tai vienas iÅ¡ artimÅ³jÅ³ sans-serif Å¡riftÅ³ (o tai reiÅ¡kia, kad nÄ—ra maÅ¾Å³ garbanos, naudojamos pasveikinti kiekvienÄ… iÅ¡ dviejÅ³ ar daugiau Å¾moniÅ³ ar dalykÅ³). Tai daÅ¾nai pakeista "Windows" Ä¯renginiuose kitiems Ä¯domiams (skaityti: graÅ¾esnius) Å¡riftÅ³ pasirinkimus.

helvetica

Å rifto Å¡eimyninis turtas turÄ—tÅ³ turÄ—ti keletÄ… Å¡riftÅ³ pavadinimÅ³ kaip "atsarginÄ—s" sistemos, siekiant uÅ¾tikrinti maksimalÅ³ narÅ¡ykliÅ³ / operaciniÅ³ sistemÅ³ suderinamumÄ…. Jei narÅ¡yklÄ— nepalaiko pirmojo Å¡rifto, jis bando kitÄ… Å¡riftÄ….

Straipsniai
KAIP
NEMOKAMAI temos
Renginiai
Freelancing
Piktogramos
Illustrator
Ä®kvÄ—pimas
logotipai
Photography
Photoshop
tipografija
Tapetai
dar daugiau.

programuotojai

Å eimos nuosavybÄ— yra Å¡rifto pavadinimÅ³ Ä¯vairovÄ— kaip "Ä¯tempimo" sistema, siekiant uÅ¾tikrinti maksimalÅ³ suderinamumÄ… tarp narÅ¡yklÄ—s / operacinÄ—s sistemos. Jei jÅ«sÅ³ narÅ¡yklÄ— nepalaiko pirmojo Å¡rifto, jis bando kitÄ… Å¡riftÄ….

serif Å¡riftai

kÄ… gi, tiesa? KodÄ—l aÅ¡ tiesiog nesakau tai, kokÄ¯ Å¡riftÄ… noriu naudoti ir tai? Visa idÄ—ja Äia yra atsarginÄ—s. NarÅ¡yklÄ— bandys naudoti pirmuoju nurodytÄ… Å¡riftÄ… (lato, Å¡iuo atveju), bet jei jis neturi, kad Å¡riftas bÅ«tÅ³ prieinamas, jis nuolat nuleis Å¡Ä¯ sÄ…raÅ¡Ä…. Taigi, kad bÅ«tÅ³ tikrai verbose Äia, kas Å¡i taisyklÄ— sako:

Taigi, kokioje situacijoje bÅ«tÅ³ narÅ¡yklÄ— neturi Å¡rifto, kurÄ¯ praÅ¡ote? Tai gana daÅ¾na. Yra tik keletas Å¡riftÅ³, kurie yra laikomi "Web Safe" --metis, kad tikÄ—tina, kad dauguma kompiuteriÅ³ lanko jÅ«sÅ³ svetainÄ™, turi tÄ… Å¡riftÄ… Ä¯diegta ir todÄ—l narÅ¡yklÄ— gali jÄ¯ naudoti. Pagalvokite: Arial, Times New Roman, Kurjeris, Gruzija, Verdana ir keletas kitÅ³.

Bet dauguma svetainiÅ³, Å¡iÅ³ dienÅ³, naudokite pasirinktinius Å¾iniatinklio Å¡riftus. Jie Ä¯kelia Å¡riftÄ… kaip iÅ¡teklius (lygiai taip pat kaip svetainÄ— apkrova pati kaip iÅ¡teklius, ar vaizdÄ… ar "JavaScript"), tada kad Å¡riftas yra prieinamas naudoti. PlaÄiai populiarus "Google" Å¡riftai daro tai gana aiÅ¡ku:

Net kai Ä¯dÄ—kite Å¡riftÄ… tokiu bÅ«du, vis dar Ä¯manoma, kad Å¡riftas neÄ¯kraunamas. "Google" yra labai patikimas Å¡eimininkÄ—, jÅ«s nekontroliuojate savo serveriÅ³; jie daro. Dar daÅ¾niau, prastos tinklo jungtys gali uÅ¾kirsti keliÄ… Å¡riftui nuo pakrovimo. Bet kokiame Å¡rifto pakrovimo gedimo scenarijuje, tai dar viena situacija, kai yra malonus Å¡rifto kaminas.

Ankstesnis pranešimas. \ T Kitas pranešimas. \ T