Das Schriftface JQuery -Plugin

Key Takeaways

• Das Fontface JQuery-Plugin vereinfacht den Prozess der Verwendung benutzerdefinierter Schriftarten auf Websites, um sicherzustellen, dass die Kompatibilität des Cross-Browsers und schnellere Ladezeiten durch das Laden der erforderlichen Schriftdateien geladen wird.
• Das Plugin unterstützt alle von der @font-face-Regel unterstützten Schriftart-Dateitypen, einschließlich TrueType-Schriftarten (TTF), Web Open-Schriftformat (WOFF) und skalierbarer Vektorgrafik-Schriftart (SVG) und kann mit einem Content-Management-System (CMS) verwendet werden.
.
• Um das Fontface JQuery -Plugin zu verwenden, muss man die Plugin -Datei von der offiziellen Website herunterladen, in das Projekt einbeziehen und die JQuery -Syntax verwenden, um das Plugin anzurufen und die Schriftart anzugeben, einschließlich des Pfades zur Schriftart auf dem Server.

Aus der Sicherheit der Gräben werden die Browserkriege immer noch geführt. Eine der härtesten Schlachtfronts des Krieges ist @Font-Face. Sie müssen proprietäre Erweiterungen benötigen, um neue CSS3 -Eigenschaften zu verwenden - wir können damit umgehen. Selbst verhärtete Veteranen können sich jedoch nicht darauf vorbereiten, wie viel Browser-spezifischer Code erforderlich ist, um @font-face erfolgreich zu implementieren. Zeit, sich vorzubereiten! Bereit?

@font-face {
  font-family: "BestFontEver";
  src: url('file/path/filename.eot');
  src: local('☺'), url('file/path/filename.woff') format('woff'), url('file/path/filename.ttf') format('truetype'), url('file/path/filename.svg#BestFontEver') format('svg');
}

Und selbst das setzt keine Elemente für die Verwendung Ihrer neuen Bestfontever -Schriftart ein. Es registriert einfach, dass Sie es verwenden möchten, und fordert die Browserquelle diese neue Schriftart an. Die gute Nachricht ist, dass nach der Registrierung die Schriftart so verwendet werden kann, wie wir immer Schriftfamilie verwendet haben. Nehmen wir an, wir haben eine seriF-Schriftart:

#element, .elements {
  font-family: "BestFontEver", Helvetica, Arial, sans-serif;
}

Warum also so viele Optionen bei der Registrierung?

Bestandsbestand der Kämpfer

• .eot (oder eingebettete OpenType-) Schriftdateien sind Microsoft -Truppen. Wenn Sie also möchten, dass Bestfontever im Internet Explorer angezeigt wird, benötigen Sie eine .eot -Version.
• Web Open -Schriftart oder .Woff ist der neueste Soldat im Konflikt. Es wurde von Mozilla entwickelt und wird von Firefox, Chrome, Opera und IE9 unterstützt.
• Als nächstes kommen TrueType -Schriftarten mit der .ttf -Erweiterung, die Apple Ende der 1980er Jahre entwickelte. Diese Schriftarten werden von Safari, Opera, Firefox und Chrome
unterstützt
• Das SVG -Format? Das gibt es für Plattformen, die SVG wie Ihre iOS -Geräte umfassen: iPhones, iPads und alles andere, was mobile Safari ausführt.
• Und dieser letzte SRC -Eintrag? Lokal ('☺')? Für den Fall, dass ein Benutzer Ihre Seite bereits über eine installierte Schriftart bezeichnet ist, namens Bestfontever. Es schützt Ihre Bestfontever -Schriftart, indem Sie ihre lokale Schriftart nicht laden. Diese Technik wurde von Paul Irish entwickelt, sodass Sie seine Erklärung überprüfen können, warum es eine gute Idee ist.

Ihr Supersoldat

Wo lässt dich das? Die Schlachtlinien werden gezogen, aber der Nebel des Krieges wird nicht so schnell anheben. Was Sie wollen, ist eine Möglichkeit, @font-face-Sourced-Schriftarten schnell und einfach auf Ihre Seiten zu bringen. Hier kommt JQuery ins Spiel! Wir können ein Plugin verwenden, um unser Fußsoldat zu sein, während wir uns im Hauptquartier zurücklehnen und darauf warten, dass die Browser es bekämpfen. Dann müssen wir nur ein jQuery.css () -Stilobjekt bereitstellen. Das Schriftface JQuery -Plugin ist eine großartige Möglichkeit, Schriftarten auf Websites anzuwenden, die Sie nicht kontrollieren, um schnell zu prototypisieren, wie Schriftarten während des Designs aussehen, um weniger erfahrene Entwickler eine größere Kontrolle oder sogar-sogar-wenn Sie dies möchten-für Ihre produktionsbereiteten Seiten zu bieten:

@font-face {
  font-family: "BestFontEver";
  src: url('file/path/filename.eot');
  src: local('☺'), url('file/path/filename.woff') format('woff'), url('file/path/filename.ttf') format('truetype'), url('file/path/filename.svg#BestFontEver') format('svg');
}

Das ist es, und das ist die lange Version! Nachdem wir das Plugin ein wenig optimiert haben, können wir die Anforderungen für genau diese reduzieren:

#element, .elements {
  font-family: "BestFontEver", Helvetica, Arial, sans-serif;
}

Sie können die Details von Schriftfamilien ziemlich sicher entfernen und dennoch den Stapel wie SO diktieren:

$("#element, .elements").fontface({
  fontName : "BestFontEver",
  fontFamily : ["Best Font Ever", "BestFontEver", "Helvetica, Arial, sans-serif"],
  filePath : "/_fonts/",
  fileName : "bestfontever-regular-webfont"
});

Um die Notwendigkeit zu entfernen, Filepath -Details zu liefern, haben wir gerade eine Standardeinstellung im Plugin festgelegt. Suchen Sie nach dem Standardobjekt im Plugin -Code:

$("#element, .elements").fontface({
  fontName : "BestFontEver",
  fileName : "bestfontever-regular-webfont"
});

Sie können immer noch alle einmaligen Filepathen liefern, die Sie benötigen, aber das Einstellen in das Plugin macht es feuer und günstig. Noch besser, wenn Sie eine Schriftart mit unterschiedlichen Gewichten oder Stilen haben, können Sie diese verwenden:

$("#element, .elements").fontface({
  fontName : "BestFontEver",
  fontStack : "Helvetica, Verdana, Arial, sans-serif",
  fileName : "bestfontever-regular-webfont"
});

Schnapp dir das Plugin und probiere es selbst aus! Sie finden tolle, kostenlose @font-face-radum-Schriftarten an Websites wie http://code.google.com/webfonts/ (für TrueType Fonts), http://webfonts Und ein letzter Tipp? Wenn Sie sich ziemlich sicher sind, dass ein großer Teil Ihres Publikums Ihre Schriftart installiert hat, können Sie den üblichen Namen in Ihrem Schriftart Stack verwenden, um ihre lokale Version zu laden. Es ist tatsächlich das, was wir in unserem ersten Beispiel gemacht haben. Verwenden des akzeptierten Namens-Best-Schriftart aller Zeiten-in Ihrem Schriftart Stapel Wenn es nicht installiert ist, werden wir unseren Stapel bis zu etwas festhalten, und das wird hoffentlich unser @font-face sein. wir sind auf Ihrer Seite Der Krieg ist verdammt verdammt, aber mit Verbündeten wie Jquerys @font-face-Plugin werden Sie den Krieg gewinnen, bevor Sie es wissen!

Häufig gestellte Fragen zum Fontface JQuery Plugin

Was ist das Fontface JQuery -Plugin und wie funktioniert es? Es funktioniert, indem die Schriftartdateien von Ihrem Server geladen und mit CSS in Ihre Website eingebettet werden. Dieses Plugin verwendet die @font-face-Regel, eine CSS-Funktion, mit der Sie Online-Schriftarten angeben können, um Text auf Ihren Webseiten anzuzeigen. Wenn Sie das Fontface JQuery-Plugin verwenden, können Sie sicherstellen, dass Ihre ausgewählte Schriftart auf allen Browsern, die die @font-face-Regel unterstützen

Wie installiere ich das Fontface JQuery -Plugin? Danach können Sie die JQuery -Syntax verwenden, um das Plugin aufzurufen und die Schriftart anzugeben, die Sie verwenden möchten. Denken Sie daran, den Pfad zur Schriftart Datei auf Ihrem Server aufzunehmen. Es vereinfacht den Prozess der Verwendung benutzerdefinierter Schriftarten und spart Ihnen Zeit und Mühe. Außerdem wird die Kompatibilität der Kreuzbrowser-Kompatibilität gewährleistet, was bedeutet, dass Ihre gewählte Schriftart auf allen Browsern, die die @font-face-Regel unterstützen, korrekt angezeigt werden. Dieses Plugin ermöglicht auch schnellere Ladezeiten, da es nur die erforderlichen Schriftdateien lädt. Sie müssen nur das Plugin für jede Schriftart anrufen, die Sie verwenden möchten, und geben Sie für jede Schriftart die Schriftdatei an. Auf diese Weise können Sie verschiedene benutzerdefinierte Schriftarten für verschiedene Elemente auf Ihrer Website verwenden. Dies umfasst TrueType -Schriftarten (TTF), Web Open -Schriftformat (WOFF) und skalierbare Vektorgrafik -Schriftart (SVG).

Wie kann ich sicherstellen, dass meine benutzerdefinierten Schriftarten schnell geladen werden? Dies kann durch die Verwendung eines komprimierten Schriftart -Dateiformats wie WOFF erfolgen. Sie können auch einen Schriftart-Hosting-Dienst verwenden, der schnelle Lieferzeiten anbietet. In diesem Fall verwendet der Browser die nächste Schriftart in Ihrem CSS -Schriftstapel. Sie müssen nur die Plugin -Datei in Ihr CMS aufnehmen und das Plugin in die CSS -Datei Ihres Themas aufrufen. Sie sollten auch überprüfen, ob der Pfad zu Ihrer Schriftart korrekt ist. Wenn Sie weiterhin Probleme haben, können Sie die Dokumentation des Plugins konsultieren oder Hilfe von der Community suchen. Sie sollten jedoch immer die Lizenz der Schriftart überprüfen, die Sie verwenden, um sicherzustellen, dass die kommerzielle Nutzung zulässig ist.

Das obige ist der detaillierte Inhalt vonDas Schriftface JQuery -Plugin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!