Ihre Schriftarten in CSS. Nicht-Standardschriftschrift mit CSS. Schwierigkeiten der Verwendung von eingebauten Schriftarten

Der erste Teil des Kapitels widmet sich der Bekanntschaft mit CSS-Schriftarten. Auf dieser Seite erfahren Sie, wie Sie die Schriftarten in CSS anschließen, was Web-Schriften ist und wie Sie mit ihnen zusammenarbeiten, welche Schriftartformate verwenden, wie Google-Schriftarten verwendet werden können. Um mit dem Anschluss des CSS-Schrifts zu beginnen, sollten Sie ein einfaches Beispiel für den Anschluss des CSS-Schrifts in Betracht ziehen:

P (Font-Familie: Verdana;)

Dieses kleine Stück Code bedeutet das für alle Tags

Verdana-Schrift wird angewendet. Die Font-Familien-Immobilie legt fest, welche Schriftart- oder Schriftfamilie verwendet wird. Die richtige Anzeige dieses Stils im Browser des Benutzers hängt davon ab, ob die angegebene Schriftart auf seinem Computer installiert ist. Wenn in unserem Fall die Verdana-Schriftart auf dem Computer des Benutzers fehlt, zeigt der Browser den standardmäßigen Zeichensatz an.

In einem Zeitpunkt mussten Designer zusätzlich mehrere Ersatz-Schriftarten angeben, falls der Computer des Benutzers fehlen wird. Angenommen, Sie möchten einen Text mit der Verdana-Schriftart ausstellen und TrebucChet MS, Geneva-Schriftarten und irgendeine Schriftart ohne Serifen installieren. Das ist auf diese Weise geschrieben:

P (Font-Familie: Verdana, "Trebuchet MS", Genf, Sans-Serif;)

Bei der Verarbeitung dieses Codes prüft der Browser zunächst das Vorhandensein der Verdana-Schriftart auf dem Computer des Benutzers. Wenn die Schriftart vorhanden ist, der Inhalt der Tags

Wird diese Schriftart angezeigt. Wenn die Schriftart fehlt, prüft der Browser das Vorhandensein der folgenden Angaben auf der Liste der Schriftart - Trebuchet MS. Wenn diese Schriftart fehlt, wird die folgende Schriftart geprüft - Genf. Wenn auf dem Computer des Benutzers kein Genf vorhanden ist, wählt der Browser eine andere verfügbare Schriftart ohne Serifen und zeigt den Text an.

Beachten Sie: In dem Code haben wir den Trebuchet MS-Schriftnamen in Anführungszeichen aufgezeichnet. Sie müssen den Namen der Schriftart in doppelte oder einzelne Zitate annehmen, wenn Leerzeichen vorhanden sind.

Über das, was eine Schriftart mit SeriF (Serif) und ohne (Sans-Serif) ist, können Sie auf der Wikipedia-Seite lesen.

Web-Schriften

Die obige Methode der Verwendung von Schriftarten hat einen riesigen Minus - Sie sind in der Menge der Schriftarten begrenzt. Sie müssen mit nur denen ihrer Optionen zufrieden sein, die höchstwahrscheinlich auf den meisten Computern installiert sind.

Wie können Sie die Auswahl der Schriftarten erhöhen, um das Page-Design-Individuum herzustellen, Originalität hinzufügen? Web-Schriftarten kommen zur Rettung. Lesen Sie das Kapitel auf und Sie lernen, wie Sie mit ihnen zusammenarbeiten können.

Um die gewünschte Schriftart im Browser des Benutzers anzuzeigen, benötigen wir diese Schriftart auf seinem Computer. Es ist ziemlich einfach, es umzusetzen. Diese Methode zum Verbinden von Schriftarten auf CSS eröffnet vor Designer wirklich reichlich Möglichkeiten. Es ist jedoch erwähnenswert, dass ein Löffel im Honigfass ist: Zunächst unterstützt nicht jeder Browser ein bestimmtes Schriftformat (der dazu führt, dass die Schrift nicht erscheint), und zweitens, wenn die Datei mit einer Schriftart viel Gewicht hat, Es kann die Download-Seite verlangsamen.

Unterstützungsformat.

Wie kann man mit dem Problem des Ausfalls des Dateiformats umgehen? Schauen wir uns den Tisch an, in dem die beliebtesten Schriftformate angezeigt werden, und finden Sie heraus, welche Browser unterstützt werden von:

Hinweis: Sie können immer aktuelle Informationen zur Unterstützung für Schriftformate auf caniuse.com erfahren. In der Suchzeichenfolge müssen Sie den Namen des Formats (z. B. TTF) eingeben.

Wenn Sie mit modernen Browsern ausgerichtet sind, verwenden Sie einfach das TTF-Schriftartformat - das häufigste und verwendete. Wenn Sie, wenn Sie mehrere Formate einer Schriftart haben müssen, können Sie spezielle Online-Konverter aus einem Format in einem anderen verwenden und dann alle Dateien wiederum anschließen. Somit kann der Browser das Schriftformat auswählen, mit dem er funktioniert.

Wir verbinden eine Web-Schriftart mit @ font-face

Angenommen, Sie verfügen über Ihre eigene einzigartige Schrift mit dem Namen MyuniqueFont im TTF-Format und möchten, dass der grundlegende Text der Webseite von dieser Schrift angezeigt werden soll. Das erste, was zu tun ist, ist, die Font-Datei in den Ordner zu kopieren, in dem sich alle anderen Site-Dateien befinden. Um ein Durcheinander nicht zu erstellen, können Sie einen separaten Ordner speziell für Schriftarten erstellen, um es anzurufen, beispielsweise Schriftarten.

@ Font-Face (Font-Face: myuniquefont; SRC: URL ("Fonts / myuniquefont.ttf");)

Die Eigenschaft der Schriftfamilie in diesem Fall spielt in diesem Fall eine weitere Rolle: Damit weisen wir dem Namen den Namen zu, um diesen Namen beim Schreiben von Stil zu verwenden:

P (font-family: myuniquefont;)

Die zweite Zeile zeigt den Pfad zur Schriftartdatei an. In unserem Beispiel befindet sich die Datei myuniquefont.ttf befindet sich im Ordner Schriftarten. Sie haben eine URL möglicherweise unterscheiden.

Schriftarten Google-Schriftarten.

Google ermöglicht es, eine beliebige Schrift von der Kollektion von Google Fonts leicht zu verbinden. Alles, was Sie tun müssen, um die mit Ihnen gefällt Ihnen zu verwenden, - Geben Sie in Google mehrere Einstellungen auf der Schriftartseite an, wodurch der spezielle Link zu dieser Schrift kopiert wird, und fügen Sie Ihrem Web-Dokument hinzu.

Hinweis: Die gesamte Sammlung von Schriftarten von Google ist auf der Website verfügbar Google-Schriftarten . Die Seite, die Sie verschiedene Filter verwenden können, um nach Schriftarten nach Kategorien, Dicke, Alphabet zu suchen.

Im Folgenden beschreiben wir jeden Schriftanschlussschritt von Google. Um zu verstehen, worüber wir sprechen, wählen Sie eine beliebige Schrift auf der Seite Google Fonts und öffnen Sie sie, indem Sie auf die Schaltfläche Quick-Use-Taste klicken.

Schritt 1: Wählen Sie Intelligenz aus

Das Erste auf der ausgewählten Schriftwiederseite zeigt die Optionen für seine Inschrift sowie das Tachometer-Symbol an, was nur die Ladegeschwindigkeit des Schriftarts bedeutet. Je mehr Stile für die von Ihnen gewählte Schriftart, desto mehr Zeit ist es auf dem Download erforderlich. Es wird daher empfohlen, nur die Designoptionen auszuwählen, die geplant sind.

Schritt 2: Alphabet auswählen

Als nächstes gibt es auf der Seite eine Gelegenheit, eine Reihe von Zeichen zu wählen: Latina, Cyrillic usw., je nach Schriftart, nicht alle Alphabet-Varianten verfügbar. Ähnlich wie beim vorherigen Artikel ist es besser, ein Zecken nur gegenüber dem Alphabet zu setzen, das benötigt wird.

Schritt 3: Fügen Sie dem Standort Code hinzu

Der erste Weg impliziert, dass ein Link zum Google-Server zum HTML-Code hinzugefügt wird, von dem von der Schriftart heruntergeladen wird. Sie müssen den Bereitschaftsdatenteil kopieren und zwischen den Tags legen. In Ihrem HTML-Dokument. Beispiel:

...

Der zweite Weg ist, die Schrift mit der @Import-Richtlinie anzusetzen. Der fertige Code befindet sich auf der zweiten Registerkarte von Absatz 3 auf der Seite der ausgewählten Google-Schriftart. Es muss zu Beginn Ihres Stilblatts hinzugefügt werden (ansonsten wird die Datei nicht importiert). Der Code sieht so aus:

@Import-URL (http://fonts.googleapis.com/css?family\u003droboto&subset\u003dlatin.cyrillic);

Die Besonderheit der ersten Methode ist, dass Sie einen Link zu der Schriftart auf den Titel jeder Seite hinzufügen müssen, wo es geplant ist, verwendet zu werden. Es ist einfach, auf Websites mit einer kleinen Anzahl von Seiten einfach zu implementieren, aber problematisch für große Ressourcen. Das zweite Verfahren ist praktisch, da der Code am Anfang des äußeren Stilblatts platziert werden kann, und dann erhalten alle Seiten, auf die diese Tabelle angeschlossen ist, die gewünschte Schriftart, die mit der @Import-Richtlinie geladen wird.

Schritt 4: Stil erstellen

Nach der Implementierung vorheriger Schritte können Sie die Schriftart anwenden. Da die CSS-Regel geschrieben ist, haben Sie bereits früher gesehen:

P (Schrift-Gesicht: "Roboto", Sans-Serif;)

Wenn Sie in dem ersten Schritt mehrere Designoptionen ausgewählt haben (z. B. die mutige 700 fette Version), dann wird der Code im dritten Schritt leicht modifiziert:

@Import-URL (http://fonts.googleapis.com/css?family\u003droboto: 700.400 & Subset \u003d latein.Cyrillic);

Um dann dem Schriftzug Fat Hub zu geben, schreiben Sie auf diese Weise den CSS-Stil:

P (Font-Face: "Roboto", Sans-Serif; Font-Weight: 700;)

Hinweis: In Google-Schriftarten werden nur herkömmliche Einheiten von 100 bis 900 verwendet, um die Sättigung der Schriftart festzulegen. So entspricht das normale Design (Standard) dem Wert 400 (Normal), und das Standardmatch entspricht 700 (fett).

Die wichtigsten Vorteile von Google Fonts-Service lautet:

• benutzerfreundlichkeit (sogar der Neuling kann mit dem Dienst umgehen, und der nötige Code wird automatisch generiert - es bleibt nur noch kopiert).
• verfügbarkeit von Schriftarten (es ist nicht erforderlich, dass sie zahlen müssen);
• alle verwendeten Schriftartformate werden bereitgestellt (das bedeutet, dass jeder Browser genau das Schriftformat hochladen kann, mit dem er funktioniert).

Zu den Mängeln des Dienstes ist keine sehr große Auswahl an Schriftarten, insbesondere kyrillisch. Übrigens gibt es andere ähnliche Dienste im Internet, z. B. Typkit (bezahlt).

ERGEBNISSE

Heute haben wir mehrere Möglichkeiten zum Anschließen von Original- und Nicht-Standard-Schriftarten auf Webseiten. Jede dieser Methoden hat seine Vor- und Nachteile. Welche Option ist besser zu bedienen, Sie müssen sich selbst bestimmen. Es hängt oft von der Situation ab, und unterschiedliche Ansätze können in unterschiedlichen Fällen nützlich sein. Zu diesem Zeitpunkt müssen Sie nur wissen, wie Sie Schriftarten in CSS verwenden.

Hast du einen launischen Kunden, der "gemalte" Schriftarten erforderlich ist? Oder erstellen Sie gerade eine stilvolle Themen-Website, und ein kundenspezifischer Schreibtext wird die Idee Ihres Autors hervorheben? Betrachten Sie eine der Möglichkeiten, dieses Problem zu lösen.

Wenn es notwendig ist

Zunächst mit dem Anfang an den berechtigten Fällen berücksichtigen, in denen nicht standardmäßige Schriftarten benötigen.

• Stilvolles Menü.
• Stilvolle Schlagzeilen.
• Logo. Die Schaffung eines Logos ist eine ernsthafte Sache, viele Bücher zu dieser Gelegenheit sind geschrieben, lange Spezialisten werden in diesem Fall trainiert ... und der Autor wird ihr Brot nicht in Menschen nehmen, sondern ihre fünf Kopeken einsetzen. Wenn Ihr Logo der Text ist, zum Zweck der hochwertigen SEO-Optimierung folgt er es als Text.

Die Aufgabe besteht darin, Nicht-Standard-Schriftarten zu verwenden, so dass es keinen wesentlichen Anteil der Wahrscheinlichkeit des Benutzers Ihrer Internet-Ressource gibt.

Wege-Lösungen

Wie in den meisten Fällen hat jede Aufgabe mehrere Lösungen und unsere NEIN-Ausnahme. Gehen:

• Bild. Es gibt keine Konfigurationsflexibilität, die Geschwindigkeit der Seitenladung verschlechtert sich, die Last auf dem Server steigt, der SEO ist in Fällen überhaupt nicht.
• Blitz. Zusätzliche Dateien zum Download, benötigen Arbeitsfähigkeiten in Flash-Party (Textparameter sind auch hier), durchschnittliche SEO.
• Js. Zusätzliche externe Dateien (und alles, was daraus folgt), durchschnittlich SEO, Text kann nicht kopiert werden.
• Nicht-Standard-Font-S bedeutet CSS

Echter Samurai-Pfad oder "langes Live-CSS"

Bei der Lösung der Aufgabe helfen wir der CSS-Regel @ font-face, mit der Sie bestimmte Schriftarten in das Dokument laden und ihre Einstellungen ermitteln können.

@ Font-face (font- family: alexbrush- ordnung; src: lokal ("alexbrush-regulern"), URL ("./lexbrush-regular. OTF");)

Somit schließen wir die Notwendigkeit der ausgewählten Schriftart auf der Website des Besuchers aus.

Mit dem Entwurf dieses Typs können Sie TrueType-Schriftarten (TTF) und OpenType (OTF) anschließen.

Interessant: OpenType ist im Vergleich zu TrueType-Vorversuchspapiers groß und unterstützt einen größeren Zeichensatz mit einer kleineren Dateigröße.

Es scheint, dass dieses Thema auf diesem Thema geschlossen werden könnte, aber es gibt eine Sache ... Erinnern Sie sich an unsere "speziellen" Freunde, nämlich den Browsern der IE-Familie. Um eine nicht-standardmäßige Schriftart in IE zu implementieren, muss die Schriftart in eingebettetem OpenType-Format (EOT) sein.

Dies ist nicht nur ein einziger Fall, wenn dh Vorteile mehr Nutzen als Schaden angeht. Tatsache ist, dass das EOT-Format impliziert:

• Verschlüsselung. Die Datei enthält Daten zur Adresse des Projekts, also stehlen Sie die Schriftart und gießen Sie sich an die Angreifer an die Stelle, die nicht funktionieren wird.
• Kompression. Die Font-Datei wird komprimiert, wodurch die Zeitkosten für das Laden verringert werden.

Beachten Sie das oben genannte, ändern wir unser Beispiel:

@ Font-Face (Font-Familie: Alexbrush- ordnungspflichtig; SRC: lokal ("Alexbrush-regulern"), URL (./lexbrush- ordnungspolitisch. EOT);) @ Font-Face (Font-Familie: Alexbrush- Regel; SRC; SRC : lokal ("alexbrush-regulern"), URL ("./lexbrush-regular. otf"););)

Die praktische Erfahrung hat gezeigt, dass dieses Beispiel dieses Beispiel zur Befestigung von Bugs verbessert und die Anerkennung durch Browsern verbessert.

@ Font-face (font- family: "alexbrush-regulern"; SRC: URL ("Alexbrush-regulard.eot"); SRC: URL ( "Alexbrush-regulard..eot? #Iefix") Format ("Embedded-opentype"), URL ( "Alexbrush-regulard.svg # Journalregular") Format ("SVG"); URL ("Alexbrush-regulard.woff") Format ("WOFF"), URL ("Alexbrush-regulard.otf") Format ("TrueType"),)

Wichtig!!!

1. Flexibilität. Die Einstellung und Änderung von Textparametern ist nicht schwierig.
2. Geschwindigkeit. Die Mindestanzahl zusätzlicher Dateien zum Download verlangsamt die Seite nicht als die gleiche Anzahl von Elementen auf JS und Blitz.
3. SEO.. Der Text blieb der Text - die Profis sind offensichtlich.
4. Ein Beispiel ist in Browsern in Betrieb genommen: IE4, OP, FX3.5, CR2, SA1.
5. Bevor Sie die Schriftart anwenden, müssen Sie es optimieren (lesen Sie das Nachwort lesen).
6. Bei der Verwendung von erworbenen Schriftarten müssen Sie sich um ihre Sicherheit kümmern.
7. Wenn die Bandbreite des Kommunikationskanals klein ist, wird die Schriftdatei nicht geladen, der Benutzer sieht entweder eine einfache Schrift auf dem Standort des Nicht-Standards oder sieht grundsätzlich nichts aus.

Nachwort.

Schriftartoptimierung

Beim Erstellen eines Satzes von Zeichen versuchen Entwicklern, ein maximales Funktional aufzuladen, um das Zielpublikum so weit wie möglich sicherzustellen. Daraufhin führen sie Buchstaben, Zahlen, Interpunktionszeichen, zusätzliche Symbole, verschiedene Zeichnungsarten, eine Reihe von Schriftartenwerte usw. ein.

Infolge solcher Anstrengungen können Schriftdateien Zehn von MB übersetzen. Brauchen wir so eine Vielfalt? Um einen pikanten Stil zu geben, müssen wir (abhängig von der Situation) nicht unbedingt Interpunktionszeichen, eine Vielzahl von Charakteren benötigen. In Wahrheit gibt es nicht immer verschiedene Designs. Oder erlauben Sie Ihnen, Ihre Website streng unter dem Runet zu optimieren, können Sie ohne lateinische ...

Nun, Sie haben die Essenz bereits erwischt. Die Schriftart muss optimiert werden:

• Wir entfernen den gesamten Inhalt, der nicht nützlich ist, um die praktische Aufgabe zu lösen.
• Konvertieren Sie die Dateien in die erforderlichen Formate.

Wie kann man es machen? Im Internet gibt es eine Reihe von Dienstleistungen, mit denen Sie die erforderlichen Vorgänge durchführen können, zum Beispiel: Font-Face-Generator, Online-Schriftwandler, Web-Schriftart-Optimierer usw.

Schutz

Es dauert viel Zeit, um eine qualitativ hochwertige funktionale Schriftart zu entwickeln, und daher ist diese Schriftart einen guten Geldbetrag wert. Alle gekauften (legal) Schriftarten werden registriert und repräsentieren intellektuelles und industrielles Eigentum.

Beim Kauf einer Schriftart erfahren Sie das Recht, ihn auf das Web anzuwenden, aber wenn die Schriftart von Ihrer Ressource einen Angreifer auslöst, leiden die Verantwortung für den durch den Entwickler verursachten Schäden den Eigentümer der Site. Wie schützt man Ihre Schrift?

In IE wird alles an uns nachgedacht - der Schutz im EOT-Format ist bereits gebaut. Für alle anderen Beobachter der eindeutigen Lösung noch.

Natürlich gibt es natürlich neue Entwicklungen - zum Beispiel ein WOFT-Format, in dem das Thema des Schutzes ähnlich wie EOT entfernt wird, aber leider rühmt es nicht mit voller Unterstützung in den Browsern.

Sie können auch einfach kostenlose Schriftarten anwenden.

Diese Zeiten haben lange bestanden, als die Auswahl der Schriftarten für Webdesign auf den Standard, sogenannter "sicherer" Set beschränkt war. Es bestand aus nur neun Schriften, nämlich Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Wirkung, Times New Roman, Trebuchsm Frau und Verdana. Mit der Entwicklung der Sprache der Hypertext-Markierung und der Kaskadierungstabellen, die zum Entwerfen des Erscheinungsbildes von Webseiten verwendet werden, ist es möglich, fast alle Schriftarten in der Baudesign zu verwenden, unabhängig davon, ob diese Schriftarten auf dem Computer des Benutzers installiert sind oder nicht.

Um auf Ihrer Website zu verwenden, müssen Sie einige Original-Schriftarten verwenden, um eine Schriftart selbst zu haben, die bestimmte Formate mitbringen und eine Verbindung zum Site herstellen. Überlegen Sie, wie es möglich ist.

So verbinden Sie die Schriftart an die Site
Anschließen von Nicht-Standard-Schriftarten auf die Website können mindestens zwei Arten durchgeführt werden:

• SchnellWenn die Schrift selbst von spezialisierten Ressourcen von Drittanbietern geladen ist.
  
• gewöhnlicheWenn die Schriftart in allen Formaten, die Sie benötigen, auf demselben Server wie die gesamte Site in einem der Ordner seiner Vorlage gespeichert ist.
  

Betrachten Sie beide Methoden zu vereinfachten Beispielen.

Fast Font-Verbindung zur Site mit speziellen Diensten
Es gibt verschiedene Dienstleistungen, die verschiedene interessante Schriftarten speichern und die Möglichkeit bieten, sie an verschiedenen Standorten zu verwenden. Ein solcher Dienst ist Google-Schriftarten. Auf der Basis wird die Schriftverbindung wie folgt durchgeführt.
Ein anderer ähnlicher Service ist die WebFont.ru-Website. Die Verbindung seiner Schriftarten ist weitgehend dem obigen Beispiel ähnlich.
Unabhängig von anderen Dienstleistungen, die Schriftarten verbinden
Um nicht auf Dienste von Drittanbietern abzuhängen, ist es ratsam, Fonts in einer Vorlage direkt auf Ihrem Hosting oder einem Server zu speichern und anzuschließen. Es ist etwas komplizierter, aber nicht so sehr, dass diese Aufgabe nicht praktikabel ist.

1. Laden Sie Ihre Computerdatei mit einer Schriftart. Die meisten Häufig werden Schriftarten zum Herunterladen im Format bereitgestellt TTF. - TrueType-Schriftart, entwickelt von Apple und unterstützt von vielen modernen Betriebssystemen.
   
2. Um den Cross-Browser sicherzustellen, d. H. Kompatibilität und identische Schriftarten in verschiedenen Webbrowsern, müssen Sie die Schriftart in den folgenden Formaten an den Standort anschließen: tTF., eOT., woff., svg.. Sie können die Quelldatei mit der Schriftart in alle erforderlichen Formate mit Online-Diensten konvertieren, z. B.: ,.
   Es sei darauf hingewiesen, dass alle angegebenen Dienste auf einen Grad oder ein anderes wenig die Schriftarten während der Umwandlung verzerren. Viel besser mit dieser Aufgabe wird ein spezielles Hilfsprogramm angerufen FontPrep. Es ist jedoch nur für das Betriebssystem Mac OS vorgesehen.
   
3. Nachdem Sie alle Formate empfangen, müssen Sie einen separaten Ordner in der Vorlage anschließen. schriftartenin dem Sie die empfangenen Dateien kopieren.
   
4. Anschließen der Schriftart an die Site verwendet die Regel @ Schriftart auf die folgende Weise.

5. Der einfachste und angenehme Teil bleibt - der Zweck der nicht standardmäßigen Schriftart auf ein beliebiges Element des Designs. Zum Beispiel die gesamte Seite wie im folgenden Beispiel.

   Körper (
   Schriftfamilie: "ALSStory";
   Schriftgröße: 12px
   ) Im Parameter Font-Family müssen Sie den Namen der Schriftart in Übereinstimmung mit dem ähnlichen Wert der @ font-face-Regel angeben.
   

Mit der betrachteten Methode können Sie nicht standardmäßige Schriftarten verbinden, die nicht auf speziellen Diensten sind.

Bei dem Abschluss des Artikels möchte ich empfehlen, sich nicht an der dekorierten Site zu engagieren und nicht um viele nicht-Standard-Schriftarten zu installieren. Denken Sie daran, dass jedes neue Plug-Ins zu einer Erhöhung der Größe jeder Site-Seite und der Verschlechterung der Downloadgeschwindigkeit für Benutzer führt.

Der andere Tag, noch einmal, beschloss ich mich, mitzutreten zu wenden. Einer von mir angesehen, behaupte ich, dass diese Übung mit dem magischen Effekt etwas falsch besitzt, wenn alles richtig gemacht wird.

Nun, ich habe ein Experiment auf mich selbst gesetzt, und es war schwieriger zu springen, ich beschloss, eine "Labormerkmale" zu erstellen, um öffentlich zu machen und es auf einem verlassenen Blog zu veröffentlichen.

Altes Design stimmte nicht mit der neuen Idee übereinUnd ich dachte nicht lange, dachte mehr oder weniger wie aus dem allgemeinen WordPress-Repository.

Wissen Sie, was das Problem von einigen bereitgestellten Vorlagen von dort genommen hat? Das Problem liegt in der entzierten Kompatibilität mit kyrillischen Schriften. In meinem Fall litten Schlagzeilen. Da die Schriftart, die von CSS referenziert wurde, keine russischen Charaktere enthielt, wurden sie von der Standardschriftgabe (oder Sans oder Arial) entnommen. Infolgedessen waren die Schlagzeilen riesig und verdorben die ganze Ansicht. Ich musste denken so ersetzen Sie die Schrift.

Es gibt mehrere Möglichkeiten, dies zu tun.

Methode 1: dumm

Es geht auf die Tatsache, dass Sie die entsprechende Schriftart auf dem Netzwerk finden, auf dem Computer installieren, in CSS vorschreiben und Ihre Site als beabsichtigt sehen.

Der Rest sehe es weiterhin bestenfalls mit Standardschriftarten, und im schlimmsten, auch reversibel.

TU es nicht!

Methode 2: Wir transformieren das Design unter Standardschriftart

Dies ist die perfekteste Option.Leider ist es jedoch nicht immer geeignet, denn manchmal geht das "Highlight" des Designs aufgrund von ihm verloren. Berücksichtigen Sie diesen Ansatz jedoch immer, denn, egal wie schwer Sie versuchen, es kann sich herausstellen, dass der Clientcomputer die Schriftart immer noch von den verfügbaren Punkten verwendet.

Sichere Schriftarten, die fast alle Betriebssysteme sind, ist dies: Verdana (Perfekt für Texte), Einschlag. (manchmal sehr gut in Schlagzeilen), Arial, Arial Black, Comic Sans MS (Kaka, welche Neuankömmlinge lieben), Kurier neu. (geeignet für Beispiele für Code und Formulare), Georgia, Zeiten New Roman, Trebuchet MS.

Methode 3: Bild anstelle von Text

Die Option ist sehr crossbruster und eignet sich zum Dekoration statischer Elemente. Zum Beispiel - Standortkappen. Machen Sie einen transparenten PNG mit Text mit der gewünschten Schriftart, verarbeitet, wie Sie benötigen, und setzen Sie sich an die Site, ohne zu vergessen, Alt zu füllen. Oder dasselbe, aber der Text, den wir an einem Hintergrund halten und in JPG sparen.

Mit Ausnahme der Header war es notwendig, das Erscheinungsbild von Beiträgen und Widgets zu ändern. Nun, nicht für jeden Eintrag zu tun Ein separates Bild mit dem Titel?

Obwohl es Handwerker gibt, die Bilder mit Text-Headern mit Serverskripts erzählen, aber dies ist bereits eine Perversion.

Methode 4: cufon

Diese Äpfel können aus der Font-Datei mit einem Online-Generator http://cufon.shoquolate.com/generate/ erstellt werden.

Der einfachste Weg, um diesen Vorteil zu nutzen http://www.google.com/fonts. Wählen Sie die gewünschte Schriftart aus dem dargestellten und erhalten Sie den Berufscode, den Sie benötigen, um auf der Website (in den Kopf und in der Stildatei) einfügen müssen, wonach alles funktioniert.

Aber ich wollte das zusätzliche JavaScript nicht nutzen, wobei ich mich mit der Erzeugung von Applets usw. kümmerte usw. Ich wollte alles schnell und einfach tun. Darüber hinaus ist die Datei mit der gewünschten Schriftart lange verfügbar.

Methode 4: Verbinden Sie die Schriftart mit CSS an die Site

Im Internet voller Handbücher zu diesem Thema. Das Tricking der Fersen von ihnen kam jedoch zu einem bedauerlichen Ergebnis. Meine TTF-Schriftart wird normalerweise nur in IE angezeigt. In den übrigen Browsern wurde er gnadenlos durch Arial ersetzt.

Ich gestehe, ich bin kein Fan von IE und betrachte es als einen Browser, den Browsern herunterzuladen. Nicht mehr! Also musste ich eine leichte Verbesserung machen.

Um eine Schriftart mit CSS an die Site zu verbinden, benötigen wir eine Schriftarten selbst (Datei) und einen Online-Konverter http://onlinefontconomter.com/

Online-Schriften-Konverter können ein großartiger Set sein. Einige geschlossen, neue werden stattdessen wieder angezeigt, so dass, wenn dieses Spezifische nicht mehr ist, in Suchmaschinen auf dem Typ "Online Font Converter" auf den Typ "Online Font Converter" und versuchen, die Schriftarten dort zu erschießen. In diesem Beitrag werden die folgenden Wandler als Beispiel verwendet.

1. Kommen Sie auf der Konverterwebsite Sie haben genügend Schriftart und ziehen Sie hier in einem solchen Fenster (in der Regel in der rechten Spalte).

2. Laden Sie die Schriftart herunter In 4 Versionen: EOT, OTF, TTF und WOFF. Das sollte ausreichen. Der Browser wird im Prozess des Rendens der Seite denjenigen auswählen und herunterladen, dass es bequemer ist.

3. Fonts gießen zur Website. Ich habe dafür in der Wurzel des Site-Ordners erstellt F " Und hat sie dort gepostet.

Update 02/16/2015: Zur Zeit onlinefontconverter.com. Es wurde neu gestaltet, und keiner der vorgeschlagenen Schriftarten wurde konvertiert (((

Ich musste die Site font2web.com benutzen. Dies gibt alle erforderlichen Schriftarten sofort in einem Archiv ein. Günstigerweise!

4. Verbinden Sie die Schrift an die Site. Geben Sie dazu in der CSS-Datei oder in den entsprechenden Styles-Tags diesen Code ein.

@ Font-Face (Font-Familie: Etomoifont; SRC: URL (/f/myfont1.eot), URL (/f/myfont1.otf), URL (/f/myfont1.ttf), URL (/ F / MyFont1. Woff);)

schriftfamilie: Etomoifont; - Informiert dem Browser, wie man als geladene Schrift genannt wird. Der Name wird sich selbst finden.

sRC: URL (/f/myfont1.eot), URL (/f/myfont1.otf), URL (/f/myfont1.ttf), URL (/f/myfont1.woff); - Gibt den Pfad und den Namen der Schriftarten an.

Warum kommen Schriftarten in dieser Reihenfolge?

Zuerst ich setze EOT.. Dieses Format verwendet alte Version, dh.

Zweite — Otf.. Dies ist ein komprimiertes Format von Schriftarten, das theoretisch weniger wiegt.

Dritte — TTF.. Es wird fast alle Browser verstanden. Obwohl es auf verschiedene Weise geschieht. Beispielsweise kann es nicht in iOS geöffnet werden.

Letzte — Woff.. Es sollte gut an MAKS gelesen werden, aber es gab keine Zeit, noch nicht zu überprüfen.

5. Denn in der Stildatei Welche Familie von Schriftarten gibt Schlagzeilen (in unserem Fall Schlagzeilen) h2.).

h2 (Font-Familie: Etomoifont;)

Bereit!

Wenn die Schriftarten nicht angewendet wurden, stellen Sie sicher, dass die CSS-Datei in der Tatsache, dass die CSS-Datei von der Site verwendet wird (manchmal müssen Sie den Cache zurücksetzen, sucht manchmal eine andere CSS-Datei), zweitens, die die Schrift für die Klasse, die Sie angeben (ID oder Tag), die nicht in einer anderen CSS-Datei gesperrt ist, die danach lädt.

Der Charme der Methode ist, dass ich in der Zukunft diese Schriftart für einen Textbehälter einstellen kann.

Das ist was passiert ist.

Die Minus-Methode ist, dass die Browsereinstellungen einiger paranoiden Benutzer laden externe Schriftarten, Flash, Javascript, Bildern usw. verbieten können

Sei also nicht faul und überprüfen Wie Ihre Website aussehen wird, wenn Sie Schriftarten geladen haben, sind deaktiviert. Versuchen Sie, mit Safe aus zu spielen mode 2.und booten Sie dann wieder Ihre. Wenn die Abmessungen mehr oder weniger zusammenfallen und nicht verschwunden sind, bedeutet dies, dass es Reihenfolge ist.

Und weiter! Testmethoden nur auf Computern, bei denen die Schriftart, mit der Sie arbeiten, nicht installiert sind. Andernfalls erstellt es sich heraus methode Nummer 1..

Das ist alles. Mit dir war.
Zu neuen Treffen.

Jeder Webdesigner träumt davon, einen Standort mit einer schönen Typografie zu erstellen. Leider unterstützen Browsern nur ein paar Headsets, sogenannte "Sicher für Web" -Stypen. Der Standardset enthält die folgenden Schriftarten: Arial., Verdana., Mal, Georgia., Kurier neu. Und mehrere andere.

Headset Gibt einen Satz von einem oder mehreren Schriftarten an, von denen jedes aus Symbolen besteht, die gemeinsame Strukturen - Gewicht, Stil, Design, Zeichnung, Dichte, Größe, Größe, beispielsweise Schriftarten, ohne Turnschuhe (oder Groteskas), Schriftarten, Schriftarten mit Serifen (Antiqua), bestehen. Das Headset besteht aus einem Satz von Schildern (Zahlen, Buchstaben, Satzzeichen, Sonderzeichen können auch aus nicht alphabetischen Zeichen bestehen).
Schriftart - Dies ist ein Satz spezifischer Größen, Gewichts- und Stilfiguren. Zum Beispiel ist die Font Times New Roman Style Italic Size 16PX eine Schriftart, und es ist Zeit, dass der neue römische kursive Stil der Größe 10px ist, ist bereits ein weiterer.

Regel @ Font-Face Ermöglicht das Anschließen einer Vielzahl von Benutzerschriftarten. Der Browser lädt die Schriftarten im Cache und verwendet sie, um Text auf der Seite zu erstellen. Dieser Ansatz wird aufgerufen schriftarten einbetten.und eingebaute Schriftarten - web-Schriften.

Die @ Font-Face-Regel muss vor allen anderen CSS-Regeln platziert werden, da dieser Empfang die Seitenleistung verbessert. Herunterladbare Schriftarten können in einem auf dem Server erstellten Font-Fonts-Ordner platziert werden.

So verbinden Sie die Schrift mit der @ font-face-Regel, benötigen Sie:
1) Laden Sie die Font-Datei in mehrere Formate auf den Server, um alle Browser zu unterstützen,
2) Geben Sie den Namen der Schriftart an, registrieren Sie den Link in die Datei und setzen Sie die Schriftart Beschreibung,
3) Fügen Sie den Zeichensatznamen der Font-Family-Eigenschaft des Elements hinzu, der in dieser Schriftart angezeigt werden soll.

@ font-face (font-face: "webfont"; SRC: URL (webfon.de?) Format ("EOT"), / * IE8 +, Zeichen? Ermöglicht den Fehler im SRC * / URL-Wert um den Fehler Prozesser (WebFont.Woff) Format ("WOFF"), / * Alle modernen Browser, IE9 + * / URL ("TrueType"); / * Alle modernen Browser * /) P (font-face: "webfont", Arial, Sans -serif;)

Dieser Code sagt dem Browser an, Text innerhalb des Elements anzuzeigen.

Verwenden der Webfont-Schrift. Wenn der Browser aus irgendeinem Grund diese Schrift nicht laden kann, wählen Sie die aus der Liste geeignete Schriftart aus. Er bewegt sie in der angegebenen Reihenfolge, bis die Schriftart erfolgreich verwendet werden kann.

In jeder Schriftfamilie können Sie bis zu neun Fettwerte definieren (Gewicht). Daher müssen Sie für jede eingebettete Schriftart sowie für jede Zeichnung eine separate @ font-face-Regel einstellen, d. H. Sie können nicht in einer Regel zwei verschiedene Schriftarten oder eine Schriftart von einer Familie erklären, sondern verschiedene Arten und Gewichte.

@ Font-face (font-family: "webfont"; SRC: URL ("EOT"), URL ("webfond.woff) Format (" WOFFONT.TTF) -Format ("TrueType"); Schriftart -gewicht: mutig; font-style: italic;) @ font-face (font-face: "webfont"; SRC: URL (webfont.eot?) Format ("EOT"), URL (WebFont .woff) Format (" WOFF "), URL (" TrueType "); Font-Weight: 400; Schriftart: Normal;)

Im Allgemeinen können Sie für Schriftart die folgenden Eigenschaften einstellen:

@ Font-Face (Font-Face: "FontName"; SRC: URL () -Format (""); font-variante:; font-atchcr:; font-weight:; font-style:;)

Wenn Sie davon ausgehen, dass diese Schriftart auf dem Computer des Benutzers installiert ist, und möchte, dass die Schriftart nur nach der Überprüfung der Verfügbarkeit vom Benutzer laden soll, können Sie den Wert lokal () verwenden, um die Adresse anzugeben:

@ Font-Face (Font-Face: "WebFont"; SRC: Lokal ("WebFont"), URL (webfont.de?) Format ("EOT"), URL (WebFont.Woff) Format ("WOFF"), URL (WebFont.TTF) Format ("TrueType"); Font-Weight: Fettdruck; Schriftstil: Italic;)

Web-Schriftartformate.

Die @ Font-Face-Eigenschaft hat einen guten Support in Browsern, aber verschiedene Browser verwenden verschiedene Schriftartformate. Es gibt vier Hauptschriftformat:

Format WOFF. (Font-Format des Web-Open-Schriftarts), das Format des Schriftartnetzwerks, in Mozilla entworfen. Technisch WOFF kann nicht als Schriftformat bezeichnet werden, da es nur eine Hülle mit einer Komprimierungsfunktion darstellt. Das Format drückt Schriftarten in TTF / OTF-Format zur Verwendung im Internet. Mit WOFF können Sie auch Metadaten der Datei hinzuzufügen, z. B. Lizenzinformationen.

OTF / TTF-Formate (OpenType-Schriftart und TrueType-Schriftart) arbeiten in den meisten Browsern. Beide Formate werden frei verteilt.

EOT-Format Eingebetteter offener Typ) stellt von Microsoft-Entwicklern dar, dargestellt eine komprimierte Kopie der TTF-Schriftart, deren Wiederverwendung von der DRM-Technologie (Digital Rights Management, digitale Zugriffsrechte) verboten ist. Unterstützt nur in IE, ab der 8. Version.

SVG / SVGZ. Scalabe Vector Graphics - Art von Font-Dateien, die Vector Font-Zeichnung darstellen. In der Regel hat es kleinere Dateigrößen, wodurch die Leistung auf mobilen Geräten verbessert wird. Funktioniert in Opera Mobile und IOS Safari.

Schwierigkeiten der Verwendung von eingebauten Schriftarten

1) Schriftakten können große Größen sein, sodass in einigen Fällen @ Font-Face die Seite lädt.
2) Lizenzierte Einschränkungen, die keine freie Nutzung zulassen, sind einigen Schriftarten zugeordnet.
3) Einige Schriftarten sehen auf Webseiten einfach schlecht aus.