@font-family reikšmė | Windows | Mac | Šeima |
---|---|---|---|
Arial, Helvetica, sans-serif | Arial | Arial, Helvetica | be serifo |
„Arial Black“, programėlė, be serifo | Arial Black | Arial Black, programėlė | be serifo |
„Comic Sans MS“, kursyvas | Komiksas be MS | Komiksas be MS 5 | kursyvus |
"Curier New", Kurjeris, monospace | Kurjeris Naujas | Kurjeris Naujas, Kurjeris 6 | monospace |
Gruzija, Serif | Gruzija 1 | Gruzija | serifas |
Smūgis, anglis, sans-serif | Poveikis | Poveikis 5, anglis 6 | be serifo |
"Lucida Console", Monakas, monospace | Lucida konsolė | Monakas 5 | monospace |
„Lucida Sans Unicode“, „Lucida Grande“, be serif | Lucida Sans Unicode | Lucida Grande | be serifo |
„Palatino linotipas“, „Knyga Antiqua“, Palatino, serif | Palatino linotipas, knyga „Antiqua 3“. | Palatino 6 | serifas |
Tahoma, Ženeva, sans-serif | Tahoma | Ženeva | be serifo |
„Times New Roman“, „Times“, serif | Times New Roman | Laikai | serifas |
"Trebuchet MS", Helvetica, sans-serif | Trebuchet MS 1 | Helvetica | be serifo |
Verdana, Ženeva, sans-serif | Verdana | Verdana, Ženeva | be serifo |
Simbolis | 2 simbolis | 2 simbolis | - |
Tinklai | Tinklalapiai 2 | Tinklalapiai 2 | - |
Wingdings, „Zapf Dingbats“ | Sparnai 2 | Zapf Dingbats 2 | - |
„MS Sans Serif“, Ženeva, sans-serif | MS Sans Serif 4 | Ženeva | be serifo |
„MS Serif“, „Niujorkas“, serif | MS Serif 4 | Niujorkas 6 | serifas |
2 Simbolių šriftai rodomi tik „Internet Explorer“ kitose naršyklėse, jie paprastai pakeičiami standartiniu šriftu (nors, pavyzdžiui, „Opera“ rodomas simbolių šriftas, o „Safari“ – „Webdings“);
3 Book Antiqua šriftas beveik identiškas Palatino Linotype; „Palatino Linotype“ yra su „Windows 2000/XP“, o „Book Antiqua“ – su „Windows 98“.
4 Atkreipkite dėmesį, kad šie šriftai yra ne TrueType, o bitmap, todėl kai kuriais dydžiais jie gali atrodyti prastai (jie skirti rodyti 8, 10, 12, 14, 18 ir 24 pt 96 DPI).
5 Šie šriftai „Safari“ veikia tik standartiniu stiliumi, bet neveikia pusjuodžiu ar kursyvu. Comic Sans MS taip pat veikia pusjuodžiu šriftu, bet ne kursyvu. Atrodo, kad kitos „Mac“ naršyklės puikiai imituoja trūkstamas šrifto ypatybes (ačiū Christianui Fecteau už patarimą).
6 Šie šriftai įdiegiami „Mac“ tik naudojant klasikinį diegimą
Viena iš pagrindinių interneto dizaino užduočių yra tinkamo pasirinkimas standartiniai šriftai. Šriftų įterpimo paslaugos, tokios kaip „Google Web Fonts“ arba „Typekit“, buvo sukurtos kaip alternatyva, siekiant pateikti ką nors naujo.
Jas labai paprasta naudoti. Paimkime „Google“ žiniatinklio šriftus kaip pavyzdį.
Pasirinkite šriftą Open Sans, Droid Serif arba Lato. Parašykite kodą ir įklijuokite jį į elementą HTML dokumentas. Esate pasirengę pateikti nuorodą į CSS! Visas procesas užtruko ne ilgiau kaip 60 sekundžių. Ir viskas yra visiškai nemokama.
Kai kurie šriftai gali būti prieinami ne visiems. O tai reiškia, kad gali kilti problemų. Džiaugiatės, kad svetainei pasirinkote gražų šriftą, tačiau tinklalapio lankytojas mato negražių raštų.
Tai neįvyks, jei įdiegsite atsarginę parinktį.
Kaip svarbu naudoti saugius žiniatinklio šriftus?
Kiekvienas įrenginys turi savo iš anksto įdiegtų šriftų rinkinį. Kuris iš jų priklauso nuo operacinės sistemos. Bėda ta, kad tarp jų yra nedideli skirtumai.
Ką apie svetaines? Kaip šis? Matomas šriftas gali būti ne tas, kuris iš pradžių buvo nurodytas svetainėje.
Ką tai reiškia? Tarkime, dizaineris svetainei pasirinko kokią nors mokamų šriftų šeimą. Jei nesate jų įdiegę ir jų neteikia speciali žiniatinklio paslauga, tada matomas šriftas yra viena iš standartinių parinkčių. Pavyzdžiui, Times New Roman.
Todėl tekstas ekrane gali atrodyti tiesiog siaubingai.
Ir čia standartiniai svetainės šriftai galimas visose operacinėse sistemose. Tai nedidelė kolekcija, kurią galima rasti „Windows“, „Mac“, „Google“, taip pat „Unix“ ir „Linux“.
Šio pasirinkimo pagalba dizaineriai, taip pat svetainių savininkai gali nurodyti, kuris šriftas turi būti naudojamas kaip atsarginis šriftas. Tai suteikia galimybę valdyti, kaip puslapis atrodys skirtinguose įrenginiuose.
Kaip atsarginę parinktį kūrėjas pasirenka šriftą, kuris yra labai panašus į pradinį, ir jis bus rodomas vartotojui.
Pažvelkime į populiariausių pasirinkimą standartiniai šriftai HTML.
Daugeliu atvejų laikomas standartiniu. Labiausiai paplitęs šriftas " be serif"arba sans serif šriftus ( kurių raidžių galuose nėra serifų). Jis dažnai naudojamas sistemoje „Windows“, kad pakeistų kitus simbolius.
Helvetica yra dizainerių gelbėjimo priemonė. Tai standartinis žiniatinklio šriftas veikia beveik visada ( bent jau kaip apsauginis tinklas kitiems šriftams).
Serifiniams šriftams atlieka tą patį vaidmenį kaip Arial be serifinių šriftų. Tai vienas populiariausių „Windows“ įrenginiai. Tai atnaujinta senojo Times šrifto versija.
CSS standartinis šriftas„The Times“ daugeliui pažįstamas. Daugelis jį prisimena mažomis raidėmis siaurose senų laikraščių skiltyse. Dažniausia spaudos rūšis, tapusi tradicija.
Panašus į Times New Roman ir naudojamas kaip senosios klasikos variantas. Jis taip pat laikomas vienspalviu šriftu. Skirtingai nuo serif ir sans serif šriftų, visi jo simboliai yra vienodo pločio.
Senas fiksuoto pločio šriftas, naudojamas kaip atsarginis beveik visuose įrenginiuose ir operacinėse sistemose.
Verdana teisėtai gali būti laikoma tikru žiniatinklio šriftu ( tikras žiniatinklio šriftas) dėl paprastų linijų, veikiančių kaip serifai, ir didelio dydžio. Jo raidės šiek tiek pailgos, todėl jas lengva perskaityti ekrane.
Standartinis žiniatinklio šriftas Georgia yra panašus į Verdana šriftą savo forma ir dydžiu. Jo simboliai yra didesni nei kitų tokio pat dydžio šriftų. Bet geriau jo nenaudoti kartu su kitais. Tas pats Times New Roman, palyginus, atrodo kaip nykštukas.
Palatino datuojamas Renesanso epocha. Jokių juokelių. Tai dar vienas didelis šriftas, puikiai tinkantis žiniatinklyje. Jis dažniausiai naudojamas antraštėse ir skelbimuose.
Kitas senovinis šriftas, atsiradęs XVI amžiuje Paryžiuje. Nauja ir patobulinta versija yra standartinė daugelyje „Windows“ įrenginių. Vėliau šį šriftą perėmė kitos operacinės sistemos.
Bookman ( arba „Bookman Old Style“.) - vienas iš geriausi standartiniai šriftai antraštėms. Jo būdingas bruožas yra skaitomumas net naudojant mažą dydį.
Comic Sans MS yra smagi alternatyva serifiniams šriftams.
Tai viduramžių temos šriftas, kurį iš pradžių sukūrė „Microsoft“ devintojo dešimtmečio viduryje. Jis buvo naudojamas Windows XP. Šiandien ji naudojama pagrindiniam tekstui sudaryti.
Šiame straipsnyje pasidalinsiu savo problemos, susijusios su netinkamu šriftų rodymu sistemoje „Windows 7“, sprendimu, kuris reikalauja visų standartinių šriftų atkūrimasWindows 7. Klausimo pagrindas yra toks: neseniai ieškojau naujų originalių šriftų, skirtų naudoti grafiniame redaktoriuje, atsisiunčiau visą krūvą jų, bet tada pastebėjau, kad kai į sistemą pridedamas naujas šriftas, jei yra atitinka, originalus šriftas pakeičiamas nauju (instrukcija, kaip įdiegti šriftus Windows 7). Dėl šios veiklos tapo neįmanoma dirbti pusėje sistemos skydelių ir programų dėl to, kad jie kalbėjo man nepažįstamomis kalbomis :).
Greita „Google“ paieška pagal „ atkurti sistemos šriftusWindows 7"Ir" standartiniai šriftaiWindows 7“, didelio rezultato nedavė, pasiūlyti sprendimai nepadėjo fkb (natūralu, kad sistemos įdiegimas iš naujo man netiko). Todėl nusprendžiau eiti savo keliu ir iš pradžių tiesiog nukopijavau originalius šriftus iš žinomos įprastos sistemos (priminsiu, kad šriftai saugomi kataloge %windir%\fonts) ir jais pakeitė šriftus savo sistemoje. Sprendimas padėjo tik iš dalies, atsirado galimybė dirbti sistemoje, atsirado mano gimtosios kirilicos simboliai, tačiau šrifto parametrai paliko daug norimų rezultatų. Pirma, pasikeitė kai kurių šriftų dydis arba jų raštas nebeatitinka originalo arba dėl kokių nors priežasčių šriftas tapo paryškintas.
Tačiau man pavyko išsiaiškinti, kaip išspręsti šią problemą. Norėdami tai padaryti, turite iš naujo nustatyti šrifto nustatymus registre, kuriam atsisiųskite toliau pateiktą failą, kuris leidžia atkurti standartinių šriftų asociacijas sistemoje Windows 7. Galite atsisiųsti:
Šis failas atspindi eksportuotą registro avilio turinį HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Fonts Win 7. Pritaikius šį .reg failą, sistemą reikia paleisti iš naujo, štai ir štai! Šriftų problema turėtų išnykti!
Tie. Seka, kuri padėjo man atkurti standartinius sistemos šriftus sistemoje „Windows 7“, yra tokia:
Tikiuosi, kad jei ir jūsų šriftai sugenda, šis sprendimas padės ir jums. Bet kokiu atveju, jei radote alternatyvų metodą, kuris padėjo jūsų situacijoje, nedvejodami pasidalinkite komentaruose. Teoriškai instrukcijos tinka ir tais atvejais, kai norimas šriftas buvo netyčia ištrintas, o jį suradus ir nukopijavus atgal, nesklandumai nedingsta.
PS. Jei po ranka neturite švarios „Windows 7“, archyvą su standartiniais šriftais galite atsisiųsti čia: http://narod.ru/disk/52061075001.99f42303cf1a0ac70dc978dd20406657/original_fonts.zip.html, archyvo dydis yra apie 350 MB.
Pradedant kurti maketą, CSS reikia konkrečiai nurodyti puslapyje naudojamus šriftus. Dažnai skirtingais šriftais dizaineris įveda ne tik pagrindinį puslapio tekstą, bet ir įvairias antraštes, logotipus, monogramas:
Geras dizaineris, kaip ir geras maketuotojas, žino, kad naršyklė puslapiui rodyti gali naudoti tik tuos šriftus, kurie yra įdiegti vartotojo kompiuteryje. Tai yra, šriftus galima suskirstyti į dvi kategorijas:
Jei dizaineris naudojo antros kategorijos šriftus kurdamas, pavyzdžiui, logotipą ar dideles statines antraštes, nedvejodami naudokite šią techniką. Šios technikos naudojimo trūkumas yra nelankstumas. Jei tekste yra pakeitimų, teks perdaryti vaizdą ir pakeisti CSS (pavyzdžiui, jei naujo vaizdo matmenys neatitinka senojo).
Galima sakyti, kad technikos naudojimo pavojus tiesiogiai priklauso nuo teksto keitimo tikimybės. Todėl, pavyzdžiui, bendras puslapio tekstas negali būti rašomas nestandartiniais šriftais! Kompetentingas dizaineris niekada to nepadarytų. O jei dizaineris aptinka žalią, geras maketuotojas tiesiog privalo ištaisyti savo klaidą – makete šį šriftą pakeiskite panašiausiu standartiniu.
Bet kaip atskirti pirmosios grupės šriftus nuo antrosios? Akivaizdu, kad jūs negalite pasikliauti šriftų rinkiniu, įdiegtu tiesiai jūsų kompiuteryje! Išsiaiškinkime.
Standartiniai šriftai yra šriftų, įdiegtų kartu su operacine sistema, rinkinys. Kadangi operacinės sistemos yra skirtingos, skiriasi ir jų šriftų rinkinys. Įvairių „Windows“ versijų standartinių šriftų sąrašą galite rasti, pavyzdžiui, straipsnyje „Standartiniai „Windows“ šriftai, o standartinių „Mac OS“ šriftų sąrašą – puslapyje „Mac OS įtraukti šriftai“. Kalbant apie „Unix“ / „Linux“ operacines sistemas, jos neturi vieno šriftų rinkinio. Daugelis „Linux“ vartotojų naudoja „DejaVu“ šriftų rinkinį, ypač „Ubuntu“, jie yra įdiegti pagal numatytuosius nustatymus. Remiantis http://www.codestyle.org statistika, daugelis Unix/Linux vartotojų taip pat turi įdiegę URW, Free ir kitus šriftų rinkinius. Remiantis ta pačia statistika, daugiau nei 60% „Unix“ / „Linux“ vartotojų savo kompiuteryje turi šriftus iš „Core“ šriftų, skirtų žiniatinkliui, kuriuos iki 2002 m. buvo oficialiai galima nemokamai atsisiųsti „Microsoft“ svetainėje.
Kad puslapis būtų rodomas taip, kaip sumanė dizaineris, bet kurioje operacinėje sistemoje, CSS ypatybėje galima nurodyti kelis šriftus, atskirtus kableliais.
Ši ypatybė nurodo prioritetinį šriftų šeimų pavadinimų ir (arba) bendrųjų šeimos pavadinimų sąrašą. Pagal CSS2 specifikaciją yra dviejų tipų šriftų šeimos pavadinimai:
Taigi, dizainui paimamas standartinis šriftas iš OS Windows, pasirenkamas panašus Mac OS ir Unix/Linux, nurodoma bendra šriftų šeima ir viskas.
Bet tai nėra taip paprasta. Pasigilinkime išsamiau.
Internete istoriškai susiformavo „saugių“ žiniatinklio šriftų sąvoka. Saugus šriftas yra standartas visoms operacinėms sistemoms. Kadangi apie tokią reikalų būklę galima tik pasvajoti, tada Nėra visiškai saugių šriftų!
Kai kurie šriftai gali būti vadinami saugiais su tam tikromis išlygomis.
„Saugių“ šriftų apibrėžimo pagrindas buvo labiausiai paplitusios „Windows“ operacinės sistemos šriftai, kurie naudojami ir kitose operacinėse sistemose. Tokio panaudojimo pavyzdys – jau minėti „Core“ šriftai Web šriftų paketui, kuriuos, pagal statistiką, atsisiuntė daugybė Unix/Linux vartotojų.
Į šį paketą įeina šie šriftai: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Visi jie palaiko kirilicos abėcėlę, kuri yra svarbi Runetai.
Šriftų rinkinys, kuris yra standartinis su Mac OS X (ši OS yra plačiausiai naudojama tarp Mac OS vartotojų), apima visus šriftus iš pagrindinių šriftų, skirtų žiniatinkliui.
Taigi, remiantis kitose operacinėse sistemose naudojamais „Windows“ šriftais, buvo sudarytas toks vadinamasis „saugių“ žiniatinklio šriftų sąrašas:
„Webdings“ šrifte yra piktogramų ir jis negali būti naudojamas turiniui. „Andale Mono“ nėra plačiai naudojamas, nes jis nėra gerai pritaikytas kasdieniam ekrano skaitymui ir ne visi „Windows“ vartotojai jį turi.
Visi „Windows“, „Mac OS X“ naudotojai ir didžioji dauguma „Unix“ / „Linux“ vartotojų (t. y. tie, kurie įdiegė „Core“ šriftus žiniatinklio paketui) turi visus šiuos šriftus.
Bet kaip su likusiais? Juk norisi, kad dizainerio planą pamatytų kuo daugiau vartotojų!
Apie tai skaitykite antroje leidinio dalyje.
Šriftai yra neatsiejama ir labai svarbi svetainės dizaino dalis, pabrėžianti jos individualumą. Straipsnyje bus kalbama apie standartinių šriftų prijungimą prie tinklalapio, jie taip pat vadinami sistemos šriftais.
Bet kuri naršyklė rodo tik tuos šriftus, kurie yra kompiuterio operacinėje sistemoje. Štai kodėl jie vadinami sisteminiais ir pagal numatytuosius nustatymus įdiegiami kartu su operacine sistema.
Ir jie vadinami saugiais šriftais, nes tikėtina, kad jie bus rodomi daugumos svetainės lankytojų naršyklėje.
Tačiau problema ta, kad skirtingose operacinėse sistemose yra įdiegti skirtingi šriftų rinkiniai. Pateiktų šriftų rinkinius kartu su operacine sistema galite peržiūrėti oficialiuose „Windows“ ir „Mac OS“ puslapiuose. O Unix/Linux sistemoje visai nėra standarto.
Kad interneto puslapis būtų rodomas pagal dizainerio sumanymą, CSS buvo įdiegta šrifto ypatybė, vadinama font-family
Šriftų šeimos ypatybė yra šriftų šeimos, sugrupuotos pagal tam tikras savybes.
Bendrosios šeimos:Taip tiesiog parenkami panašūs šriftai iš skirtingų operacinių sistemų ir prijungiami prie interneto puslapio, atskirti kableliais.
Štai pavyzdys, skirtas tik vizualiniam suvokimui. Prie šio pavyzdžio grįšime vėliau, kai apsvarstysime tiesioginį šriftų prijungimą.
Tiesiog vadovaukitės logika ir viskas taps aišku.
Turinys ( šriftų šeima: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; ) Išanalizuokime, kas parašyta:
Remiantis OS Windows, buvo sudarytas kelių saugių šriftų sąrašas.
Visi šie šriftai yra įdiegti „Mac OS X“, „Windows“ ir daugelyje „Unix“ / „Linux“ vartotojų, kurie turi įdiegtus pagrindinius žiniatinklio paketo šriftus.
Kitiems vartotojams pateikiama korespondencijos lentelė. Jame yra panašių šriftų, priklausančių konkrečiai šeimai.
Windows | MacOS | Unix/Linux | protėvių šeima |
---|---|---|---|
Arial Black | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
Arial | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
Komiksas be MS | Monakas CY | * (žr. žemiau) | kursyvus |
Kurjeris Naujas | * (žr. žemiau) | Nimbus Mono L | Monospace |
Gruzija | * (žr. žemiau) | Šimtmečio mokyklėlė L | Serifas |
Poveikis | Charcoal C.Y. | * (žr. žemiau) | Sans-serif |
Times New Roman | Times C.Y. | Nimbus Roman No9 L | Serifas |
Trebuchet MS | Helvetica C.Y. | * (žr. žemiau) | Sans-serif |
Verdana | Ženeva C.Y. | DejaVu Sans | Sans-serif |
* Jungdami šriftus galite tuo drąsiai pasikliauti. Lentelėje palaikomi kirilicos simboliai ir rusiška abėcėlė.
Jei reikia prisijungti pagrindinis viso dokumento šriftas, jums tereikia pridėti šį kodą į CSS stiliaus lapą:
Body ( /* prijungti šriftą prie viso dokumento */ šriftų šeima: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* papildomai nustatykite šrifto dydį */ šrifto dydis: 16 pikselių; / * nustatykite paryškintą šriftą arba vietoj 400 nustatykite reikšmę - normalus */ šrifto svoris: 400 )
Štai kaip sistemos šriftai sujungiami „Bootstrap 4“ sistemoje: Šriftai įtraukiami atsižvelgiant į mobiliuosius įrenginius.
Turinys (šriftų šeima: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto "Helvetica Neue",Arial,sans-serif "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI simbolis"; )
H1, H2, H3, H4, H5, H6 – čia tas pats, tik mes nustatome paryškinimo reikšmę, kad paryškintume antraštes:
H1, h2, h3, h4, h5, h6 (šriftų šeima: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* prijunkite šriftą su antraštėmis */ šrifto svoris: 600; / * nustatykite šrifto svorį arba vietoj 600 nustatykite reikšmę paryškintu */ )
Į priskirti šriftą tik konkrečiai pastraipai, arba blokas, pirmiausia turite priskirti klasę šiam blokui HTML dokumente:
Čia yra pastraipa su papildinio šriftu
Ir CSS lentelėje parašykite šį kodą:
Pagrindinis šriftas (šriftų šeima: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; šrifto svoris: normalus; šrifto dydis: 16 pikselių; )
Dabar kiekvienai žymai – html elementui su .font klase (vadink kaip tik nori) bus priskiriamas Arial šriftas su normaliu (400), paryškinimu ir 16 pikselių dydžiu.
Panašiai galite priskirti skirtingus šriftus li sąrašams, lentelėms, ištisiems div blokams, atskiriems žodžiams ar frazėms.
Šriftai įtraukiami tiesiai į HTML dokumentą taip pat, kaip ir CSS failas, skiriasi tik sintaksė. Šriftus galite įtraukti į dokumento antraštę – tarp žymų
(panašus į CSS failą), arba tiesioginis – tiesiogiai priskiriant ypatybes html žymoms.Įskaitant šriftus antraštėje, tarp žymų
. Norėdami tai padaryti, pridėkite šį kodą prie html dokumento:
Viskas panašu į ryšį CSS faile.
Tiesiogiai į svetainės elementus. Pateiksiu keletą pavyzdžių:
Šrifto prijungimas prie pastraipos
Čia yra pastraipa su tekstu
Atskirą žodį paryškiname paryškintu šriftu ir priskiriame atskirą šriftą nuo pagrindinioČia yra pastraipa su tekstu ir tai žodį, kuris turėtų būti paryškintas pusjuodžiu šriftu
Paryškiname saitą paryškintu šriftu ir priskiriame atskirą šriftą nuo pagrindinioTai paprastas tekstas. Čia nuoroda taip pat yra paprastas tekstas.
Panašiai mes priskiriame šriftus bet kuriai html žymai.
Garsiojo Framework Bootstrap 4 kūrėjai šriftus jungia tokiu būdu, kad beveik bet kuris įrenginys galėtų naudoti standartinius sistemos šriftus.
Turinys (šriftų šeima: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )