Standardne pisave za Word. Standardni sklad pisav
Izbira standardna pisava, ki ga uporablja določen operacijski sistem, lahko izboljša delovanje. To velja za vse varno za internet» pisava. Prednost "sistemskih" pisav je, da se ujemajo s tistimi, ki jih operacijski sistem že uporablja, tako da bo uporabnik udobno bral besedilo.
Razvrstitev sistemskih pisav:
OS | Različica | Sistemska pisava |
Mac OS X | El Capitan | San Francisco |
Mac OS X | Yosemite | Helvetica Neue |
Mac OS X | Mavericks | Lucida Grande |
Windows | Vista | Uporabniški vmesnik Segoe |
Windows | XP | Tahoma |
Windows | 3.1 zame | Microsoft Sans Serif |
Android | Sladoledni sendvič (4.0)+ | Roboto |
Android | Cupcake (1.5) do satja (3.2.6) | Droid Sans |
Ubuntu | Vse različice | Ubuntu |
Pojdimo k kodi
Iz uvoda je razvidno, da s prihodom novih različic operacijskih sistemov prihajajo tudi nove pisave in z njimi potreba po posodabljanju standardne pisave za spletno mesto.
1. način: Sistemske pisave na ravni elementa
Chrome in Safari sta nedavno predstavila " sistemski ui" je univerzalna družina pisav, ki se lahko uporablja namesto " -jabolčni sistem"in" BlinkMacSystemFont". Eden od načinov uporabe sistemskih pisav je, da jih pokličete neposredno na element z uporabo lastnosti družine pisav.
GitHub uporablja to metodo na svojem spletnem mestu z uporabo sistemskih pisav v telesu:
/* Sistemske pisave uporablja GitHub */ body ( družina pisav: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Simbol uporabniškega vmesnika Segoe";
Tako Medium kot skrbnik WordPress uporabljata podoben pristop. Najbolj podprt je Oxygen Sans ( ustvarjen za operacijski sistem GNU+Linux) in Cantarell (ustvarjen za operacijski sistem GNOME).
Ta primer prikazuje tudi podporo za nekatere vrste emotikonov in simbolov:
/* Sistemske pisave, kot jih uporabljata Medium in WordPress */ body (družina pisav: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; )
Opomba: ta način je mogoče uporabiti samo za družino pisav CSS standardne pisave namesto krajše pisave.
2. način: Sistemski skladi pisav
Omejitev prve metode je, da mora poklicati celoten sklad pisave vsakič, ko je uporabljena za element. In to lahko napihne kodo, odvisno od tega, kje in kako se uporablja.
Alternativna metoda, pri kateri so sistemske pisave deklarirane z lastnostjo @font-face. Prednost tega je, da lahko pisave deklarirate enkrat in jih nato uporabite z lastnostjo družine pisav namesto dolgega seznama pisav vsakič.
Standardne pisave na spletnem mestu so tiste pisave, ki so privzeto nameščene v računalniku uporabnika, ki si ogleduje spletno mesto.Noben brskalnik privzeto ne prenese ali namesti pisav iz virov tretjih oseb. Zato se pogosto pojavlja problem "nestandardnih" pisav. Recimo, da se je spletni skrbnik odločil, da bo na spletnem mestu naredil lepo pisavo, jo navedel v kodi, vendar večina uporabnikov spletnega mesta te pisave nima nameščene v svojem operacijskem sistemu.
Brskalnik bo to pisavo seveda poskušal zamenjati z eno od nameščenih, vendar spletno mesto sploh ne bo prikazano tako, kot je bilo prvotno predvideno. Seveda obstajajo tehnologije, ki vam omogočajo, da zaobidete to omejitev, vendar je bolje, da to storite v skrajnih primerih, ko preprosto ne morete brez pisav tretjih oseb.
Torej, kaj je ta "standardni niz" pisav? Spodaj je seznam vnaprej nameščenih pisav operacijskega sistema (pisave, priporočene za uporabo na spletnih mestih, so označene):
Ime pisave | Windows 2000 | Windows XP | Vista | Windows 7 | zmaga 8 |
Arial | + | + | + | + | + |
Arial črna | + | + | + | + | + |
Knjiga Antiqua | + | ||||
Calibri | + | + | + | ||
Cambria | + | + | + | ||
Candara | + | + | + | ||
Comic Sans MS | + | + | + | + | + |
Consolas | + | + | + | ||
Constantia | + | + | + | ||
Corbel | + | + | + | ||
Kurir | + | + | + | + | + |
Kurir Novo | + | + | + | + | + |
Estrangelo Edesa | + | + | + | + | |
Franklin Gothic Medium | + | + | + | + | |
Gautami | + | + | + | + | |
Gabriola | + | + | |||
Georgia | + | + | + | + | + |
Georgia Italic Impact | + | ||||
Vpliv | + | + | + | + | + |
Latha | + | + | + | + | |
Lucida konzola | + | + | + | + | + |
Lucida Sans Console | + | + | + | + | |
Lucida Sans Unicode | + | + | + | + | + |
Marlett | + | + | + | + | + |
Moderno | + | + | |||
Sodobni MS Sans Serif | + | ||||
MS Sans Serif | + | + | + | + | + |
MS Serif | + | + | + | + | + |
MV Boli | + | + | + | + | |
Nyala | + | + | + | ||
Palatino linotip | + | + | + | + | + |
Roman | + | + | + | + | + |
Skripta | + | + | + | + | + |
Segoe Print | + | + | + | ||
Skript Segoe | + | + | + | ||
Uporabniški vmesnik Segoe | + | + | + | ||
Majhne pisave | + | + | |||
Simbol | + | + | + | + | + |
Tahoma | + | + | + | + | + |
Tempus Sans ITC | + | ||||
Times New Roman | + | + | + | + | + |
Trebuchet MS | + | + | + | + | + |
Tunga | + | + | + | + | |
Verdana | + | + | + | + | + |
Webdings | + | + | + | + | + |
Westminster | + | ||||
Wingdings | + | + | + | + | + |
Kako izgledajo standardne pisave.
Windows Vista, Internet Explorer 7, omogočen ClearType (kliknite sliko za ogled polne velikosti)Windows Vista, Firefox 2.0, omogočen ClearType (kliknite sliko za ogled polne velikosti)
Mac OS X 10.4.8, Firefox 2.0, omogočen ClearType (kliknite sliko za ogled polne velikosti)
Windows 2000, IE 6.0 (kliknite na sliko za ogled polne velikosti)
Ta seznam vsebuje pisave, ki so skupne vsem trenutnim operacijskim sistemom Windows (pravzaprav od Windows 98 naprej) in njihove enakovrednosti v Mac OS. Take pisave včasih imenujemo "pisave, varne za brskalnik" ( pisave, varne za brskalnik). To je majhen priročnik, ki ga uporabljam, ko izdelujem spletne strani, in mislim, da bo koristen tudi vam.Če ste novi v spletnem oblikovanju, morda razmišljate nekako takole: »Zakaj bi moral biti omejen na tako majhen nabor pisav? Imam ogromno zbirko čudovitih pisav!« Dejstvo je, da brskalnik obiskovalca lahko prikaže le tiste pisave, ki so nameščene v njegovem operacijski sistem ( pribl. prevajalec: Trenutno je pri oblikovanju strani z uporabo CSS 3 in njegove nove lastnosti že mogoče uporabiti skoraj vse pisave @font-face; vendar vsi brskalniki še ne podpirajo te funkcije), kar pomeni, da vsak obiskovalec vaše strani mora biti lastnik pisav, ki ste jih izbrali. Zato morate uporabljati samo pisave, ki so na voljo v vsakem operacijskem sistemu. Na srečo ima CSS lastnost @font-družina, kar olajša to nalogo.
Seznam
@font-family pomen | Windows | Mac | družina |
---|---|---|---|
Arial, Helvetica, sans-serif | Arial | Arial, Helvetica | sans-serif |
"Arial Black", Gadget, sans-serif | Arial črna | Arial Black, Gadget | sans-serif |
"Comic Sans MS", kurziv | Comic Sans MS | Comic Sans MS 5 | kurziv |
"Courier New", Courier, monospace | Kurir Novo | Kurir Novo, Kurir 6 | monospace |
Gruzija, Serif | Gruzija 1 | Georgia | serif |
Impact, oglje, sans-serif | Vpliv | Impact 5, oglje 6 | sans-serif |
"Lucida Console", Monako, monospace | Lucida konzola | Monako 5 | monospace |
"Lucida Sans Unicode", "Lucida Grande", sans-serif | Lucida Sans Unicode | Lucida Grande | sans-serif |
"Palatino Linotype", "Book Antiqua", Palatino, serif | Palatino Linotype, Book Antiqua 3 | Palatino 6 | serif |
Tahoma, Ženeva, sans-serif | Tahoma | Ženeva | sans-serif |
"Times New Roman", Times, serif | Times New Roman | Times | serif |
"Trebuchet MS", Helvetica, sans-serif | Trebuchet MS 1 | Helvetica | sans-serif |
Verdana, Ženeva, sans-serif | Verdana | Verdana, Ženeva | sans-serif |
Simbol | Simbol 2 | Simbol 2 | - |
Webdings | Vezice 2 | Vezice 2 | - |
Wingdings, "Zapf Dingbats" | Wingings 2 | Zapf Dingbats 2 | - |
"MS Sans Serif", Ženeva, sans-serif | MS Sans Serif 4 | Ženeva | sans-serif |
"MS Serif", "New York", serif | MS Serif 4 | New York 6 | serif |
1 Pisavi Georgia in Trebuchet MS sta priloženi operacijskemu sistemu Windows 2000/XP in sta vključeni v paket pisav IE (in sta dejansko priloženi številnim Microsoftovim aplikacijam), tako da sta nameščeni na številnih računalnikih z operacijskim sistemom Windows 98.
2 Pisave Symbol so prikazane samo v Internet Explorerju; v drugih brskalnikih so običajno nadomeščene s standardno pisavo (čeprav je na primer pisava Symbol prikazana v Operi in Webdings v Safariju).
3 Pisava Book Antiqua je skoraj enaka pisavi Palatino Linotype; Palatino Linotype je na voljo z Windows 2000/XP, Book Antiqua pa z Windows 98.
4 Upoštevajte, da te pisave niso TrueType, ampak bitne slike, zato so lahko videti slabo pri nekaterih velikostih (zasnovane so za prikaz z 8, 10, 12, 14, 18 in 24 pt pri 96 DPI).
5 Te pisave delujejo samo v Safariju v standardnem slogu, vendar ne delujejo v krepkem ali poševnem tisku. Comic Sans MS deluje tudi v krepkem tisku, vendar ne v ležečem tisku. Zdi se, da drugi brskalniki Mac dobro posnemajo lastnosti manjkajočih pisav (hvala Christianu Fecteauju za namig).
6 Te pisave so v sistemu Mac nameščene samo s klasično namestitvijo
Posnetki zaslona
- Mac OS X 10.4.8, Firefox 2.0, omogočen ClearType (zahvala Jurisu Vecvanagsu za posnetek zaslona)
- Mac OS X 10.4.4, Firefox 1.5, omogočen ClearType
- Mac OS X 10.4.11, Safari 3.0.4, omogočen ClearType (hvala Nolanu Gladiusu za posnetek zaslona)
- Mac OS X 10.4.4, Safari 2.0.3, omogočen ClearType (zahvala Ericu Zaveskyju za posnetek zaslona)
- Windows Vista, Internet Explorer 7, omogočen ClearType
- Windows Vista, Firefox 2.0, ClearType omogočen (zahvala Michielu Bijlu za posnetek zaslona)
Pisave so sestavni in zelo pomemben del oblikovanja spletne strani, saj poudarjajo njeno individualnost. Članek bo govoril o povezovanju standardnih pisav s spletno stranjo, imenujemo jih tudi sistemske pisave.
Sistemske, standardne, varne pisave
Vsak brskalnik prikaže samo tiste pisave, ki so prisotne v operacijskem sistemu računalnika. Zato se imenujejo sistemske in so privzeto nameščene skupaj z operacijskim sistemom.
Imenujejo se varne pisave, ker bodo verjetno prikazane v brskalniku večine obiskovalcev spletnega mesta.
Toda težava je v tem, da različni operacijski sistemi namestijo različne nabore pisav. Nabore priloženih pisav skupaj z operacijskim sistemom si lahko ogledate na uradnih straneh Windows in Mac OS. In v Unixu/Linuxu sploh ni standardnega nabora.
Da bi bila spletna stran prikazana v skladu z idejo oblikovalca, je bila v CSS nameščena lastnost pisave, imenovana font-family.
lastnost družine pisav
Lastnost družine pisav so družine pisav, razvrščene po določenih značilnostih.
Generične družine:- serif - pisave s serifi na koncu;
- sans-serif - sans-serif pisave;
- kurzivne - poševne pisave;
- fantazijske - dekorativne pisave;
- monospace - monospace pisava (s črkami enake širine).
Na ta način se preprosto izberejo podobne pisave iz različnih operacijskih sistemov in se povežejo z internetno stranjo, ločene z vejicami.
Tukaj je primer, samo za vizualno zaznavo. K temu primeru se bomo vrnili pozneje, ko bomo razmišljali o neposrednem povezovanju pisav.
Samo sledite logiki in vse bo kristalno jasno.
Telo ( družina pisav: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; ) Analizirajmo napisano:
- OS Windows - Arial;
- OC Mac OS - Helvetica CY;
- OC Unix/Linux - Nimbus Sans L;
- Generična družina - sans-serif.
Tako imenovane varne pisave
Na podlagi OS Windows je bil sestavljen seznam več varnih pisav.
- Arial
- Arial črna
- Comic Sans MS
- Kurir Novo
- Georgia
- Vpliv
- Times New Roman
- Trebuchet MS
- Verdana
Vse te pisave so nameščene v sistemih Mac OS X, Windows in številnih uporabnikih Unix/Linux, ki imajo nameščene osnovne pisave za spletni paket.
Za druge uporabnike je na voljo korespondenčna tabela. Vsebuje podobne pisave, ki pripadajo določeni družini.
Tabela ujemanja in pripadnosti pisav določeni družini:
Windows | Mac OS | Unix/Linux | družina prednikov |
---|---|---|---|
Arial črna | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
Arial | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
Comic Sans MS | Monako CY | * (glej spodaj) | kurziv |
Kurir Novo | * (glej spodaj) | Nimbus Mono L | Monospace |
Georgia | * (glej spodaj) | Century Schoolbook L | Serif |
Vpliv | Oglje C.Y. | * (glej spodaj) | Sans-serif |
Times New Roman | Times C.Y. | Nimbus Roman No9 L | Serif |
Trebuchet MS | Helvetica C.Y. | * (glej spodaj) | Sans-serif |
Verdana | Ženeva C.Y. | DejaVu Sans | Sans-serif |
* Pri povezovanju pisav se lahko varno zanesete na to. Tabela podpira cirilico in rusko abecedo.
Povezovanje sistemskih pisav s spletnim mestom
Če se morate povezati glavna pisava za celoten dokument, morate le dodati naslednjo kodo v slogovno datoteko CSS:
Telo ( /* povežite pisavo s celotnim dokumentom */ družina pisav: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* dodatno nastavite velikost pisave */ velikost pisave: 16px; / * nastavite krepko pisavo ali namesto 400 nastavite vrednost - normalno */ font-weight: 400 )
In tako so sistemske pisave povezane v ogrodju Bootstrap 4: Pisave so vključene z mislijo na mobilne naprave.
Telo (družina pisav: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; )
Določanje pisave za naslove
H1, H2, H3, H4, H5, H6 - tukaj enako, le da nastavimo vrednost krepkosti, da označimo naslove:
H1, h2, h3, h4, h5, h6 ( družina pisav: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* poveži pisavo z naslovi */ teža pisave: 600; / * nastavite težo pisave ali namesto 600 nastavite vrednost na krepko */ )
Pisavo dodelimo samo odstavkom:
p ( družina pisav: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; teža pisave: normalna; velikost pisave: 16 slikovnih pik; ) Vrstica za vrstico je videti takole:- Pisavo povežemo z odstavki, lahko jo uporabimo za li sezname, div bloke, obrazce in druge elemente;
- Nastavite debelino pisave ali namesto 600 vrednost nastavite na krepko;
- Dodatno nastavimo velikost pisave za odstavke.
Za dodelite pisavo samo določenemu odstavku ali blok, morate temu bloku v dokumentu HTML najprej dodeliti razred:
Tukaj je odstavek s pisavo vtičnika
In v tabelo CSS zapišite naslednjo kodo:
Glavna pisava ( družina pisav: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; teža pisave: običajna; velikost pisave: 16 slikovnih pik; )
Zdaj bo vsaki oznaki - elementu html z razredom .font (imenujte ga, kakor želite) dodeljena pisava Arial z normalno (400), krepkostjo in velikostjo 16 slikovnih pik.
Podobno lahko dodelite različne pisave seznamom li, tabelam, celotnim blokom div, posameznim besedam ali frazam.
Povezovanje pisav neposredno v dokumentu HTML
Pisave so vključene neposredno v dokument HTML na enak način kot datoteka CSS, razlika je le v sintaksi. Pisave lahko vključite v glavo dokumenta – med oznake
(podobno datoteki CSS) ali inline – dodeljevanje lastnosti neposredno oznakam html.Vključno s pisavami v glavi, med oznakami
. Če želite to narediti, dodajte to kodo v dokument html:
Vse je podobno povezavi v datoteki CSS.
Povezovanje pisav v vrstici
Neposredno na elemente spletnega mesta. Naj vam navedem nekaj primerov:
Povezovanje pisave z odstavkom
Tukaj je odstavek z besedilom
Ločeno besedo označimo s krepkim tiskom in dodelimo ločeno pisavo od glavneTukaj je odstavek z besedilom in to beseda, ki naj bo označeno s krepkim tiskom
Povezavo označimo s krepko pisavo in dodelimo ločeno pisavo od glavneTudi tukaj je povezava preprosto besedilo.
Podobno dodelimo pisave kateri koli oznaki html.
Opomba - sistemske pisave v Bootstrap 4
Razvijalci slavnega Framework Bootstrap 4 povezujejo pisave na naslednji način, tako da lahko skoraj vsaka naprava uporablja svoje standardne sistemske pisave.
Telo (družina pisav: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )