Postoji još jedan faktor - anti-aliasing, s kojim nisu svi preglednici (uključujući Chrome) prijatelji kada koriste nestandardne fontove, iako standardni također ne uglađuju sve. Ispada da font postaje uglat, a granice su mu oštre i to nije baš ugodno za čitanje.
U slučaju da trebate koristiti font treće strane, primjerice, s "Google.Fonts", tada najviše pouzdana metoda je stvaranje kompletnog skupa formata fontova, uključujući SVG. Možete ga koristiti, na primjer, samo za zaglavlja.
Ako je font standardni, odmah možete prijeći na CSS metodu u nastavku, jer je vrlo jednostavna i jasna.
Osnovne CSS tehnike za čitljivost fontova
CSS metoda
Ova metoda je vrlo minimalističan, jer za njegovu implementaciju dovoljna su 3 retka koda i dodijelite klasu "title" anti-aliased tekstu. Izglađivanje teksta nastaje zbog sjene i primjenjivo je, možda, za naslove. Ova se metoda može smatrati "hackom".
Naslov (text-shadow: -1px -1px 1px rgba(255,255,255, 0.2), 1px 1px 1px rgba(255,255,255, 0.2), 1px 1px 1px rgba(0,0,0, 0.7); )
CSS3 metoda
Prilikom rješavanja problema izglađivanja fonta u Chromium motoru, na Google.Code, jedan je programer predložio brza odluka na CSS3. Ovo se pokazalo prilično racionalnim, jer možete odbiti SVG i fontove web fontova trećih strana, koji teže oko 200~500 KB i zahtijevaju dodatno vrijeme učitavanja.
Ovaj kod treba dodati u css datoteku:
Tijelo ( -webkit-font-smoothing: subpixel-antialiased !important; -webkit-backface-visibility: skriveno; -moz-backface-visibility: skriveno; -ms-backface-visibility: skriveno; )
* ovaj savjet se koristi za sve naslove ove stranice
Ova metoda ima nekoliko nedostataka:
Problem s kerningom može se riješiti s nečim poput ovog css koda:
Tijelo (veličina fonta: 125%; razmak između slova: 0,05em; visina retka: 1,3em; ) tijelo > * (veličina fonta: 85%; visina retka: 1,3em; )
* Naravno, ove parametre potrebno je malo prilagoditi značajkama stranice
Koju metodu i kako primijeniti individualna je odluka. Ali rezultat je isti lijepi fontovi i sretni čitatelji.
Osim, naravno, ako preglednik nije ažuran.
SVG metoda
Zahtijeva generator web fontova fontsquirrel.com/tools/webfont-generator
Treba preuzeti željeni font u formatu ".otf ili .ttf" i postavite ove postavke:
Složite se sa zahtjevima i kliknite "PREUZMI SVOJ KOMPLET"
Nakon preuzimanja arhive, bit će dovoljno samo povezati SVG font sa web mjestom, ali je poželjno koristiti sve formate.
CSS kod za povezivanje fontova, koji se mogu postaviti u zasebna datoteka:
@font-face (familija fontova: "Open Sans"; src: url("/font/opensans.eot"); src: url("/font/opensans.eot?#iefix") format("embedded-opentype "), url("/font/opensans.woff") format("woff"), url("/font/opensans.ttf") format("truetype"), url("/font/opensans.svg#OpenSansRegular ") format("svg"); font-style: normal; font-weight: normal; )
* u ovaj slučaj svi Open Sans fontovi nalaze se u mapi fontova u korijenu stranice
Par jednostavnih savjeta:
Na ovaj trenutak koristim cijeli set fontova na web-mjestu, uključujući SVG, budući da je metoda pouzdanija i dopušta brzina hostinga. S vremenom, kada to kaže "li.ru". običnog korisnika Runet koristi relativno noviju verziju preglednika, razmislit ću o prelasku na čistu CSS metodu.
Lijep pozdrav, dragi čitatelji.
Danas bih želio razgovarati o takvom alatu kao što je ClearType. Ugrađen je u operativne sustave tvrtke Microsoft. Rješenje omogućuje značajno poboljšanje prikaza teksta na monitoru, bez obzira na njegovu strukturu i parametre. Kasnije u članku objasnit ću što je izglađivanje fonta u sustavu Windows 10 i drugim verzijama, kao i kako ga točno omogućiti.
opće informacije
Kao što je gore spomenuto, Windows nudi poseban alat koji vam omogućuje poboljšanje prikaza teksta. Ovaj element je odvojena tehnologija izglađivanje fonta. Dizajniran je za više ugodno čitanje na zaslonima s tekućim kristalima, tipa TFT, OLED i drugi. Zadnja veza ovaj resurs nije bilo potrebno, jer monitori sa katodna cijev. Istodobno, u verziji Viste gore navedena funkcija bila je automatski uključena, pa su na starijim monitorima likovi izgledali neobično, ružno i imali su neugodan pogled.
Postavljanje ClearType u sustavu Windows 7-10
Mnogi korisnici raznih osobnih računala ili prijenosna računala pitajući se kako omogućiti, konfigurirati ili kako onemogućiti opisani alat. Kako ovo može biti korisno? Kao što je rečeno na početku, neki standardne postavke, postavljeni prema zadanim postavkama, ne samo da ne vode ničemu, već čak i ometaju. U takvim slučajevima font se čini mutnim ili barem neobičnim.
Važno! Potrebno je točno shvatiti da je cijeli problem u ClearTypeu, a ne u pogrešno postavljenoj razlučivosti zaslona. Uostalom, ponekad se i to dogodi. Stoga je bolje prvo provjeriti ovaj parametar, a tek onda konfigurirati ostatak.
Važno! Kako bi sve sljedeće radnje imale učinak, morate imati administratorska prava.
Možete promijeniti prikaz znakova pomoću odgovarajućeg alata:
To je sve. Ako vam se iz nekog razloga iznenada ne sviđa rezultat, uvijek se možete vratiti na ovaj postupak.
Kako instalirati Apple font?
Postoji mnogo mišljenja o tome koji je operativni sustav bolji. Ali postoje neke točke s kojima je gotovo nemoguće raspravljati. Tako, primjerice, nitko ne može tvrditi da je dizajn Mac OS-a bolji od ostatka tržišta. Stoga ga mnogi jednostavno uzimaju kao osnovu.
Unatoč činjenici da Win nudi vlastiti alat za "poboljšanje" prikaza znakova, mnogi ljudi ih žele vidjeti, kao u Mac OS-u. I za ovaj problem postoje dva rješenja. To su male Gdipp i MacType aplikacije.
Prvi je otvoreni projekt, čiji je posao da alternativna metoda rukovanje fontovima u Win-u. U isto vrijeme, osiguran je gladak, i što je najvažnije, ugodan stil za percepciju. Obično se nalazi u Apple OS i Linux distribucijama.
Gdipp podržava Microsoftove 32-bitne i x64-bitne sustave. Što korisnici trebaju učiniti? Samo idite na službeni resurs za razvojne programere, preuzmite najnovija gradnja i instalirati.
Važno je napomenuti da se u nekim aplikacijama prikaz teksta može činiti neugodnim.
To se događa kao rezultat razlika u standardima arhitekture.
Osim toga, MacType rješenje je vrlo popularno. Općenito, obavlja iste funkcije kao i prethodni alat. Ali u isto vrijeme ima dodatne mogućnosti, od kojih je jedan za pokretanje na Windows build 1703.
ClearType tehnologija dizajnirana je za bolji prikaz fontova na LCD monitorima.
U sustavu Windows 7 izglađivanje fonta omogućeno je prema zadanim postavkama i postavljeno na automatsko, prema Tehničke specifikacije vaš monitor. Ako a automatske postavke niste zadovoljni, možete ručno podesiti ClearType postavke.
Priprema za postavljanje ClearType
Da biste ispravno konfigurirali izglađivanje fonta pomoću tehnologije ClearType, morate učiniti sljedeće:
1. Instalirajte najviše nova verzija upravljački program video kartice. Ovaj upravljački program mora napisati proizvođač vaše grafičke kartice posebno za Windows 7.
2. Instalirajte najnoviji upravljački program za monitor kompatibilan sa sustavom Windows 7.
3. Postavite razlučivost zaslona na kojoj će vam biti ugodno raditi.
4. Ispunite ako to već niste učinili.
Postavka ClearType
1. Za podešavanje postavki izglađivanja fonta kliknite Start, upišite niz za pretraživanje naredba cttune i pritisnite Enter.
Proces podešavanja glačanja fonta ne bi trebao biti težak.
1. Da biste onemogućili izglađivanje fonta u sustavu Windows 7, otvorite Upravljačka ploča -> Sustav -> Dodatne mogućnosti sustava.
2. Otvorite Mogućnosti izvedbe i na kartici Vizualni efekti poništite okvir Glatki nazubljeni zaslonski fontovi.
3. Pritisnite u redu dvaput.
Sada možete pronaći fontove u programskom sučelju i operacijski sustav prikazano previše uglato i premalo. Razlog je što je u Windows 7 "Segoe UI" postavljen kao glavni font, ima različite skale i dizajniran je za anti-aliasing.
Podešavanje fontova sustava kada je anti-aliasing onemogućen
1. Za prilagodbu normalan pogled prozori, otvoreni Upravljačka ploča -> Personalizacija -> Boja i izgled prozori -> Napredne opcije izgleda...
2. Padajući popis kontrolira opcije prikaza za većinu elemenata Windows sučelje 7. Postavite font Tahoma, veličina fonta 8 u sljedećim stavkama padajućeg popisa:
- Opis alata
- Odabrana stavka izbornika
- Naziv aktivnog prozora
- Naslov neaktivnog prozora
- Ikona
- Naziv ploče
- okvir za poruke
- Traka izbornika
Imajte na umu da u ovom prozoru postavki postoje dva polja "Veličina". Gornja margina je veličina elementa Windows sučelja, a donja margina je veličina fonta. Na ovaj način, da biste prilagodili veličinu fonta, napravite promjene na donjoj margini, a gornju marginu ostavite nepromijenjenu.
3. U stavku Gumbi za kontrolu prozora postavite veličinu 21 (u gornjem polju "Veličina") za spremanje standardne veličine Gumbi Zatvori, Minimiziraj i Maksimiziraj.
4. Pritisnite u redu.
Ekran i fontovi
Novi članci
Komentari (10) na “Upravljanje ClearTypeom - izglađivanje fonta u sustavu Windows 7”
Ovo je sve jasno ... A što učiniti s "skaliranjem" fontova kada je promjena razlučivosti zaslona manja od "preporučene"? Opet, isti anti-aliasing je uključen ... iako se čini da je svugdje onemogućen ... čak iu registru. Kako onemogućiti skaliranje pri _niskoj_ razlučivosti zaslona?
LAV, nismo ništa napisali o registru. Inače ste onemogućili Cleartype, pa ne možemo ništa preporučiti. Prema našem vodiču, izglađivanje fonta potpuno je isključeno i ne uključuje se prilikom promjene rezolucije i skaliranja.
U početku sam ga isključio na isti način kao u vašem članku, a tek onda ušao u registar. Problem je već riješen. Završila je u neispravan vozač za moju video karticu, koja instalira Windows 7 i ne želi je zamijeniti originalnom. Ovaj upravljački program normalno prikazuje fontove samo u "preporučenoj" rezoluciji, au drugim rezolucijama ih počinje "gladiti". Snimak zaslona, na kojem font nije izglađen, uspjeli smo popraviti da se zapravo fontovi prikazuju normalno i samo se prikazuju na ekranu u već "izglađenom" obliku.
Microsoftova tehnička podrška brzo je radila i popravila upravljački program.
Zanimljivo ... Kakav upravljački program i koji model video kartice?
Za mene, ClearType radi dobro čak i na mom CRT monitoru. Svi fontovi izgledaju puno bolje od uobičajenog anti-aliasinga
Ovisi o vozaču. Prije izdavanja novih upravljačkih programa za moju nVidia, isključio sam anti-aliasing (bilo je zamućenja), a sada, nakon instaliranja novih upravljačkih programa, koristim anti-aliasing.
ljudi, ne razumijem gdje ste dobili personalizaciju na upravljačkoj ploči? ... Nemam takvu stavku, unatoč činjenici da se Windows suočava s ...
Pavao, otvorite upravljačku ploču u načinu prikaza " velike ikone", na primjer. "Personalizacija" je nakon "Mogućnosti mape", a prije "Veze s udaljenom radnom površinom".
Postoji li način da se izglađivanje fonta postavi na "Normalno" u sustavu Windows 7? Ovaj način je u XP-u, u sedam ga nisam našao.
Zašto ga želim instalirati? Ne želim biti izglađen mala slova, jer mom oku je neugodno i neobično, baš kao i non-aliasing velikih fontova.
Kako u Windows 7 osigurati da fontovi do 15 px nisu anti-aliased, ali od 15 px i više su anti-aliased?
Hvala unaprijed.
Aleksej, nema šanse.
Često tekst na web stranici izgleda nekako uglato, grubo. Međutim, tekst u različitim fontovima može izgledati drugačije u različitim veličinama.
Ima i trenutaka kada samo moli da se tekst podeblja, ali preglednik prikazuje tekst samo podebljano ili ne podebljano.
Što se tiče izglađivanja fonta, moram reći da neki preglednici na nekim operativnim sustavima sve sami izglađuju. Da, iu samom operativnom sustavu možete omogućiti izglađivanje fonta. Na primjer, u sustavu Windows XP, anti-aliasing se konfigurira ovdje - Start -> Postavke -> Upravljačka ploča -> Zaslon -> Kartica Izgled -> Gumb Efekti -> Primijeni sljedeća metoda glačanje fonta zaslona -> ClearType -> Ok. Sve i svašta u OS-u bit će izglađeno.
Ali kako dobiti glačanje fontova na našoj stranici u pregledniku uvijek je funkcioniralo, bez obzira na preglednik, operativni sustav i postavke.
Predlažem jednu od opcija za izglađivanje fonta - korištenje Cufon biblioteke.
Ovo je javascript biblioteka.
Ispada da je tekst pri korištenju Cufona anti-aliasiran. U tom slučaju Javascript mora biti omogućen u pregledniku.
Podržani su sljedeći preglednici:
- Internet Explorer 6, 7 i 8
- Internet Explorer 9 beta (od 1.09i)
- Mozilla Firefox 1.5+
- Safari 3+
- Opera 9.5+
- Google Chrome 1.0+
- iOS 2.0+
- Opera Mini (do određenog stupnja)
Primjer izglađivanja:
Rezultat na licu.
Mane ovog pristupa
- Javascript mora biti omogućen. Ali mislim da je to omogućeno mnogim korisnicima.
- Učitavanje JS datoteka. Veličina može doseći do 200 kb. Ovisno o fontu.
- Tekst se ne može odabrati ili kopirati. Kao opcija - koristite Cufon samo u nekim dijelovima stranice - tekst u navigacijskom izborniku, zaglavlje. Za sadržaj koji neće trebati kopirati.
- Ako je veza podcrtana, nakon primjene biblioteke, podcrtavanje nestaje. Nedostatak knjižnice.
- Dizajn pri lebdenju iznad elementa mora se posebno opisati. Nije preuzeto iz stilova. Međutim, ostatak dizajna bit će u skladu s listom stilova.
Možda su to sve mane. U nekim situacijama oni će biti značajni, ali u većini slučajeva mogu se zanemariti. Pogotovo u onim slučajevima kada je dizajner nacrtao, dizajn je prihvaćen i potrebno ga je učiniti glatkim i blago podebljanim kao u dizajnu (u Photoshopu vole staviti Faux Bold).
Još jednom se vraćam na video tečaj TutsPlusa pod nazivom “TutsPlus - PSD u minimalni portfelj WordPressa”, tamo sam našao puno novih i zanimljivih stvari.
Ovaj put pitanje će biti o nekretnini
, pa sam odvojio vrijeme posebno za ovo pitanje kako bih ga detaljnije razumio. Prije svega, otišao sam na htmlbook.ru - nezamjenjiv izvor znanja za dizajnera html izgleda.Naravno, bilo je detaljne informacije o izglađivanju fonta i kontroli ovog procesa putem CSS-a. Članak se zove “Izglađivanje fonta u Safariju” i poslužio je kao osnova za moj članak.
Prvo je što je izglađivanje fonta i zašto je potrebno. Za ono što vam treba, možete pogoditi i tako, bez ikakvih resursa i članaka, jer sam naziv govori za sebe. Izglađivanje fonta je kako bi njihov stil na izlaznom uređaju (monitor i bilo koji drugi zaslon) bio glatkiji. To jest, granice fonta postaju glatke i jasne. Naravno, tekst stvoren takvim fontom je ugodniji za čitanje i oči nisu toliko umorne od takvog procesa.
Ali metoda (a ovo je druga točka) kojom se postiže takvo poboljšanje stila fonta nije tako očita. Možete čak reći i više - potpuno je neočekivano. Ranije sam slučajno vidio takvu sliku nekoliko puta, ali tada mi se činilo da je to "greška" monitora, njegova nesposobnost da ispravno "crta" slova fonta.
Sada znam da je ovaj prikaz fonta napravljen namjerno, bojenjem piksela koji se nalaze na rubovima slova, u različite boje. Odnosno, ispada da je boja piksela za cijelo slovo fonta neujednačena (recimo crna), ali se sastoji od nekoliko boja.
Ali evo paradoksa – ljudsko oko to ne primjećuje ova činjenica, već upravo suprotno - takav prikaz slova slova njemu se čini jasnijim i glatkijim. Da ne bih dalje opisivao što je što i koliko, dat ću sliku koju sam drsko "zviždao" sa stranice htmlbook.ru, jer je nisam mogao sam napraviti:
U popularnim operativnim sustavima ova se tehnologija dugo koristi pod različita imena, na primjer u sustavu Windows ima zaštićeno ime ClearType. Međutim, uz pomoć css svojstva
radio u pregledniku, u njegovim postavkama morate postaviti prikaz fontova koji se razlikuje od standarda operativnog sustava Windows.Stoga ne možete tražiti takvu postavku u pregledniku Firefox - jednostavno je nema. Ali u Safariju postoji takva postavka (u Chromeu su moji pokušaji također bili neuspješni):
Pa, dosta o preglednicima - prijeđimo na CSS i svojstva
- anti-aliasing je općenito onemogućen;U nastavku ću dati sva tri primjera prikazivanja teksta Safari preglednik za svaku od vrijednosti imovine
ovo je općenito horor - ništa se ne čita, pa to odbacimo i zaboravimo (u Firefox preglednici, Chrome i ostali će se svi ispravno prikazati budući da nemaju sličnu postavku kao Safari).Drugi slučaj
sličan drugom, ali tekst izgleda malo podebljano, što nije tako lijepo kao prethodni slučaj. jasno je da je glavno svojstvo u HTML predlošku Adija Purdile: -webkit-font-smoothing : antialiased ;… stvari nisu otišle puno dalje.
