In letzter Zeit scheint jeder über Hummer zu sprechen. Nicht die Krebstiere aus dem Meer, sondern die Webschrift. Für diejenigen, die noch nichts davon gehört haben, ist Hummer ein gutes Beispiel für eine beliebte Google -Schriftart, die in Webseiten eingebettet ist.
Einbetten von Schriftarten ist nicht so neu, wie Sie vielleicht denken. Im Jahr 1998 führte CSS 2 die @font-face-Regel vor. In der Theorie konnten Designer theoretisch jede TrueType- oder PostScript -Schriftart auf einen Benutzer -Computer für die Anzeige auf Webseiten herunterladen. Leider unterstützte zu dieser Zeit nur Internet Explorer 4 die Regel. Es gab weit verbreitete Befürchtung, dass Schriftarten, die teuer für die Lizenz waren, raubkopiert würden. Heute hilft CSS 3 immer noch nicht beim Problem der Piraterie, aber alle Webbrowser unterstützen die Regel. Die Bildschirmauflösungen haben sich auch seit dieser Zeit dramatisch verbessert. Wenn Sie also noch keine Schrift eingebettet haben, ist es jetzt an der Zeit, dies zu tun.
Bevor wir über die Verwendung von Web -Schriftarten in WordPress sprechen, treten wir einen Schritt zurück und schauen Sie sich Schriftarten im Web im Allgemeinen an.
Die grundlegendste Unterstützung für Schriftarten stammt aus dem Betriebssystem, das der Benutzer verwendet. Dies kann Dutzende von Schriftarten für ein Desktop- oder Laptop -System für nur drei Schriftarten auf Android bieten.
Leider bleibt dies ein ziemlich Topf -Glückssystem. Wir alle sind uns bewusst, wie schlecht Helvetica auf Windows-basierte Maschinen aussieht, wenn sie auf 16px und darunter eingestellt sind, und dass Arial in einigen älteren Versionen von OS X weniger als fantastisch aussehen kann.
Viele dieser Diskrepanzen sind entstanden, da das ursprüngliche Apple Mac -Betriebssystem mit der alten Druckmaschinentechnologie von 72 Punkten pro Zoll gebunden war. 10 Punkt -Schriftarten wurden somit 10 Pixel auf dem Display zugeteilt. Zu dieser Zeit bot Apple vertikale (Porträt-) Monitore an, die in der gleichen Größe wie Standard-American Paper waren, und vom Bildschirm zu einer gedruckten Version konnte ein direkter Eins-zu-Eins-Vergleich durchgeführt werden. Microsoft hingegen wählte 96 ppi auf der Grundlage der Personen, die eine zusätzliche 1/3 der Entfernung von einem Computermonitor entfernt haben als von einer gedruckten Seite. Somit wurde alles auf einem Windows-basierten Computer 1/3 größer gemacht.
Die Dinge haben seit den neunziger Jahren einen langen Weg zurückgelegt, als diese Technologien auftauchten, und wir haben jetzt eine Vielzahl verschiedener Bildschirmgrößen und -auflösungen, mit denen wir uns befassen können. Wenn Sie jedoch nicht eine Schriftart angeben, wird das Gerät und der Browser der Benutzer weiterhin die Wahl für Sie entscheiden.
Ein weiteres Problem ist, dass einige Organisationen die Schriftarten auf Benutzerncomputern einschränken. Ich arbeitete einmal in einer Organisation, deren Computer nur Georgia und Verdana installieren ließen. Dies war so, dass Briefe und E -Mails, die von Mitarbeitern gesendet wurden
Das Beste aus eingebauten SchriftartenNicht der Verwendung von Unternehmensschriften, den meisten Desktop- und Laptop -Computern - haben Schriftarten für die Microsoft Core -Schriftarten für das Webprojekt erstellt. Diese Schriftart von 1996 umfasste Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana und Webdings. Obwohl auf Versionen dieser Schriftarten oder deren Äquivalente als auf den meisten Desktops und Laptops angewiesen sind, kann der Browser möglicherweise nicht angewiesen werden, um die Schriftarten wie erwartet anzuzeigen.
Solche Einschränkungen können durch Verwendung eines -Spackstapels minimiert werden. Dies setzt eine CSS -Regel für den Browser, um eine von einer Reihe von Schriftarten zu verwenden. Es enthält immer einen Haken aller Serifen (mit kleinen Verzierungen am Ende der Striche) oder ohne Serif (ohne Verzierungen). So haben wir eine Schriftfamilie: Cambria, "Hoefler-Text", "Befreiungsserife", Times, "Times New Roman", Serif. Der Browser sollte Ihren "Stack" durchsuchen und Text mit der ersten definierten Schriftart anzeigen, die in Ihrer Liste auf dem Computer der Benutzer vorhanden ist. Wenn es keine davon finden kann, verwendet es eine Fallback -Schriftart, die in diesem Beispiel definiert ist, als Serife.
Ziel ist es, eine Reihe von Schriftarten auszuwählen, die bei einer Reihe von Browsern in einer Reihe von unterschiedlichen Auflösungen und Zoomniveaus gut machen.
Es gibt eine hervorragende Diskussion über Schriftstapel des kanadischen Designers Amrinder Sandhu hier.
Leider hilft die Verwendung eines Schriftart -Stacks nicht, wenn Ihre Zuschauer Handheld -Geräte verwenden. Android -Geräte verwenden Droid -Sans, Droid -Serif und Droiden -Sans Mono, während Apple iOS -Geräte Helvetica Neue verwenden, die eine Vielzahl von Stilen und Gewichten aufweist.
Sie möchten wahrscheinlich mehr Kontrolle darüber haben, wie Ihre WordPress-Seiten aussehen, als sich auf die integrierten Schriftarten einer Vielzahl von Betriebssystemen und -versionen zu verlassen. Wir können dies überwinden, indem wir Schriftarten einbetten.
Schauen wir uns nun die Arten der verfügbaren Web -Schriftarten an.
Die überwiegende Mehrheit der verfügbaren Schriftarten ist in irgendeiner Weise lizenziert. Wenn Sie einen Computer, ein Tablet oder ein Mobiltelefon kaufen, das ein Betriebssystem installiert hat, ist ein Teil der Kosten die Lizenzierung der Schriftarten. Es gibt jedoch eine Reihe von Möglichkeiten, um eine Vielzahl von kostenlosen eingebetteten Schriftarten zu verwenden.
eingebettete Schriftarten sind Zeichensätze, die für die Zeit, in der die Seite aktiv ist, von einer Drittanbieter -Plattform auf einen Benutzer von Benutzern heruntergeladen und beim Schließen der Seite verloren gehen. Dadurch kann das Dienstleistungsunternehmen die Kontrolle über die Schriftart behalten, die Schriftart jedoch anstellen, ohne dass sie bezahlt werden müssen, um sie zu verwenden. Es gibt eine große Anzahl von Unternehmen, die Schriftarten bedienen. Die bekanntesten sind:
Alle Schriftarten auf diesen Plattformen und eine Reihe anderer verwenden die Open -Schriftart -Lizenz. Die Ziele der Open Font -Lizenz (OFL) sind es, die weltweite Entwicklung kollaborativer Schriftarten zu fördern, die Schöpfungsbemühungen der Schriftart akademischer und sprachlicher Gemeinschaften zu unterstützen und einen kostenlosen und offenen Rahmen zu bieten, in dem Schriftarten in Partnerschaft geteilt und verbessert werden können mit anderen.
Der Vorteil offener Schriftarten besteht darin, dass sie auf Ihren Websites frei verfügbar sind, ohne dass jährliche Lizenzgebühren zahlen müssen. Der Nachteil besteht
bezahlte Schriftartender Organisationen, die Premium -Schriftarten für die Webnutzung anbieten, ist der in Deutsch ansässige Schriftart vielleicht der beliebteste Markt für bezahlte Schriftarten. Es gibt hochwertige Schriftarten sowie ungewöhnliche Sätze von Glyphen wie Ulrike Rauschs Set von Küchenfrucht und Gemüse, Gabeln und Messern, Töpfen und Haushaltsgeräten, Frigcook.
Wenn Sie ein Adobe Creative Cloud -Konto haben, erhalten Sie automatisch Zugriff auf den Typkit -Service des Adobe. Typkit bietet über 450 Schriftarten. Der Haken ist, dass die Lizenz, während Sie die Schriftarten in gedruckten Publikationen und auf Ihren persönlichen nicht kommerziellen Websites verwenden können. Wenn Sie für einen Kunden arbeiten, können Sie nur Web-Schriftarten verwenden, wenn Sie ein Adobe Business-Konto haben. Adobe schlägt vor, ein Konto für den Kunden während der Entwicklung und der Hand zu errichten. Dies hat den Nachteil, dass die Site, wenn der Kunde sein Konto nicht zahlt, zu den Fallback -Schriftarten in Ihrem definierten Schriftstapel zurückgeht, d. H. Die Systemschriften.
Es gibt eine Reihe von Plugins, mit denen Sie Web -Schriftarten auf Ihrer WordPress -Website verwenden können. Einfache Google -Schriftarten sind eine der beliebtesten. Ich konzentriere mich nicht auf Plugins in diesem Artikel, sondern schaue mir vielmehr an, wie man dies manuell selbst macht, indem ich Änderungen an unserem Thema vornehme. Darüber hinaus sind einige Themen auf dem Markt mit verschiedenen Webschriftoptionen ausgestattet.
Der tatsächliche Code variiert von Service zu Service. Ich werde die Methoden für Google -Schriftarten und Adobe Edge/Typkit skizzieren. Andere Dienste funktionieren auf ähnliche Weise. Denken Sie zunächst jedoch daran, Ihre Website zu sichern (oder idealerweise an einer separaten Entwicklungskopie zu arbeiten) und an Kopien der Dateien zu arbeiten, falls etwas schief geht. Änderungen des Stylings sollten unter Verwendung von untergeordneten Themen vorgenommen werden, damit Ihre Änderungen nicht jedes Mal überschrieben werden, wenn das Thema aktualisiert wird.
Es gibt drei Methoden (abgesehen von Plugins) zum Anzeigen externer Schriftarten auf Ihren WordPress -Seiten und Beiträgen mit Google -Schriftarten: @import, Link und JavaScript.
Sobald Sie Ihre Schriftart ausgewählt haben, klicken Sie auf die Schaltfläche Schnellnutzung. Wenn Sie angeboten werden, überprüfen Sie die erforderlichen Gewichte und Stile und die Charakter -Sets.
Als nächstes müssen Sie die Einbettungsmethode auswählen. Die einfachste Methode besteht darin, die @import -Regel zu style.css -Datei des Themas hinzuzufügen, das Sie ändern möchten. Es scheint keine Rolle zu spielen, wo Sie den Code in die Regeln von Style.css platzieren. @Import blockiert jedoch alle anderen Inhalte vom Herunterladen, bis es seine Aufgabe beendet hat. Wenn Sie diese Methode für mehrere Schriftarten verwenden möchten, sollten Sie die Anforderungen in eine @Import -Regel kombinieren.
Die zweite Methode ist gleich einfach, verwendet die Link -Methode und der Code ist auf der Registerkarte Standard enthalten. Diesmal wird der Code in die Header.php -Datei eingereicht. Platzieren Sie den Code oben in der Datei. Sie können dann den Namen der Schriftart zu Ihrem Schriftart hinzufügen. Denken Sie daran, es als erste Schrift hinzuzufügen, gefolgt von bevorzugten Systemschriften und dem Fallback -Schriftstil.
Hier ist erwähnenswert, dass das Blog von Google Web-Schriftarten besagt, dass der Internet Explorer, wenn ein Skript-Tag vor der Deklaration von @font-face vorhanden ist, keinen Seiteninhalt anzeigt, wenn die Schriftdateien das Download beendet haben. Wenn die Dateien nicht heruntergeladen werden, kann der Internet Explorer -Benutzer möglicherweise eine leere oder teilweise geladene Seite hinterlassen. Platzieren Sie also die @font-face-Deklaration so früh wie möglich in der Datei.
Eine weitere Methode besteht darin, die Schriftart in der Datei functions.php zu
zu verbringen. Die unten gezeigte Funktion lädt die erforderlichen Schriftstile und Gewichte.
Schließlich können Sie die Schriftart mit JavaScript laden. Es gibt Argumente für und gegen die Verwendung von JavaScript, aber die Anzahl der Benutzer mit ausgeschaltetem JavaScript ist sehr klein. Der Code wird im Header.php des untergeordneten Themas hinzugefügt, wo es zwischen den Tags und platziert wird. Noch hier schlägt Google vor, dass es das erste Element sein sollte. Auf diese Weise laden die Schriftarten, während die anderen Teile der Seitenlast geladen werden, und dies sollte den „Blitz des nicht styierten Textes“ vermeiden.
Adobe Typkit -Schriftarten zu WordPress ist etwas weniger einfach. Während Sie ähnliche Methoden wie für Google -Schriftarten verwenden können, können weniger erfahrene Entwickler die Typkit -Schriftarten für WordPress -Plugin verwenden. Sobald das Plugin installiert wurde, wird in Ihrem Einstellungsmenü angezeigt. Denken Sie erneut daran, WordPress zu sichern, bevor Sie diese Modifikationen vornehmen.
Um Typkit zu verwenden, melden Sie sich über die Creative Cloud -App bei Ihrem Konto an. Sobald Sie eine Schriftart ausgewählt haben, erstellen Sie ein Kit. Geben Sie Ihrem Kit einen Namen und fügen Sie dann den Domänennamen der Website hinzu, auf der Sie die Schriftart verwenden. Sobald Sie Ihre Site -Details eingegeben haben, erhalten Sie ein Stück JavaScript. Kopieren und speichern Sie diese in einer Textdatei mit einem Klartext -Editor wie textedit oder notepad.
Der nächste Schritt besteht darin, Ihre Schriftart auszuwählen, zu Ihrem Site -Kit hinzuzufügen und zu veröffentlichen. Fügen Sie weitere Schriftarten hinzu, die Sie verwenden möchten, und veröffentlichen Sie sie.
Gehen Sie nach der Veröffentlichung des Kits zu den Typkit -Schriftarten für WordPress -Plugin.
Fügen Sie den Code hinzu, den Sie in der Textdatei gespeichert haben.
Fügen Sie die CSS -Code -Selektoren nach Bedarf hinzu. Im Beispiel habe ich nach dem Title als H1-Text angezeigt (WordPress-Seite und Posttitel sind H1-Text.). Ich habe auch Untertitel hinzugefügt, der die H2-Unterschrift im Hauptkörpertext ist. Beachten Sie, dass es eine gute Idee ist, vor der Benennung Ihrer Selektoren zu überprüfen, ob die Namen noch nicht von Ihrem Thema verwendet werden. Sie können dies tun, indem Sie die Elemente mithilfe der Entwickler -Tools in Ihrem Browser inspizieren. Vergessen Sie nicht, Ihren Bildschirm nach jeder Änderung zu aktualisieren. Es kann einige Minuten dauern, bis die Schriftart auf Ihrer Website verfügbar ist.
Schließlich wird auch empfohlen, dass Sie bei jeder Schriftart immer sowohl die Eigenschaften der Schriftgewicht als auch bei der Schrift im Schriftarten im Stil festlegen. Auch dies hilft Ihnen dabei, die Kontrolle über die Anzeige der Schriftart über die unzähligen möglichen Plattformen zu behalten.
SchlussfolgerungSeien Sie jedoch nicht versucht, eine große Anzahl von Schriftarten hinzuzufügen, nur weil Sie es können - eine meiner ersten Aufgaben in der visuellen Kommunikation in der High School bestand darin, die Anzahl der Schriftarten auf Getreidepaketen zu zählen (es gab über 25 Schriftarten an ein Corn Floaks Packet!). Weniger ist oft mehr bei Schriftarten, und es ist normalerweise die beste Praxis, sich auf zwei oder drei Designs zu beschränken, nicht nur aus einer Sicht der Ladegeschwindigkeit, sondern auch aus einer visuellen Sichtweise.
Google bietet eine Schriftart-Paaring-Funktion im Pop-Out. Grafikdesign ist ein Handwerk, das Jahre dauert, um zu meistern. Wenn Sie jedoch ein paar gute Schriftarten einbetten, wird sichergestellt, dass das von Ihnen gewählte Design von allen Benutzern gesehen wird.
häufig gestellte Fragen zur Verwendung von Web -Schriftarten in WordPress
Sie können die Schriftgröße in WordPress mit CSS ändern. Gehen Sie zu Aussehen> Anpassen> zusätzliche CSS in Ihrem WordPress -Dashboard und fügen Sie eine CSS -Regel hinzu, um die Schriftgröße zu ändern. Um beispielsweise die Schriftgröße aller Absätze auf 16px zu ändern, können Sie die folgenden CSS verwenden: P {Schriftgröße: 16px; }.
Wie kann ich eine Web-Safe-Schrift in WordPress verwenden? Sie können einfach auf die Schriftart in Ihrem CSS verweisen. Um beispielsweise die Arial-Schriftart für alle Absätze zu verwenden, können Sie das folgende CSS verwenden: P {Schriftfamilie: Arial; }.
Wie kann ich eine Serifenschrift in WordPress verwenden? Um beispielsweise die Georgia-Schrift für alle Überschriften zu verwenden, können Sie das folgende CSS verwenden: H1, H2, H3, H4, H5, H6 {Schriftfamilie: Georgia; }.
Ja, Sie können verschiedene Schriftarten für verschiedene Teile Ihrer WordPress -Site verwenden. Sie können dies tun, indem Sie CSS verwenden, um verschiedene Schriftarten auf verschiedene HTML -Elemente anzuwenden. Zum Beispiel könnten Sie eine Schriftart für Überschriften und eine weitere Schriftart für Körpertext verwenden. WordPress verwenden ein Plugin wie einfache Google -Schriftarten. Mit diesem Plugin können Sie die Schriftarten im WordPress Customizer vorantreiben, bevor Sie sie auf Ihre Website anwenden. > Ja, Sie können eine Schriftart verwenden, die bei Google-Schriftarten oder in den Standard-Web-Safe-Schriftarten nicht verfügbar ist. Sie können dies tun, indem Sie die Schriftartdateien in Ihr WordPress -Themenverzeichnis hochladen und dann CSS verwenden, um die Schriftart auf Ihre Website anzuwenden. Denken Sie daran, die Lizenz der Schriftart zu überprüfen, bevor Sie sie verwenden.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Web -Schriftarten in WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
