Vymazat vyhlazování písma na obrazovce Type. Antialiasing písem v prohlížeči pomocí Cufon

Text na webu často vypadá nějak hranatě a hrubě. Text používající různá písma však může při různých velikostech vypadat odlišně.

Jsou také chvíle, kdy je lákavé udělat text trochu tučným, ale prohlížeč zobrazí text pouze tučně nebo ne tučně.

Ohledně vyhlazování písma je třeba říci, že některé prohlížeče na některých operačních systémech vše vyhlazují samy. Ano a v samotném operačním systému můžete povolit vyhlazování písma. Například ve Windows XP se vyhlazování konfiguruje zde - Start -> Nastavení -> Ovládací panely -> Zobrazení -> karta Vzhled -> tlačítko Efekty -> Použít následující metodu vyhlazování písma obrazovky -> ClearType -> Ok . Cokoli a všechno v OS bude vyhlazeno.

Ale jak toho dosáhnout vyhlazování písem na našem webu v prohlížeči vždy fungovalo bez ohledu na prohlížeč, operační systém a nastavení.

Navrhuji jednu možnost vyhlazení písma – pomocí knihovny Cufon.

Toto je javascriptová knihovna.

Text při použití Cufon je vyhlazený. V tomto případě musí být v prohlížeči povolen Javascript.

Podporovány jsou následující prohlížeče:

• Internet Explorer 6, 7 a 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 určité míry)

Příklad antialiasingu:

Výsledek je zřejmý.

Nevýhody tohoto přístupu

1. Javascript musí být povolen. Ale myslím, že mnoho uživatelů to má povoleno.
2. Nahrávání souborů JS. Velikost může dosáhnout až 200 kB. V závislosti na fontu.
3. Nelze vybrat text ani jej zkopírovat. Jako možnost použijte Cufon pouze v některých částech webu - text v navigační nabídce, záhlaví. Pro obsah, který nebude nutné kopírovat.
4. Pokud je odkaz podtržený, pak po použití knihovny podtržení zmizí. Nedostatek knihovny.
5. Návrh při najetí na prvek musí být popsán samostatně. Není převzato ze stylů. Zbytek designu však bude podle šablony stylů.

To jsou snad všechny nevýhody. V některých situacích budou významné, ale ve většině případů je lze ignorovat. Zejména v případech, kdy designér kreslil, byl návrh přijat a je bezpodmínečně nutné, aby byl hladký a mírně tučný jako v návrhu (ve Photoshopu rádi dávají na návrhy Faux Bold).

Technologie ClearType je navržena pro zlepšení zobrazení písem na LCD monitorech.

Ve Windows 7 je vyhlazování písma ve výchozím nastavení povoleno a konfiguruje se automaticky podle specifikací vašeho monitoru. Pokud vám automatické nastavení nevyhovuje, můžete nastavení ClearType upravit ručně.

Příprava na konfiguraci ClearType

Chcete-li správně nakonfigurovat vyhlazování písem pomocí technologie ClearType, musíte provést následující:

1. Nainstalujte nejnovější verzi ovladače grafické karty. Tento ovladač musí být napsán výrobcem grafické karty speciálně pro Windows 7.

2. Nainstalujte nejnovější ovladač monitoru, který je kompatibilní se systémem Windows 7.

3. Nastavte rozlišení obrazovky, při kterém se vám bude pohodlně pracovat.

4. Vyplňte, pokud jste tak ještě neučinili.

Nastavení ClearType

1. Chcete-li upravit nastavení vyhlazování písma, klikněte na Start a zadejte příkaz do vyhledávacího pole cttune a stiskněte Enter.

Proces nastavení vyhlazování písma by neměl být náročný.

1. Chcete-li zakázat vyhlazování písem ve Windows 7, otevřete Ovládací panely -> Systém -> Pokročilá nastavení systému.

2. Otevřete Možnosti výkonu a na kartě Vizuální efekty zrušte zaškrtnutí políčka Vyhlaďte zubatá obrazovková písma.

3. Klikněte OK dvakrát.

Nyní můžete zjistit, že písma v rozhraní programů a operačního systému jsou zobrazena příliš hranatě a příliš malá. Důvodem je, že ve Windows 7 je jako hlavní písmo nastaveno „Segoe UI“, má různá měřítka a je určeno pro vyhlazování.

Konfigurace systémových písem při vypnutém vyhlazování

1. Chcete-li nastavit normální vzhled oken, otevřete Ovládací panely -> Přizpůsobení -> Barva a vzhled okna -> Další možnosti designu…

2. Rozbalovací seznam řídí parametry zobrazení většiny prvků rozhraní Windows 7 Nastavte písmo Tahoma, velikost písma 8 v následujících položkách rozevíracího seznamu:

• Popisek
• Zvýrazněná položka nabídky
• Aktivní název okna
• Neaktivní název okna
• Ikona
• Název panelu
• Schránka zpráv
• Panel nabídek

Upozorňujeme, že v tomto okně nastavení jsou dvě pole Velikost. Horní okraj je velikost prvku rozhraní Windows a dolní okraj je velikost písma. Tedy, Chcete-li upravit velikost písma, proveďte změny v dolním okraji a horní okraj ponechte beze změny.

3. V odstavci Tlačítka ovládání oken nastavte velikost na 21 (v horním poli „Velikost“), abyste zachovali standardní velikosti tlačítek „Zavřít“, „Sbalit“ a „Rozbalit“.

4. Klikněte OK.

Obrazovka a písma

Nové články

Komentáře (10) k „Správa ClearType – vyhlazování písem ve Windows 7“

To je všechno jasné... Co ale dělat s „zmenšením“ písem při změně rozlišení obrazovky na menší než „doporučené“? Stejné vyhlazování je znovu zapnuto... i když se zdá, že je všude zakázáno... dokonce i v registru. Jak zakázat škálování při _nízkém_ rozlišení obrazovky?

LAV, o registru jsme nic nepsali. Jinak jste zakázali Cleartype, takže vám nemůžeme nabídnout žádnou radu. Podle našeho průvodce je vyhlazování písem zcela zakázáno a není povoleno při změně rozlišení nebo měřítka.

Zpočátku jsem to deaktivoval stejným způsobem jako ve vašem článku a teprve poté jsem šel do registru. Problém je již vyřešen. Ukázalo se, že je to v nesprávném ovladači pro mou grafickou kartu, která instaluje Windows 7 a nechce být nahrazena původní. Tento ovladač zobrazuje písma normálně pouze v režimu „doporučeného“ rozlišení a začne je „vyhlazovat“ v jiných rozlišeních. Pomocí snímku obrazovky, na kterém nebylo písmo vyhlazeno, bylo možné zaznamenat, že ve skutečnosti se písma zobrazují normálně a na obrazovce se zobrazují pouze v již „vyhlazené“ podobě.
Technická podpora Microsoftu rychle zareagovala a ovladač opravila.

Zajímavé... Jaký ovladač a jaký model grafické karty?

ClearType podle mě funguje skvěle i na mém CRT monitoru. Všechna písma vypadají mnohem lépe než u běžného vyhlazování

Záleží na řidiči. Před vydáním nových ovladačů pro moji nVidii jsem vyhlazování vypnul (docházelo k rozmazání), ale nyní po instalaci nových ovladačů vyhlazování používám.

lidi, nechápu, kde jste vzali personalizaci v ovládacím panelu?...takovou položku nemám, přestože je to Windows...

Paul, otevřete ovládací panel například v režimu zobrazení „velké ikony“. „Personalizace“ se nachází za „Možnosti složky“ a před „Připojení ke vzdálené ploše“.

Existuje nějaký způsob, jak nastavit vyhlazování písma na „Normální“ ve Windows 7? Tento režim je k dispozici v XP, ale v 7 jsem ho nenašel.

Proč to chci nainstalovat? Nechci, aby se malá písma vyhlazovala, protože je to pro mé oko nepříjemné a neobvyklé, stejně jako nevyhlazování velkých písem.

Jak mohu zajistit, že písma do 15 px nebudou vyhlazená ve Windows 7, ale písma od 15 px a vyšší budou vyhlazená?

předem děkuji.

Alexey, v žádném případě.

Tvůrce stránek nemá mnoho prostředků, jak změnit zejména vzhled písma, vyhlazování textu nelze vůbec nijak ovládat. Pro ty, kteří to nevědí, je to způsob, jak písmena vyhladit přidáním pixelů různých barev. Zvětšíte-li text ve Windows, stane se to jasně viditelné (obr. 1).

Rýže. 1. Zvětšený text

Vzhledem ke zvláštnostem lidského vidění tyto jednotlivé pixely nedokážeme rozlišit, ale díky nim se text stává čitelnějším. Windows používá patentovanou technologii ClearType, MacOS má podobné řešení, takže se zdá, že se není čeho obávat, text vypadá ve všech prohlížečích stejně. Safari však svého času prokázalo, že dokáže manipulovat s textem a obcházet systém, čímž se liší od ostatních prohlížečů. Safari 4 navíc nyní podporuje zajímavou vlastnost -webkit-font-smoothing, pomocí které mohou weboví vývojáři specifikovat vyhlazovací algoritmus.

Aby se tato vlastnost projevila, musíte v nastavení vybrat jiné vyhlazení než „Windows Standard“ ( Nastavení > Vzhled > Vyhlazení písma), jak je znázorněno na Obr. 2.

Rýže. 2. Nastavení vyhlazování

Nyní můžete použít -webkit-font-smoothing a pozorovat výsledek jeho dopadu. Tato vlastnost má tři hodnoty:

• žádné - žádné vyhlazování;
• - silné vyhlazování;
• - průměrné vyhlazení.

Příklad 1 ukazuje, jak jej použít pro text celé stránky.

Příklad 1: Použití -webkit-font-smoothing

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Uplynulo ještě trochu času a pak přišel den, kdy Cortes a jeho dobyvatelé vstoupili do Tenochtitlanu. Nebudu popisovat, co všechno Španělé ve městě dělali, protože to je dílo historika a já jen vyprávím svůj vlastní příběh.

Henry Rider Haggard. Montezumova dcera

Výsledek příkladu je na Obr. 3.

Rýže. 3. Vyhlazení textu s různými hodnotami - webkit-font-smoothing

Když je nastaveno na žádné, text ztratil vůbec jakoukoli čitelnost, zatímco text působí tučně a ne každému se to líbí, poskytuje nejuniverzálnější vyhlazování.

Zatímco vyhlídky na použití vlastností vyhlazování textu jsou nejasné, vlastnost font-smooth se může objevit v CSS3, které je stále ve stavu konceptu. Prohlížeče tuto funkci nepodporují, s výjimkou enginu Webkit, na kterém jsou postaveny Safari a Chrome.

Ještě jednou se vracím k videokurzu od TutsPlus s názvem “TutsPlus - PSD To WordPress Minimal Portfolio”, našel jsem tam spoustu nových a zajímavých věcí.

Tentokrát se otázka bude týkat nemovitosti

, tak jsem si vyhradil čas speciálně na tuto otázku, abych se jí věnoval podrobněji. Nejprve jsem šel na htmlbook.ru - nepostradatelný zdroj znalostí pro návrháře rozvržení html.

Samozřejmostí byly podrobné informace o vyhlazování písem a řízení tohoto procesu pomocí CSS. Článek se jmenuje „Vyhlazování písem v Safari“ a posloužil jako základ pro můj vlastní článek.

Za prvé, co je vyhlazování písma a proč je potřeba. Můžete hádat, k čemu to je, bez jakýchkoli zdrojů nebo článků, protože samotný název mluví sám za sebe. Antialiasing fontů slouží k tomu, aby jejich vzhled na výstupním zařízení (monitor a jakákoli jiná obrazovka) byl hladší. To znamená, že okraje písem budou hladké a jasné. Text vytvořený v takovém fontu se samozřejmě čte příjemněji a oči nejsou z takového procesu tolik unavené.

Ale způsob (a to je druhý bod), kterým je takového vylepšení stylu písma dosaženo, není tak zřejmý. Dalo by se říci i více – je zcela nečekaný. Dříve jsem takový obrázek několikrát náhodně pozoroval, ale pak se mi zdálo, že se jedná o „závadu“ monitoru, jeho neschopnost správně „kreslit“ písmena písma.

Nyní už vím, že toto zobrazení písma bylo provedeno záměrně, obarvením pixelů umístěných na okrajích písmen různými barvami. To znamená, že se ukáže, že barva pixelu pro celé písmeno písma není jednotná (například černá), ale je složena z více barev.

Zde je ale paradox - lidské oko si této skutečnosti nevšimne, ale právě naopak - takové zobrazení písmen písma se mu zdá jasnější a hladší. Abych dál nepopisoval, co je co a za kolik, dám vám obrázek, který jsem drze „vytrhl“ ze stránky htmlbook.ru, protože sám jsem takový nedokázal vytvořit:

V populárních operačních systémech se tato technologie používá již dlouhou dobu pod různými názvy, například ve Windows má patentovaný název ClearType. Nicméně pomocí vlastnosti CSS

fungoval v prohlížeči, v jeho nastavení je potřeba nastavit zobrazení písem, které se liší od standardů operačního systému Windows.

Proto nemusíte takové nastavení hledat v prohlížeči Firefox – prostě tam není. Ale v Safari je takové nastavení (v Chrome byly moje pokusy také neúspěšné):

No, dost o prohlížečích – přejděme ke CSS a vlastnostem

- anti-aliasing je zcela zakázán;

- silný stupeň vyhlazení.

A níže uvedu všechny tři příklady zobrazení textu v prohlížeči Safari pro každou hodnotu vlastnosti

to je obecně hrozné - vůbec nic není čitelné, takže to zahodíme a zapomeneme na to (ve Firefoxu, Chrome a dalších prohlížečích se vše zobrazí správně, protože nemají podobné nastavení jako Safari).

Druhý případ

podobný druhému, ale text vypadá trochu tučně, což není tak pěkné jako předchozí.

Je jasné, že hlavní vlastností HTML šablony od Adi Purdila je: -webkit-font-smoothing : antialiased ;

... věci nepokročily o moc dále.

Možná znáte situaci, kdy jdete na web a jsou tam křivé fonty (malé, špatně čitelné, jako na obrázku vlevo)... Ale nespěchejte s kritikou designéra. Designér se snažil a snažil, vybíral písmo a jeho styl. A tady jste! Jejda, designér to podělal! Možná jste to viděli více než jednou, možná na to narážíte pořád? Pak se vyplatí zkontrolovat, zda máte zapnuté vyhlazování písma na obrazovce?

Tento problém s největší pravděpodobností vznikl ne tak dávno, kvůli rozšířenému používání LCD displejů s vyšším rozlišením. Pixel je lépe viditelný, nedochází k rozmazání jako na „tubusu“. A „pixelace“ vedla k tomu, že místo nakloněné linie vidíme kroky. Abyste viděli, jak vše autor webu zamýšlel, abyste viděli všechnu tu krásu, musíte povolit vyhlazování písma na obrazovce. V různých operačních systémech, v různých verzích může být toto nastavení umístěno na jiném místě než v jiných. Pokusme se popsat různé možnosti.

Windows XP

Klepněte pravým tlačítkem myši na plochu - Vlastnosti - Vzhled - Efekty

Zaškrtněte políčko vedle: „Použít následující metodu pro vyhlazování obrazovkových písem“ a z rozevírací nabídky vyberte Vymazat typ.

Klikněte na – Použít a poté – OK.

V moderních operačních systémech, jako je Windows XP, pokud používáte LCD monitor, může být v Ovládacích panelech možnost Nastavení ClearType. Vstupte do této části a spusťte Průvodce nastavením ClearType. Dodržováním pokynů krok za krokem velmi přesně a jemně nakonfigurujete vyhlazování písem speciálně pro vaši grafickou kartu a váš monitor. A písma již nebudou „odstupňovaná“ a „rozmazaná“. Toto nastavení je podobné tomu, jak je vše implementováno ve Windows 7 a 8.

Vyhlazování obrazovkových písem systému Windows 7

Tato možnost se nachází na jiném místě a má více možností a testů pro výběr nejlepší možnosti zobrazení textu.

"Ovládací panely" - "Design a přizpůsobení" - "Obrazovka". Poté na levé straně musíte vybrat „Vymazat nastavení textu typu“. Spustí se průvodce, který vám umožní aktivovat, konfigurovat nebo deaktivovat Clear Type.

Windows 8

Nebylo potřeba konfigurovat, vše bylo již připraveno.

Ale pokud vás to zajímá, všechna nastavení Clear Type jsou umístěna na stejném místě jako ve Windows 7. Na ploše klikněte pravým tlačítkem myši a vyberte „Rozlišení obrazovky“. V horním řádku „Ovládací panely – Vzhled a přizpůsobení – Zobrazení – Rozlišení obrazovky“ klikněte na položku „Zobrazení“. Vlevo vyberte „Upravit jasný text“. Ujistěte se, že je zaškrtnuto políčko „Turn On Clear Type“ a klikněte na tlačítko „Next“. To znamená, že spustíme průvodce nastavením Clear Type. Postupujeme podle pokynů na obrazovce, dokud nedosáhneme nejlepšího zobrazení písem.

Safari

Safari je prohlížeč od společnosti Apple. Existuje ale i verze pro Windows. Je možné, že konfigurace v samotném operačním systému probíhá jinak. Napiš jestli víš jak.

V pravém horním rohu prohlížeče Safari klikněte na ikonu nastavení (ozubené kolo).

Vyberte kartu „Vzhled“. V rozevírací nabídce „Vyhlazování písma“ vyberte, co se nám nejvíce líbí: „Nejlepší pro CRT“ (použil jsem tuto metodu jako nejlepší. Podívejte se na snímek obrazovky), „Světlý“ (písmena se stala tučným), „Střední - optimální pro ploché obrazovky" (velmi tučné), "Silné" (tučnější už to být nemůže - textové bloky ztmavly, vnímání odstavců se změnilo), "Standardní Windows" (vypadá stejně jako ve Windows. Prohlížeč načte nastavení z operačního systému).