Die jQuery-CSS-Schriftart ist verschwommen

Die Druckdesigner pflegten, die Schriftsatzbeschränkungen des Webdesigns zu verachten, insbesondere die Auswahl der Schriftarten, die mehrere Browser und Betriebssysteme aus einer begrenzten Anzahl von mit Betriebssystemen und Webbrowsern installierten Zeichensatzdateien unterstützte. Neuerungen bei der Ersetzung von Schriftarten können diese Einschränkungen aufheben und dem Designer und Programmierer eine Welt der Typografie zur Verfügung stellen. Wenn Sie Ihre Websites mit der Kombination aus jQuery und CSS codieren, um Schriftartenersetzungen auf Ihren Text anzuwenden, bestimmen einige der Einstellungen, die Sie in Verbindung mit diesen Technologien verwenden können, ob Ihr Text in bestimmten Webbrowsern scharf oder verschwommen erscheint.

Font-Face-Tag

Die für die Font-Face-Codierung erforderlichen CSS-Eigenschaften funktionieren in 98 Prozent der Browsersoftware, die seit 2012 auf Desktop-Computern verwendet wird, ordnungsgemäß. Das Font-Face-Tag enthält CSS-Eigenschaften, mit denen Sie auf den Speicherort eines von Web gehosteten Satzes von verweisen können Schriftdateien im einbettbaren Format, entweder auf Ihrem eigenen Server oder von einem Web-Font-Dienst. Mit den Eigenschaften für Schriftflächen können Sie Gewichte und Stile angeben, um auf alle Mitglieder einer großen Schriftfamilie zugreifen zu können. Um die herkömmliche Typografie mit dem font-face-Tag verwenden zu können, benötigen Sie OpenType-Schriftarten. Diese können in Form von kostenlosen Open-Source-Typografien, bezahlten Käufen von Zeichensatzlizenzen oder kostenpflichtigen Abonnements mit gestaffelten Lizenzkosten auf der Grundlage des Verkehrsaufkommens Ihrer Website erfolgen.

JQuery und CSS

Mit der als jQuery bekannten JavaScript-Funktionsbibliothek können Sie Ihrer Web-Programmierung mehr Leistung und Flexibilität verleihen. Seine Begriffe beschleunigen die Verwendung von Animationen, Diashows, Attributmanipulation, CSS-Eigenschaften und AJAX-Datenzugriff für teilweise Seitenaktualisierungen ohne erneutes Laden. Durch die Kombination von jQuery- und font-face-Eigenschaften können Sie typografische Eigenschaften dynamisch untersuchen, festlegen und entfernen. Sie können beispielsweise die Gewichtung oder den Stil eines Textes ändern, auf den der Benutzer klickt. Um jQuery verwenden zu können, können Sie seine Bibliothek auf Ihre Websites hochladen oder über ein gehostetes Content Delivery Network darauf zugreifen.

Browserspezifische CSS-Eigenschaften

Obwohl browserspezifische Codierung heute viel weniger Zeit für Web-Programmierer einnimmt als in der Netscape-vs.-Explorer-Ära, bestehen nach wie vor Unterschiede, die entweder berücksichtigt oder ausgenutzt werden müssen. Die Open-Source-WebKit-Browser-Engine, die Apples Safari, Googles Chrome und anderen Browsern und Anwendungen zugrunde liegt, umfasst eine -webkit-font-smoothing-Eigenschaft, die drei Werte akzeptiert: "none", "subpixel-antialias" und "antialias". Wählen Sie "none" und alle Ihre Texte werden ohne Anti-Aliasing gerendert, wobei die Kanten auf Kurven und Diagonalen gerundet bleiben. Wählen Sie "Subpixel-Antialias", um das Aussehen eines an anderen Stellen auf Desktop-Betriebssystemen gerenderten Typs zu erhalten, der auf einer Ebene unterhalb des einzelnen Pixels geglättet wird. Wählen Sie "Antialias" für die Glättung auf Pixelebene, die dem übermäßig fett aussehenden Subpixel-Rendering beim Umkehrtyp in WebKit-Browsern entgegenwirkt - zu einem Preis.

Subpixel-Rendering Vs. Kantenglättung

Jedes Pixel auf einem LCD-Bildschirm besteht eigentlich aus drei nebeneinander liegenden Subpixeln: einem roten, einem grünen und einem blauen. Wenn Sie den Bildschirminhalt nicht mit hoher Vergrößerung anzeigen, werden diese Subpixel miteinander vermischt. Durch die Möglichkeit, sie einzeln anzusprechen, können Diagonalen und Kurven mit zusätzlicher Glätte erzeugt werden, indem einige der farbigen Subpixel an den Rändern dieser Formen aktiviert werden, die die Konturen praktisch aller Typografien bilden. Beim Versuch, dieses Ergebnis mit herkömmlichem Antialiasing auf Pixelebene zu erreichen, werden ganze Pixel in Graustufen verwendet, um das Auge dazu zu bringen, glatte Formen zu sehen. Im Vergleich zu den sauberen Ergebnissen, die durch die Adressierung von Subpixeln erzielt werden, werden die Buchstabenformen jedoch unscharf.

Überlegungen

Wenn Sie die -webkit-font-smoothing -Eigenschaft verwenden, die auf "Antialiasing" und nicht auf "Subpixel-Antialiasing" eingestellt ist, werden Sie einen schlankeren Typ sehen, der auf den ersten Blick sauberer und klarer erscheint, insbesondere wenn Sie ihn mit der face tag für den Zugriff auf umfangreiche typografische Optionen. Lassen Sie jedoch die Neuheit ihrer Dünnheit nach, und Sie sehen die Unschärfe, die sich aus dem Deaktivieren der Subpixel-Abtastung ergibt. Insbesondere bei kleinen Text- und Körperkopien kann diese Unschärfe das Lesen erschweren.

Empfohlen