Postoji još jedan faktor - anti-aliasing, s kojim nisu svi pretraživači (uključujući Chrome) ljubazni kada koriste nestandardne fontove, iako ni standardni ne izglađuju sve. Ispostavilo se da font postaje ugao, a granice su mu oštre i to nije baš ugodno za čitanje.
U slučaju da trebate koristiti font treće strane, na primjer, sa "Google.Fonts", tada najviše pouzdana metoda je kreiranje punog skupa formata fontova, uključujući SVG. Možete ga koristiti, na primjer, samo za naslove.
Ako je font standardan, odmah možete prijeći na CSS metodu koja se nalazi ispod, jer je vrlo jednostavna i jasna.
Osnovne CSS metode za čitljivost fontova
CSS metoda
Ova metoda je vrlo minimalističan, jer su za njegovu implementaciju dovoljne samo 3 linije koda i dodijeliti klasu “title” anti-aliased tekstu. Izglađivanje teksta nastaje zbog sjene i primjenjivo je samo za naslove. Ova metoda se može smatrati „hackom“.
Naslov (sjena teksta: -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 engine-u, predložio je jedan programer na Google.Code brza odluka na CSS3. Ovo se pokazalo vrlo racionalnim, jer možete napustiti SVG i web fontove trećih strana, koji su teški oko 200~500 KB i zahtijevaju dodatno vrijeme učitavanja.
Ovaj kod treba dodati u css fajl:
Tijelo ( -webkit-font-smoothing: subpixel-antialiased !važno; -webkit-backface-visibility: skriveno; -moz-backface-visibility: skriveno; -ms-backface-visibility: skriveno; )
* ovaj savjet se koristi za sva zaglavlja na ovoj stranici
Ova metoda ima nekoliko nedostataka:
Problem sa kerningom može se riješiti nečim poput ovog CSS koda:
Body (veličina fonta: 125%; razmak između slova: 0,05em; visina reda: 1,3em; ) tijelo > * (veličina fonta: 85%; visina reda: 1,3em; )
* naravno, ove parametre treba malo prilagoditi kako bi odgovarali karakteristikama stranice
Koji metod i kako ga primijeniti je individualna odluka. Ali rezultat je isti - prelepi fontovi i zadovoljnih čitalaca.
Ako je, naravno, pretraživač ažuriran.
SVG metoda
Trebat će vam generator web fontova fontsquirrel.com/tools/webfont-generator
Treba preuzeti željeni font u formatu “.otf ili .ttf” i postavite ove postavke:
Prihvatite zahtjeve i kliknite na “PREUZMI SVOJ KIT”
Nakon preuzimanja arhive potrebno je samo da povežete SVG font sa sajtom, ali je preporučljivo koristiti sve formate.
CSS kod za povezivanje fontova u koji se može postaviti zaseban fajl:
@font-face ( font-family: "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: normalan; font-weight: normal; )
* V u ovom slučaju svi Open Sans fontovi se nalaze u folderu "font" u korijenu stranice
Par jednostavnih savjeta:
On ovog trenutka ja koristim full set fontove na stranici, uključujući SVG, jer je metoda pouzdanija i brzina hostinga dozvoljava. Vremenom, kada “li.ru” to kaže redovni korisnik Runet koristi prilično noviju verziju pretraživača, razmišljam o prelasku na čistu CSS metodu.
Pozdrav dragi čitaoci.
Danas bih želio govoriti o takvom alatu kao što je ClearType. Ugrađen je u Microsoft operativne sisteme. Rješenje vam omogućava da značajno poboljšate prikaz teksta na monitoru, bez obzira na njegovu strukturu i parametre. Kasnije u članku ću vam reći šta je izglađivanje fontova u Windowsu 10 i drugim verzijama, kao i kako ga tačno omogućiti.
opće informacije
Kao što je gore spomenuto, Windows pruža poseban alat koji vam omogućava da poboljšate prikaz teksta. Ova stavka je odvojena tehnologija izglađivanje fonta. Dizajniran je za više lako čitanje na displejima sa tečnim kristalima, TFT tip, OLED i drugi. Poslednja veza ovog resursa nije bio potreban, budući da monitori sa katodna cijev. Istovremeno, u verziji Vista, gore opisana funkcija je automatski omogućena, pa su na starim monitorima simboli izgledali neobično, ružno i izgledali su nezgodno za gledanje.
Postavljanje ClearTypea u Windows 7-10
Mnogi korisnici raznih personalni računari ili laptope zanima kako omogućiti, konfigurirati ili onemogućiti opisani alat. Kako ovo može biti korisno? Kao što je rečeno na samom početku, neki standardne postavke, instaliran prema zadanim postavkama, ne samo da ne vodi ničemu, već čak i ometa. U takvim slučajevima, font izgleda zamućen ili barem neuobičajen.
Bitan! Morate jasno shvatiti da je cijeli problem u ClearTypeu, a ne u pogrešno podešenoj rezoluciji ekrana. Na kraju krajeva, ponekad se to dešava. Stoga je bolje prvo provjeriti ovaj parametar, a tek onda konfigurirati ostalo.
Bitan! Da bi sve naredne radnje stupile na snagu, morate imati administratorska prava.
Možete promijeniti prikaz simbola koristeći odgovarajući alat:
To je sve. Ako vam se iz nekog razloga iznenada ne sviđa rezultat, uvijek se možete vratiti na ovu proceduru.
Kako instalirati Apple font?
Postoji mnogo mišljenja o tome koji je operativni sistem bolji. Ali postoje određene tačke s kojima je gotovo nemoguće raspravljati. Na primjer, niko ne može tvrditi da je dizajn Mac OS-a bolji od ostatka tržišta. Zato ga mnogi ljudi jednostavno uzimaju kao osnovu.
Uprkos činjenici da Win ima svoj alat za "poboljšanje" prikaza simbola, mnogi ljudi žele da ih vide kao u Mac OS-u. A za to postoje dva rješenja problema. To su male Gdipp i MacType aplikacije.
Prvi je otvoreni projekat, čiji je posao da alternativna metoda obrada fonta u Win. A u isto vrijeme, osiguran je gladak, i što je najvažnije, ugodan za čitanje obris. Obično se nalazi u Apple OS i Linux distribucijama.
Gdipp podržava i 32- i x64-bitne verzije Microsoft sistema. Šta bi korisnici trebali učiniti? Samo idite na službeni resurs za programere, preuzmite najnovija gradnja i instalirati.
Važno je napomenuti da u nekim aplikacijama prikaz teksta može izgledati nezgodno.
Ovo se dešava 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 vreme jeste dodatne funkcije, od kojih je jedan za pokretanje build 1703 na Windows-u.
ClearType tehnologija je dizajnirana da poboljša prikaz fontova na LCD monitorima.
U operativnom sistemu Windows 7, ujednačavanje fontova je omogućeno podrazumevano i automatski se konfiguriše u skladu sa tehničke specifikacije vaš monitor. Ako automatska podešavanja Ako niste zadovoljni, možete ručno podesiti ClearType postavke.
Priprema za konfigurisanje ClearTypea
Da biste ispravno konfigurirali izglađivanje fonta pomoću ClearType tehnologije, morate učiniti sljedeće:
1. Instalirajte najviše nova verzija drajveri za video karticu. Ovaj upravljački program mora biti napisan od strane proizvođača vaše video kartice posebno za Windows 7.
2. Instalirajte najnoviji drajver monitora koji je kompatibilan sa Windows 7.
3. Podesite rezoluciju ekrana na kojoj će vam biti ugodno raditi.
4. Popunite ako to već niste učinili.
Postavljanje ClearType
1. Da biste podesili postavke izglađivanja fonta, kliknite na Start, otkucajte traka za pretragu tim cttune i pritisnite Enter.
Proces podešavanja izglađivanja fonta ne bi trebao biti težak.
1. Da biste onemogućili izglađivanje fonta u Windows 7, otvorite Kontrolna tabla -> Sistem -> Dodatne opcije sistemima.
2. Otvorite Opcije performansi i na kartici Vizuelni efekti opozovite izbor u polju za potvrdu Izgladite nazubljene fontove na ekranu.
3. Kliknite uredu dvaput.
Sada ćete možda otkriti da su fontovi u sučelju programa i operativni sistem prikazani su previše ugaoni i premali. Razlog je taj što je u Windows 7 „Segoe UI“ postavljen kao glavni font, ima različite skale i dizajniran je za anti-aliasing.
Konfigurisanje sistemskih fontova kada je anti-aliasing onemogućen
1. Za postavljanje normalan izgled prozori, otvoreni Kontrolna tabla -> Personalizacija -> Boja i izgled prozori -> Dodatne mogućnosti dizajna…
2. Padajuća lista kontroliše parametre prikaza većine elemenata Windows interfejs 7. Postavite font Tahoma, veličine fonta 8 u sljedeće stavke padajuće liste:
- Tooltip
- Označena stavka menija
- Naslov aktivnog prozora
- Neaktivan naslov prozora
- Ikona
- Naziv panela
- Kutija za poruke
- Traka menija
Imajte na umu da postoje dva polja veličine u ovom prozoru postavki. Gornja margina je veličina elementa Windows interfejsa, a donja margina je veličina fonta. dakle, Da biste prilagodili veličinu fonta, izvršite promjene na donjoj margini, i ostavite gornju marginu nepromijenjenu.
3. U stavu Dugmad za kontrolu prozora podesite veličinu 21 (u gornjem polju „Veličina“) da biste sačuvali standardne veličine Dugmad "Zatvori", "Sažmi" i "Proširi".
4. Kliknite uredu.
Ekran i fontovi
Novi članci
Komentari (10) na “Upravljanje ClearType - izglađivanje fonta u Windows 7”
Ovo je sve jasno... Ali šta učiniti sa “skaliranjem” fontova kada promijenite rezoluciju ekrana na manju od “preporučene”? Ponovo je uključeno isto anti-aliasing... iako se čini da je svuda onemogućeno... čak iu registru. Kako onemogućiti skaliranje pri _niskoj_ rezoluciji ekrana?
LAV, nismo ništa napisali o registru. Inače ste onemogućili Cleartype, tako da ne možemo ponuditi nikakav savjet. Prema našem vodiču, izglađivanje fonta je potpuno onemogućeno i nije omogućeno prilikom promjene rezolucije ili skaliranja.
Isprva sam ga onemogućio na isti način kao u vašem članku i tek onda ušao u registar. Problem je već riješen. Našla se unutra neispravan drajver za moju video karticu, koja instalira Windows 7 i ne želi da je zamijeni originalnom. Ovaj drajver normalno prikazuje fontove samo u režimu "preporučene" rezolucije i počinje da ih "uglađuje" na drugim rezolucijama. Koristeći snimak ekrana na kojem font nije izglađen, bilo je moguće zabilježiti da se zapravo fontovi normalno prikazuju i da se na ekranu prikazuju samo u već „izglađenom“ obliku.
Microsoft tehnička podrška brzo je odgovorila i popravila drajver.
Zanimljivo... Kakav drajver i koji model video kartice?
Po mom mišljenju, ClearType odlično radi čak i na mom CRT monitoru. Svi fontovi izgledaju mnogo bolje nego sa uobičajenim anti-aliasingom
Zavisi od vozača. Prije objavljivanja novih drajvera za moju nVidia-u, isključio sam anti-aliasing (bilo je zamućenje), ali sada, nakon instaliranja novih drajvera, koristim anti-aliasing.
ljudi, ne razumem odakle vam personalizacija u kontrolnoj tabli?...nemam takvu stavku iako je Windows...
Paul, otvorite Control Panel u načinu prikaza " velike ikone", Na primjer. “Personalizacija” se nalazi iza “Opcije mape” i prije “Veze s udaljenom radnom površinom”.
Postoji li neki način da se izglađivanje fonta podesi na "Normalno" u Windowsu 7? Ovaj način rada je dostupan u XP-u, ali ga nisam našao u 7.
Zašto želim da ga instaliram? Ne želim da se izgladim mali fontovi, jer je za moje oko neugodan i neobičan, baš kao što ne izglađujem velike fontove.
Kako mogu osigurati da fontovi do 15 px nisu antialiased u Windows 7, ali oni od 15 px i više su antialiased?
Hvala unapred.
Aleksej, nema šanse.
Često tekst na web stranici izgleda nekako uglato i grubo. Međutim, tekst koji koristi različite fontove može izgledati drugačije u različitim veličinama.
Postoje slučajevi kada je primamljivo učiniti tekst malo podebljanim, ali pretraživač prikazuje tekst samo podebljanim ili ne podebljanim.
Što se tiče izglađivanja fontova, mora se reći da neki pretraživači na nekim operativnim sistemima sve sami izglađuju. Da, iu samom operativnom sistemu možete omogućiti ujednačavanje fonta. Na primjer, u Windows XP, anti-aliasing je konfigurisan ovdje - Start -> Settings -> Control Panel -> Display -> Appearance tab -> Effects button -> Apply sledeća metoda izglađivanje fonta na ekranu -> ClearType -> Ok. Sve i sve u OS će biti izglađeno.
Ali kako postići izglađivanje fontova na našoj web stranici uvijek je radilo u pretraživaču, bez obzira na pretraživač, operativni sistem i postavke.
Predlažem jednu opciju za izglađivanje fontova - korištenje Cufon biblioteke.
Ovo je javascript biblioteka.
Tekst kada se koristi Cufon je izglađen. U ovom slučaju, Javascript mora biti omogućen u pretraživaču.
Podržani su sljedeći pretraživači:
- 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 stepena)
Primjer antialiasinga:
Rezultat je očigledan.
Nedostaci ovog pristupa
- Javascript mora biti omogućen. Ali mislim da je mnogim korisnicima to omogućeno.
- Učitavanje JS fajlova. Veličina može doseći do 200 kbajta. U zavisnosti od fonta.
- Ne možete odabrati tekst ili ga kopirati. Kao opciju, koristite Cufon samo u nekim delovima sajta - tekst u navigacionom meniju, zaglavlje. Za sadržaj koji neće biti potrebno kopirati.
- Ako je veza podvučena, onda nakon primjene biblioteke podvlačenje nestaje. Nedostatak biblioteke.
- Dizajn kada se lebdi iznad elementa mora biti opisan zasebno. Nije preuzeto iz stilova. Međutim, ostatak dizajna će biti u skladu sa stilom.
Možda su to svi nedostaci. U nekim će situacijama oni biti značajni, ali u većini slučajeva mogu se zanemariti. Naročito u slučajevima kada je dizajner nacrtao, dizajn je prihvaćen i apsolutno je neophodno da bude glatki i malo podebljani kao u dizajnu (vole da stavljaju Faux Bold na dizajne u Photoshopu).
Još jednom se vraćam na video kurs sa TutsPlus-a pod nazivom “TutsPlus - PSD u WordPress minimalni portfolio”, tamo sam pronašao puno novih i zanimljivih stvari.
Ovog puta pitanje će se odnositi na imovinu
, pa sam izdvojio vrijeme posebno za ovo pitanje da ga detaljnije razmotrim. Prije svega, otišao sam na htmlbook.ru - nezamjenjiv izvor znanja za html dizajnera izgleda.Naravno, bilo je detaljne informacije o izglađivanju fonta i upravljanju ovim procesom putem CSS-a. Članak se zove “Font Smoothing in Safari” i poslužio je kao osnova za moj vlastiti članak.
Prvo, šta je izglađivanje fonta i zašto je potrebno. Možete pogoditi čemu služi, bez ikakvih resursa ili članaka, jer sam naziv govori sam za sebe. Antialiasing fontovi su da bi njihov izgled na izlaznom uređaju (monitor i bilo koji drugi ekran) bio glatkiji. Odnosno, granice fontova postaju glatke i jasne. Naravno, tekst kreiran takvim fontom je ugodniji za čitanje i oči nisu toliko umorne od takvog procesa.
Ali metoda (a ovo je druga tačka) kojom se postiže takvo poboljšanje stila fonta nije tako očigledna. Moglo bi se reći i više - potpuno je neočekivan. Ranije sam nekoliko puta slučajno promatrao takvu sliku, ali tada mi se učinilo da je to "kvar" monitora, njegova nemogućnost da ispravno "nacrta" slova fonta.
Sada znam da se ovaj prikaz fonta vrši namjerno, bojenjem piksela koji se nalaze na rubovima slova, u različite boje. Odnosno, ispada da boja piksela za cijelo slovo fonta nije ujednačena (na primjer, crna), već je sastavljena od nekoliko boja.
Ali evo paradoksa: ljudsko oko ne primjećuje ovu činjenicu, ali upravo suprotno - takav prikaz slova fonta mu se čini jasnijim i glatkijim. Da ne bih dalje opisivao šta je šta i koliko, daću sliku koju sam drsko "skinuo" sa sajta htmlbook.ru, jer ni sam nisam uspeo da napravim ovakvu:
U popularnim operativnim sistemima, ova tehnologija se koristi dosta dugo vremena različita imena, na primjer u Windows-u ima vlasnički naziv ClearType. Međutim, uz pomoć CSS svojstva
radio u pretraživaču, u njegovim postavkama morate postaviti prikaz fontova koji se razlikuju od standarda Windows operativnog sistema.Stoga ne morate tražiti takvu postavku u pregledniku Firefox - jednostavno je nema. Ali u Safariju postoji takva postavka (u Chromeu moji pokušaji su također bili neuspješni):
Pa, dosta o pretraživačima – pređimo na CSS i svojstva
- anti-aliasing je potpuno onemogućen;A u nastavku ću dati sva tri primjera prikaza teksta u Safari pretraživač za svaku vrijednost imovine
ovo je generalno strašno - ništa nije čitljivo, pa to odbacujemo i zaboravljamo (u Firefox pretraživači, Chrome i drugi, sve će biti ispravno prikazano, jer nemaju sličnu postavku kao Safari).Drugi slučaj
sličan drugom, ali tekst izgleda malo podebljan, što nije tako lijepo kao prethodni. Jasno je da je glavno svojstvo HTML predloška Adi Purdila: -webkit-font-smoothing: antialiased;... stvari nisu mnogo napredovale.
