Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ
  • në shtëpi
  • OS
  • Zbutje css. Zbutja e shkronjave me vetinë CSS3 -webkit-font-smoothing

Zbutje css. Zbutja e shkronjave me vetinë CSS3 -webkit-font-smoothing

Ekziston një faktor tjetër - anti-aliasing, me të cilin jo të gjithë shfletuesit (përfshirë Chrome) janë miq kur përdorin fontet jo standarde, megjithëse ato standarde gjithashtu nuk zbutin gjithçka. Rezulton se fonti bëhet këndor, dhe kufijtë e tij janë të mprehtë dhe kjo nuk është shumë e rehatshme për lexim.

Në rast se keni nevojë të përdorni fontin e palës së tretë, për shembull, me "Google.Fonts", pastaj më metodë e besueshmeështë krijimi i një grupi të plotë të formateve të shkronjave, duke përfshirë SVG. Mund ta përdorni, për shembull, vetëm për kokë.

Nëse fonti është standard, atëherë mund të kaloni menjëherë te metoda CSS më poshtë, pasi është shumë e thjeshtë dhe e drejtpërdrejtë.

Teknikat themelore të CSS për t'i bërë fontet më të lexueshme

Metoda CSS

Kjo metodëështë shumë minimalist, sepse për ta zbatuar, mjaftojnë 3 rreshta kodi dhe caktoni klasën "title" në tekstin anti-alias. Zbutja e tekstit ndodh për shkak të hijes dhe është e zbatueshme, ndoshta, për titujt. Kjo metodë mund të konsiderohet si një "hak".

Titulli ( tekst-hije: -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);,

Metoda CSS3

Kur zgjidhet problemi i zbutjes së shkronjave në motorin Chromium, në Google.Code, një programues sugjeroi vendim i shpejtë në CSS3. Kjo doli të jetë mjaft racionale, sepse ju mund të refuzoni SVG dhe fontet e shkronjave të uebit të palëve të treta, të cilat peshojnë rreth 200~500 KB dhe kërkojnë kohë shtesë ngarkimi.

Ky kod duhet të shtohet në skedarin css:

Trupi ( -webkit-font-smoothing: subpixel-antialiased !important; -webkit-backface-visibility: fshehur; -moz-backface-visibility: fshehur; -ms-backface-visibility: fshehur; )

* Ky aludim përdoret për të gjithë titujt e kësaj faqeje

Kjo metodë ka disa disavantazhe:

  • nuk funksionon në të vjetër Versionet e Chrome nën 21
  • Hapësira e shkronjave (kerning) mund të ndryshojë pak

  • Problemi me kerning mund të zgjidhet me diçka si ky kod css:

    Trupi (madhësia e shkronjave: 125%; hapësira midis shkronjave: 0.05em; lartësia e rreshtit: 1.3em; ) trupi > * (madhësia e shkronjave: 85%; lartësia e rreshtit: 1.3em; )

    * Sigurisht, këto parametra duhet të përshtaten pak me veçoritë e faqes

    Cila metodë dhe si të aplikohet është një vendim individual. Por rezultati është i njëjtë fontet e bukura dhe lexues të lumtur.
    Përveç nëse, sigurisht, shfletuesi është i përditësuar.

    Metoda SVG

    Kërkon një gjenerues të shkronjave në internet fontsquirrel.com/tools/webfont-generator

    Duhet të shkarkohet fontin e dëshiruar në formatin ".otf ose .ttf" dhe vendosni këto cilësime:


    Pajtohu me kërkesat dhe kliko "SHKARKO KIT TUAJ"

    Pas shkarkimit të arkivit, do të mjaftojë vetëm të lidhni fontin SVG me sitin, por është e dëshirueshme të përdorni të gjitha formatet.

    Kodi CSS për lidhjen e shkronjave, i cili mund të vendoset në skedar të veçantë:

    @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 ") formati ("svg"); stili i fontit: normal; pesha e shkronjave: normale; )

    * v këtë rast të gjitha fontet Open Sans janë në dosjen e shkronjave në rrënjë të sajtit

    Disa këshilla të thjeshta:

  • Minimumi për anti-aliasing është të bashkëngjitni vetëm fontet "woff" dhe "svg".
  • Për të mos ngarkuar fontin, mund të komentoni të gjithë rreshtin /* adresa e shkronjave */
  • Në "FontSquirrel" mund të gërmoni në cilësimet dhe të përjashtoni të panevojshmet nga fontet
  • Parametrat font-family, font-style, font-pesha mund të konfigurohen opsionalisht
  • ky moment Unë përdor komplet i plotë fontet në sit, duke përfshirë SVG, pasi metoda është më e besueshme dhe shpejtësia e pritjes lejon. Me kalimin e kohës, kur "li.ru" e thotë këtë përdorues i rregullt Runet përdor një version mjaft të fundit të shfletuesit, unë do të mendoj për kalimin në një metodë të pastër CSS.

    Përshëndetje, të dashur lexues.

    Sot do të doja të flisja për një mjet të tillë si ClearType. Është i integruar në sistemet operative nga Microsoft. Zgjidhja ju lejon të përmirësoni ndjeshëm shfaqjen e tekstit në monitor, pavarësisht nga struktura dhe parametrat e tij. Më vonë në artikull, unë do të shpjegoj se çfarë është zbutja e shkronjave në Windows 10 dhe versionet e tjera, si dhe saktësisht se si ta aktivizoni atë.

    informacion i pergjithshem

    Siç u përmend më lart, Windows ofron një mjet të veçantë që ju lejon të përmirësoni shfaqjen e tekstit. Ky element është teknologji të veçantë zbutja e shkronjave. Është projektuar për më shumë lexim të rehatshëm në ekranet me kristal të lëngshëm, lloji TFT, OLED dhe të tjerë. Lidhja e fundit këtë burim nuk kërkohej, pasi monitorët me tub me rreze katodë. Në të njëjtën kohë, në versionin Vista, funksioni i mësipërm u aktivizua automatikisht, dhe për këtë arsye, në monitorët më të vjetër, personazhet dukeshin të pazakontë, të shëmtuar dhe kishin një pamje të pakëndshme për t'u parë.

    Vendosja e ClearType në Windows 7-10

    Shumë përdorues të ndryshëm kompjuterët personalë ose laptopë që pyesin se si të aktivizoni, konfiguroni ose si ta çaktivizoni mjetin e përshkruar. Si mund të jetë e dobishme kjo? Siç u tha në fillim, disa cilësimet standarde, i vendosur si parazgjedhje, jo vetëm që çojnë në asgjë, por edhe ndërhyjnë. Në raste të tilla, fonti duket i paqartë, ose të paktën i pazakontë.

    E rëndësishme!Është e nevojshme të kuptohet saktësisht se i gjithë problemi është në ClearType, dhe jo në rezolucionin e ekranit të vendosur gabimisht. Në fund të fundit, ndonjëherë ndodh. Prandaj, është më mirë që së pari të kontrolloni këtë parametër, dhe vetëm atëherë të konfiguroni pjesën tjetër.

    E rëndësishme! Në mënyrë që të gjitha veprimet e mëvonshme të hyjnë në fuqi, ju duhet të keni të drejtat e administratorit.

    Ju mund të ndryshoni shfaqjen e karaktereve duke përdorur mjetin e duhur:

    Kjo eshte e gjitha. Nëse për ndonjë arsye papritmas nuk ju pëlqen rezultati, gjithmonë mund të ktheheni në këtë procedurë.

    Si të instaloni fontin Apple?

    Ka shumë mendime se cili sistem operativ është më i mirë. Por ka disa pika me të cilat është pothuajse e pamundur të argumentosh. Kështu, për shembull, askush nuk mund të argumentojë se dizajni i Mac OS është më i mirë se pjesa tjetër e tregut. Prandaj, shumë thjesht e marrin atë si bazë.

    Përkundër faktit se Win ofron mjetin e vet për "përmirësimin" e shfaqjes së karaktereve, shumë njerëz duan t'i shohin ato, si në Mac OS. Dhe ka dy zgjidhje për këtë problem. Janë aplikacione të vogla Gdipp dhe MacType.

    E para është projekt i hapur, puna e të cilit është të metodë alternative trajtimi i shkronjave në Win. Dhe në të njëjtën kohë, sigurohet një stil i qetë, dhe më e rëndësishmja, i këndshëm për perceptimin. Zakonisht gjendet në shpërndarjet Apple OS dhe Linux.

    Gdipp mbështet sistemet 32-bit dhe x64-bit nga Microsoft. Çfarë duhet të bëjnë përdoruesit? Thjesht shkoni te burimi zyrtar i zhvilluesit, shkarkoni ndërtimi më i fundit dhe instaloni.

    Është e rëndësishme të theksohet se në disa aplikacione, shfaqja e tekstit mund të duket e vështirë.

    Kjo ndodh si rezultat i ndryshimeve në standardet e arkitekturës.

    Për më tepër, zgjidhja MacType është shumë e popullarizuar. Në përgjithësi, ai kryen të njëjtat funksione si mjeti i mëparshëm. Por në të njëjtën kohë ka veçori shtesë, njëra prej të cilave është të ekzekutohet në Windows build 1703.

    Teknologjia ClearType është krijuar për të shfaqur më mirë fontet në monitorët LCD.

    Në Windows 7, zbutja e shkronjave aktivizohet si parazgjedhje dhe vendoset në automatik, sipas Specifikimet teknike monitorin tuaj. Nëse cilësimet automatike nuk jeni të kënaqur, mund të rregulloni manualisht cilësimet ClearType.

    Përgatitja për të konfiguruar ClearType

    Për të konfiguruar saktë zbutjen e shkronjave duke përdorur teknologjinë ClearType, duhet të bëni sa më poshtë:

    1. Instaloni më së shumti version i ri shoferi i kartës video. Ky drejtues duhet të shkruhet nga prodhuesi i kartës suaj grafike posaçërisht për Windows 7.

    2. Instaloni drejtuesin më të fundit të monitorit të përputhshëm me Windows 7.

    3. Vendosni rezolucionin e ekranit në të cilin do të jeni të qetë duke punuar.

    4. Plotësoni nëse nuk e keni bërë tashmë.

    Cilësimi i ClearType

    1. Për të rregulluar cilësimet e zbutjes së fontit, klikoni Start, shkruani vargun e kërkimit komandë cttune dhe shtypni Enter.

    Procesi i rregullimit të zbutjes së shkronjave nuk duhet të jetë i vështirë.

    1. Për të çaktivizuar zbutjen e shkronjave në Windows 7, hapeni Paneli i kontrollit -> Sistemi -> Opsione shtesë sistemeve.

    2. Hapur Opsionet e performancës dhe në skedën Efektet vizuale zgjidh kutinë Fonte të lëmuara të dhëmbëzuara të ekranit.

    3. Klikoni Ne rregull dy herë.

    Tani mund të gjeni se fontet në ndërfaqen e programit dhe sistemi operativ shfaqet shumë këndore dhe shumë e vogël. Arsyeja është se në Windows 7 "Segoe UI" është vendosur si font kryesor, ka shkallë të ndryshme dhe është projektuar për anti-aliasing.

    Rregullimi i shkronjave të sistemit kur anti-aliasing është i çaktivizuar

    1. Për të përshtatur pamje normale dritaret, të hapura Paneli i kontrollit -> Personalizimi -> Ngjyra dhe pamjen Windows -> Opsione të avancuara të paraqitjes...

    2. Lista rënëse kontrollon opsionet e shfaqjes për shumicën e elementeve Ndërfaqja e Windows 7. Vendosni fontin Tahoma, madhësia e shkronjave 8 në artikujt e mëposhtëm të listës rënëse:

    • Këshillë mjeti
    • Artikulli i zgjedhur i menysë
    • Titulli i dritares aktive
    • Titulli i një dritareje joaktive
    • Ikona
    • Emri i panelit
    • kuti mesazhesh
    • Menu bar

    Vini re se ka dy fusha "Madhësia" në këtë dritare të cilësimeve. Diferenca e sipërme është madhësia e elementit të ndërfaqes së Windows, dhe diferenca e poshtme është madhësia e shkronjave. Në këtë mënyrë, për të rregulluar madhësinë e shkronjave, bëni ndryshime në kufirin e poshtëm, dhe lini kufirin e sipërm të pandryshuar.

    3. Në paragrafin Butonat e kontrollit të dritares vendosni madhësinë 21 (në fushën e sipërme "Madhësia") për të ruajtur madhësive standarde Butonat Mbyll, Minimizo dhe Maksimizoj.

    4. Klikoni Ne rregull.

    Ekrani dhe fontet


    Artikuj të rinj

    Komentet (10) për "Menaxhimi i ClearType - Zbutja e shkronjave në Windows 7"

    E gjithë kjo është e qartë ... Dhe çfarë të bëjmë me "shkallëzimin" e shkronjave kur ndryshimi i rezolucionit të ekranit është më i vogël se ai "i rekomanduar"? Përsëri, i njëjti anti-aliasing aktivizohet ... edhe pse duket se është i çaktivizuar kudo ... edhe në regjistër. Si të çaktivizoni shkallëzimin me rezolucion të ulët të ekranit?

    LAV, nuk kemi shkruar asgjë për regjistrin. Përndryshe, ju çaktivizoni Cleartype, kështu që ne nuk mund të rekomandojmë asgjë. Sipas udhëzuesit tonë, zbutja e shkronjave fiket plotësisht dhe nuk ndizet kur ndryshoni rezolucionin dhe shkallëzimin.

    E fika fillimisht në të njëjtën mënyrë si në artikullin tuaj, dhe vetëm atëherë u futa në regjistër. Problemi tashmë është zgjidhur. Ajo përfundoi në shofer i gabuar për kartën time video, e cila instalon Windows 7 dhe nuk dëshiron ta zëvendësojë atë me origjinalin. Ky drejtues i shfaq fontet normalisht vetëm në modalitetin e rezolucionit "të rekomanduar", dhe në rezolucione të tjera fillon t'i "zbusë" ato. Pamja e ekranit, në të cilën fonti nuk ishte anti-alias, arritëm të rregullojmë që në fakt fontet shfaqen normalisht dhe shfaqen vetëm në ekran në një formë tashmë të "zbutur".
    Mbështetja teknike e Microsoft-it funksionoi shpejt dhe rregulloi drejtuesin.

    Interesante ... Çfarë lloj shoferi dhe çfarë modeli të kartës video?

    Për mua, ClearType funksionon mirë edhe në monitorin tim CRT. Të gjitha fontet duken shumë më mirë se anti-aliasing normale

    Varet nga shoferi. Para lëshimit të drejtuesve të rinj për nVidia-n time, unë çaktivizova anti-aliasing (kishte paqartësi), dhe tani, pasi instalova drejtuesit e rinj, përdor anti-aliasing.

    njerëz, nuk e kuptoj se ku e keni marrë personalizimin në panelin e kontrollit? ... Unë nuk kam një artikull të tillë, pavarësisht se Windows përballet ...

    Pali, hapni panelin e kontrollit në modalitetin e ekranit " ikona të mëdha", p.sh. "Personalizimi" është pas "Opsionet e dosjeve" dhe para "Lidhjet e desktopit në distancë".

    A ka ndonjë mënyrë për të vendosur zbutjen e shkronjave në "Normal" në Windows 7? Ky modalitet është në XP, në shtatë nuk e gjeta.

    Pse dua ta instaloj? Nuk dua të jem i qetë fontet e vogla, sepse syri im është i pakëndshëm dhe i pazakontë, ashtu si mos aliasimi i shkronjave të mëdha.

    Si në Windows 7 të sigurohemi që shkronjat deri në 15 px nuk janë anti-aliased, por nga 15 px e lart janë anti-aliased?

    Faleminderit paraprakisht.

    Aleksei, në asnjë mënyrë.

    Shpesh teksti në sit duket disi këndor, i përafërt. Megjithatë, teksti me shkronja të ndryshme mund të duket i ndryshëm në madhësi të ndryshme.

    Ka edhe momente kur, mirë, thjesht kërkon që teksti të bëhet pak më i theksuar, por shfletuesi e shfaq tekstin vetëm me shkronja të zeza ose jo.

    Sa i përket zbutjes së shkronjave, duhet të them që disa shfletues në disa sisteme operative zbutin gjithçka vetë. Po, dhe në vetë sistemin operativ, mund të aktivizoni zbutjen e shkronjave. Për shembull, në Windows XP, anti-aliasing është konfiguruar këtu - Fillimi -> Cilësimet -> Paneli i kontrollit -> Ekrani -> Skeda "Dukja" -> Butoni "Efektet" -> Aplikoni metodën e mëposhtme zbutja e shkronjave të ekranit -> ClearType -> Ok. Çdo gjë dhe gjithçka në OS do të zbutet.

    Por si të merrni zbutja e shkronjave në faqen tonë në shfletues funksionoi gjithmonë, pavarësisht nga shfletuesi, sistemi operativ dhe cilësimet.

    Unë propozoj një nga opsionet e zbutjes së shkronjave - duke përdorur bibliotekën Cufon.

    Kjo është një bibliotekë javascript.

    Teksti kur përdoret Cufon rezulton të jetë anti-alias. Në këtë rast, Javascript duhet të aktivizohet në shfletues.

    Shfletuesit e mëposhtëm mbështeten:

    • Internet Explorer 6, 7 dhe 8
    • Internet Explorer 9 beta (nga 1.09i)
    • Mozilla Firefox 1.5+
    • Safari 3+
    • Opera 9.5+
    • Google Chrome 1.0+
    • iOS 2.0+
    • Opera Mini (në një farë mase)

    Shembull zbutës:

    Rezultati në fytyrë.

    Disavantazhet e kësaj qasjeje

    1. Javascript duhet të aktivizohet. Por unë mendoj se është i aktivizuar për shumë përdorues.
    2. Po ngarkon skedarët JS. Madhësia mund të arrijë deri në 200 kb. Në varësi të fontit.
    3. Teksti nuk mund të zgjidhet ose kopjohet. Si opsion - përdorni Cufon vetëm në disa pjesë të faqes - teksti në menunë e navigimit, kokë. Për përmbajtjen që nuk ka nevojë të kopjohet.
    4. Nëse lidhja është e nënvizuar, atëherë pas aplikimit të bibliotekës, nënvizimi zhduket. Mungesa e bibliotekës.
    5. Dizajni kur rri pezull mbi një element duhet të përshkruhet veçmas. Nuk është marrë nga stilet. Sidoqoftë, pjesa tjetër e dizajnit do të jetë sipas fletës së stilit.

    Ndoshta këto janë të gjitha kundër. Në disa situata ato do të jenë domethënëse, por në shumicën e rasteve mund të shpërfillen. Sidomos në ato raste kur projektuesi ka vizatuar, dizajni pranohet dhe duhet të bëhet i lëmuar dhe paksa i guximshëm si në dizajn (ata pëlqejnë të vendosin Faux Bold në Photoshop).

    Edhe një herë i kthehem kursit të videos nga TutsPlus i quajtur "TutsPlus - PSD To WordPress Minimal Portofolio", gjeta shumë gjëra të reja dhe interesante atje.

    Këtë herë pyetja do të jetë për pronën

    , kështu që mora kohë në mënyrë specifike që këtë çështje ta kuptoja më në detaje. Para së gjithash, shkova në htmlbook.ru - një burim i domosdoshëm njohurish për një projektues të paraqitjes html.

    Natyrisht, kishte informacion i detajuar rreth zbutjes së shkronjave dhe kontrollit të këtij procesi përmes CSS. Artikulli quhet "Zbutja e shkronjave në Safari" dhe shërbeu si bazë për artikullin tim.

    E para është ajo që është zbutja e shkronjave dhe pse është e nevojshme. Për atë që ju nevojitet, mund të merrni me mend dhe kështu, pa asnjë burim dhe artikull, sepse vetë emri flet vetë. Zbutja e shkronjave është të bëjë më të butë stilin e tyre në pajisjen dalëse (monitor dhe çdo ekran tjetër). Kjo do të thotë, kufijtë e shkronjave bëhen të lëmuara dhe të qarta. Sigurisht, teksti i krijuar në një font të tillë është më i këndshëm për t'u lexuar dhe sytë nuk janë aq të lodhur nga një proces i tillë.

    Por metoda (dhe kjo është pika e dytë) me të cilën arrihet një përmirësim i tillë në stilin e shkronjave nuk është aq e dukshme. Mund të thuash edhe më shumë - është krejtësisht e papritur. Më parë, pashë aksidentalisht një foto të tillë disa herë, por më pas m'u duk se kjo ishte një "gabim" i monitorit, pamundësia e tij për të "vizatuar" saktë shkronjat e fontit.

    Tani e di që kjo shfaqje e fontit është bërë qëllimisht, duke ngjyrosur pikselët e vendosur në skajet e shkronjave, në ngjyra të ndryshme. Kjo do të thotë, rezulton se ngjyra e pikselëve për të gjithë shkronjën e fontit është jo uniforme (le të themi e zezë), por përbëhet nga disa ngjyra.

    Por këtu është paradoksi - syri i njeriut nuk e vëren ky fakt, por pikërisht e kundërta - një shfaqje e tillë e shkronjave të shkronjave i duket më e qartë dhe më e qetë. Në mënyrë që të mos përshkruaj më tej se çfarë është dhe sa, do të jap një fotografi që e "bilbilita" paturpësisht nga faqja e internetit htmlbook.ru, sepse nuk mund ta krijoja vetë:

    Në sistemet operative të njohura, kjo teknologji është përdorur për një kohë të gjatë nën emra të ndryshëm, për shembull në Windows ka emrin e pronarit ClearType. Megjithatë, me ndihmën vetitë css

    punuar në shfletues, në cilësimet e tij duhet të vendosni shfaqjen e shkronjave që ndryshojnë nga standardet e sistemit operativ Windows.

    Prandaj, nuk mund të kërkoni një cilësim të tillë në shfletuesin Firefox - thjesht nuk është aty. Por në Safari ekziston një cilësim i tillë (në Chrome, përpjekjet e mia ishin gjithashtu të pasuksesshme):

    Epo, mjaft për shfletuesit - le të kalojmë te CSS dhe pronë

    - anti-aliasing është përgjithësisht i çaktivizuar;
  • - një shkallë e fortë zbutjeje.
  • Dhe më poshtë do të jap të tre shembujt e shfaqjes së tekstit në Shfletuesi Safari për secilën nga vlerat e pasurisë

    kjo është përgjithësisht tmerr - asgjë nuk lexohet fare, kështu që ne e hedhim dhe e harrojmë atë (në Shfletuesit Firefox, Chrome dhe të tjerët do të shfaqen të gjithë saktë pasi nuk kanë një cilësim të ngjashëm si Safari).

    Rasti i dytë

    i ngjashëm me të dytin, por teksti duket pak i guximshëm, gjë që nuk është aq e bukur sa rasti i mëparshëm. është e qartë se vetia kryesore në shabllonin HTML nga Adi Purdila është: -webkit-font-smoothing : antialiased ;

    … gjërat nuk shkuan shumë më tej.

    Artikujt kryesorë të lidhur