De jQuery CSS Font-Face is Wazig

Printontwerpers dachten altijd te spotten met de typografische beperkingen van webontwerp, met name de lettertype-selecties die meerdere browsers en besturingssystemen ondersteunden van de beperkte set lettertype-bestanden die met besturingssystemen en webbrowsers waren geïnstalleerd. Innovaties bij het vervangen van lettertypen kunnen deze beperkingen wegnemen en een wereld van typografie plaatsen bij de opdrachtgevers van de webontwerper en de programmeur. Als u uw websites codeert met behulp van de combinatie van jQuery en CSS om fontvervangingen op uw tekst toe te passen, bepalen enkele van de instellingen die u in combinatie met deze technologieën kunt gebruiken of uw tekst er helder of wazig uitziet in specifieke webbrowsers.

Font-Face-tag

De CSS-eigenschappen die nodig zijn voor het coderen van lettertypen, werken vanaf 98% van de browsersoftware die op desktopcomputers wordt gebruikt, vanaf 2012. De tag voor het lettertype biedt CSS-eigenschappen die u kunt gebruiken om naar de locatie van een door het web gehoste set te verwijzen. lettertypebestanden in invoegbare indeling, hetzij op uw eigen server of vanaf een web-font-service. Met lettertype-eigenschappen kunt u gewichten en stijlen opgeven om toegang te krijgen tot alle leden van een grote lettertypefamilie. Als u conventionele typografie met de tag font-face wilt gebruiken, hebt u OpenType-lettertypen nodig. Deze kunnen komen in de vorm van gratis open-source typografie, betaalde aankopen van lettertypelicenties of betaalde abonnementen met gelaagde licentiekosten op basis van het verkeersniveau op uw website.

JQuery en CSS

Met de JavaScript-functiebibliotheek, bekend als jQuery, kunt u kracht en flexibiliteit toevoegen aan uw webprogrammering. De voorwaarden ervan versnellen uw gebruik van animaties, diavoorstellingen, manipulatie van attributen, CSS-eigenschappen en AJAX-gegevenstoegang voor gedeeltelijke pagina-updates zonder opnieuw laden. Door de combinatie van jQuery- en lettertype-eigenschappen kunt u typografische eigenschappen dynamisch onderzoeken, instellen en verwijderen. U kunt bijvoorbeeld het gewicht of de stijl van een stuk tekst waarop de gebruiker klikt, wijzigen. Om jQuery te gebruiken, kunt u de bibliotheek uploaden naar uw sites of openen vanuit een gehost Content Delivery Network.

Browser-specifieke CSS-eigenschappen

Hoewel browserspecifieke codering tegenwoordig veel minder tijd kost van webprogrammeurs dan in het tijdperk van Netscape-vs. Explorer, bestaan ​​er nog steeds verschillen, hetzij om te worden ondergebracht of uitgebuit. De opensource WebKit-browserengine die ten grondslag ligt aan Apple's Safari, Chrome van Google en andere browsers en applicaties, bevat een eigenschap voor het maken van spikkels en lettertypen die drie waarden accepteert: "none", "subpixel-antialiased" en "antialiased." Kies "none" en al je letters worden weergegeven zonder anti-aliasing, waardoor de randen gekarteld zijn op bochten en diagonalen. Kies "subpixel-anti-aliasing" om overeen te komen met het uiterlijk van het type dat elders op desktopbesturingssystemen wordt weergegeven, afgevlakt op een niveau onder de individuele pixel. Kies "anti-aliasing" voor versoepeling op pixelniveau dat de overdreven krachtige weergave van subpixelweergave op reverse-type in WebKit-browsers tegengaat - voor een prijs.

Subpixelweergave Vs. Anti-Aliasing

Elke pixel op een LCD-scherm bestaat eigenlijk uit drie subpixels naast elkaar: een rood, een groen en een blauw. Tenzij u de inhoud op het scherm bekijkt met een hoge vergroting, mengen deze subpixels samen. Doordat ze echter afzonderlijk kunnen worden aangepakt, kunnen ze diagonalen en bochten produceren met extra zachtheid, gebouwd door een aantal van de gekleurde subpixels aan de randen van deze vormen in te schakelen, die de contouren vormen van vrijwel alle typografie. Als u probeert dit resultaat te bereiken met conventionele antialiasing op pixelniveau, worden hele pixels in grijstinten gebruikt om het oog voor het zien van vloeiende vormen te misleiden, maar in vergelijking met de schone resultaten die door subpixels worden bereikt, vervaagt het resultaat de lettervormen.

overwegingen

Als u de -webkit-font-smoothing-eigenschap gebruikt die is ingesteld op "anti-aliasing" in plaats van "subpixel-antialiasing", ziet u een slanker type dat in eerste instantie schoner en duidelijker voor het oog lijkt, vooral wanneer u het combineert met het lettertype- gezichtstag voor toegang tot uitgebreide typografische opties. Zorg echter dat de nieuwigheid van de dunte afneemt en u begint de onscherpte te zien die het gevolg is van het uitschakelen van subpixelbemonstering. Vooral op het kleine type en de lichaamscopie kan die waas zorgen voor een moeilijke aflezing.

Aanbevolen