Das Hinzufügen einer neuen Schriftart zu einer Website ist nicht die einfachste Aufgabe. Wo wählen, herunterladen und So fügen Sie einer Website in CSS eine Schriftart hinzu? In diesem Artikel zeigen wir eines davon die bequemste Möglichkeiten zum Installieren und Verbinden der Schriftart mit der Site.
So fügen Sie eine Schriftart in CSS in eine Website ein
Wir haben zum Beispiel eine Schriftart Raleway.ttf und wir wollen es in allen Headern verwenden( h1) unserer Website. Führen Sie dazu die folgenden Schritte aus:
h1 ( Schriftfamilie: „RalewayRegular“; }
Jetzt werden alle Überschriften der 1. Ebene auf der Website in der von uns benötigten Schriftart angezeigt.
Wenn Sie mehrere Schriftarten (oder deren Stile) verbinden möchten, dann fügen Sie diese einfach unter der vorherigen hinzu:
@Schriftart { Schriftfamilie: „RalewayRegular“; Quelle: URL("../fonts/RalewayRegular.ttf" ) Format( „truetype“); Schriftstil: normal; Schriftstärke: normal; } @Schriftart{ Schriftfamilie: „RalewayBold“; Quelle: URL("../fonts/RalewayBold.ttf" ) Format( „truetype“); Schriftstil: normal; Schriftstärke: normal; }
Möglicherweise ist Ihnen aufgefallen, dass es verschiedene Schriftformate gibt – .ttf, .woff, .eot, .svg usw. Es gibt auch ein Format für moderne Browser. woff2, aber wir werden in einem der folgenden Artikel darüber sprechen. Normalerweise ist jede Schriftart in drei Formaten gleichzeitig verbunden. Dies geschieht, damit die Schriftart in allen Browsern korrekt angezeigt wird, einschließlich. und alte. Es sieht aus wie das:
@Schriftart { Schriftfamilie: „RalewayRegular“; Quelle: URL( "../fonts/RalewayRegular/RalewayRegular.eot") ; Quelle: URL( „../fonts/RalewayRegular/RalewayRegular.eot?#iefix“) format("embedded-opentype" ), URL( "../fonts/RalewayRegular/RalewayRegular.woff") Format( „woff“), URL( "../fonts/RalewayRegular/RalewayRegular.ttf") Format( „truetype“); Schriftstil: normal; Schriftstärke: normal; }
Hier folgt Achten Sie auf die Anschlussreihenfolge – das ist wichtig!
Wir werden nicht auf Details eingehen, sondern uns nur an das Aussehen dieses Designs erinnern.
Wenn Sie eine Schriftart nur in einem Format haben, verwenden Sie verschiedene Schriftartenkonverter. Hier ist einer davon.
So verbinden Sie eine Schriftart über verschiedene Dienste
Sie können zum Anbinden von Schriftarten auch den Dienst „fonts4web“ nutzen: 
Der einfachste Weg, Schriftarten zu verbinden
So verbinden Sie eine Schriftart mit einer Moguta CMS-Vorlage 
So fügen Sie einer Moguta CMS-Vorlage einen Link mit Google-Schriftarten hinzu
Jetzt wissen Sie, wie Sie mithilfe von CSS und mehr eine Schriftart zu einer Website hinzufügen. Gerne beantworten wir alle Ihre Fragen Heutzutage findet man zunehmend Websites, die nicht standardmäßige Schriftarten verwenden. Dies passt zu modernem Webdesign, bei dem Kreativität Vorrang vor Lesbarkeit hat. Natürlich kommt eine solche Kombination nicht oft vor, aber sie kommt vor. Auf englischsprachigen Ressourcen sind nicht standardmäßige Schriftarten sehr beliebt. Schauen Sie hier beispielsweise im Original, also in der Muttersprache des Autors. Und wir werden sehen, wie in fast jedem dritten Theme einzigartige Schriftarten verwendet werden.
Vom Autor: „Bevor ich diesen Artikel schrieb, habe ich viele Informationen zum Thema „Schriftarten“ durchgeblättert. Und an einen Punkt habe ich mich ganz deutlich erinnert: Viele Leute äußern sich negativ über die Anbindung nicht standardmäßiger Schriftarten. Genauer gesagt, sie empfehlen es nicht, sie sagen, es sei falsch, es sei eine schwere Belastung und dergleichen.
Tatsächlich wird eine solche Aussage in vielen Fällen als Aufdrängen der eigenen Meinung oder sogar als Vermittlung der eigenen Meinung eines anderen angesehen. Es ist erwähnenswert, dass absolut jede zusätzliche Verbindung die Site belastet. Wenn Sie diesem Argument folgen, können Sie sicher die Hälfte der Site abreißen. Wenn es überzeugendere Argumente für den Verzicht auf Schriftarten gibt, dann ja, bitte... andernfalls... muss man experimentieren.“
Was bedeutet benutzerdefinierte Schriftart?
Dies ist eine Schriftart, die in Software (Windows, Linux usw.) standardmäßig nicht verfügbar ist. Wenn der Benutzer also nicht über die entsprechende Schriftart in seiner Software verfügt, wird er automatisch die Standardschriftart des Systems verwenden. Dies verstößt gegen die ursprüngliche Idee des Autors, den gewünschten Charakter des Designs zu vermitteln.
Verbinden Sie Ihre Schriftarten mit der Website
Die Schriftartverbindung erfolgt über die @font-face-Regel in der CSS-Kaskadierungstabelle. Dazu gehören: Schriftart, relativer oder direkter Pfad und Prüfung auf Schriftartenpräsenz in der Benutzersoftware. Diese ganze Struktur sieht so aus:
@font-face ( Schriftfamilie: namefont;/*typeface*/ src: local("namefont"),/*check*/ url: (font/namefont.ttf);/*path*/ )
Erläuterung: Die Eigenschaft „font-family“ gibt die Schriftfamilie an und src:local prüft, ob die Schriftart des Readers installiert ist. Aber die Möglichkeit, dass die Schriftart installiert wird, kommt einmal in einer Million vor. Daher ist die „Check“-Zeile nicht so obligatorisch, aber der letzte URL-„Pfad“ muss unbedingt vorhanden sein (da dies der Pfad zur Schriftart selbst ist, die direkt auf die Site geladen wird).
Kompatibilität zwischen browserübergreifenden Schriftarten
Die Browserunterstützung sollte erwähnt werden, da es zu Inkonsistenzen kommen kann. Alle gängigen Browser und neuesten Versionen funktionieren perfekt mit der Verbindung von Schriftarten im Format ttf. Und wenn es um spätere Versionen, insbesondere IE, sowie Geräte von Apple geht, kann es zu Schwierigkeiten kommen. Dieses Problem wird durch spezielle Dienste gelöst, die es Ihnen ermöglichen, für jeden Browser separat ein Schriftformat zu generieren.
Meiner Meinung nach ist dies eine absolute Notwendigkeit. Lassen Sie es mich erklären: IE unter Version 10 erfordert bereits zusätzliche Aktionen. Der Prozentsatz seiner Verwendung ist jedoch sehr gering. Bei Apple-Mobilgeräten kommt es auf Minimalismus an. Sollte auf jeden Fall schneller und einfacher als normal sein.
| Format | Forscher | Chrom | Feuerfuchs | Safari | Oper | iOS | Android |
|---|---|---|---|---|---|---|---|
| TTF | 9.0+ | 4.0+ | 3.5+ | 3.1+ | 10.0+ | X | 2.2+ |
| OTF | 9.0+ | 4.0+ | 3.5+ | 3.1+ | 10.0+ | X | 2.2+ |
| EOT | 6.0+ | X | X | X | X | X | X |
| WOFF | 9.0+ | 5.0+ | 3.6+ | 5.1+ | 11.1+ | 5 | X |
| WOFF2 | X | 36.0+ | 35.0+ | X | 26.0+ | X | X |
| SVG | X | 4.0+ | X | 3.2+ | 9.0+ | 3.1+ | X |
Schriftformate
Schriftarten haben, wie viele andere Dateien auch, unterschiedliche Erweiterungen (Formate). In einem kurzen Rückblick schauen wir uns an, welche…
TTF (TrueType-Schriftarten)– das gebräuchlichste Schriftformat in Betriebssystemen. Es wurde bereits Ende der 80er Jahre entwickelt, einer Quelle zufolge von Apple, einer anderen Quelle zufolge zusammen mit Microsoft. Am häufigsten wird dieses Schriftformat zum Herstellen einer Verbindung zu einer Webseite verwendet. Basierend auf der Unterstützung aller gängigen Browser für die neuesten Versionen.
OTF (OpenType-Schriftarten)– Modifikation seines Vorgängers (TrueType) mit erweiterten Funktionen. Mehr Zeichen und weniger Gewicht. Es wurde 1996 von Adobe offiziell eingeführt und gemeinsam mit Microsoft entwickelt.
WOFF (Web Open Font Format)– erstellt auf Basis der ersten beiden Schriftarten mit einigen Änderungen.
WOFF 2.0 (Web Open Font Format)– geringfügige Änderungen in der Komprimierung.
EOT (Embedded OpenType)– 2007 von Microsoft exklusiv für Internet Explorer-Browser erstellt.
SVG-Schriftarten– Unterstützung für iOS Safari.
Schriftkonvertierungsdienst
Dennoch gibt es unterschiedliche Fälle, und wenn Sie die Schriftart in allen Browsern und Geräten unterstützen müssen, müssen Sie auf Dienste zurückgreifen.
Schritt 1.
Schritt 2.
Wählen Sie links im Skript das kyrillische Alphabet aus.
Schritt 3.
Entscheiden Sie sich für die Schriftart und klicken Sie auf das Symbol „Schnellverwendung“.
Schritt 4.
Die Startseite enthält Informationen, die in Schritte unterteilt sind:
1. Wählen Sie einen Schriftstil (normal, fett usw.);
2. Wählen Sie die Unterstützung aus (Latein, Kyrillisch usw.);
3. Verbindungsmethoden (weitere Details unten);
4. Schriftartenintegration.
Schritt 5.
Im letzten Schritt werden wir uns die Verbindungsmethoden ansehen. Tatsächlich ist alles sehr einfach. Bei jeder der drei Methoden handelt es sich um einen separaten Code, der je nach Auswahl auf seine eigene Weise verbunden ist.
1. Die Standardverbindung über ein Tag wird normalerweise zwischen Tags geschrieben
(WordPress-Datei: header.php).2. Importieren in eine kaskadierende Tabelle über die @import-Regel (WordPress-Datei: style.css).
3. Anbindung per JavaScript in einer separaten Datei oder auch zwischen Tags
.Nach dem Herstellen der Verbindung müssen Sie nur noch die Schriftart in den Stilen angeben.
Schriftfamilie: „Comfortaa“, kursiv;
Das ist alles! Ich hoffe, Sie haben in diesem Material etwas Nützliches für sich gefunden. Wenn Sie Fragen haben, stellen Sie diese bitte in den Kommentaren, seien Sie nicht schüchtern.
Die meisten Textelemente verwenden standardmäßig Times New Roman. In CSS gibt es die Möglichkeit, andere Schriftarten zu installieren. Sie können auch eine Schriftart in CSS einbinden, die ursprünglich nicht in Browsern bereitgestellt wurde. In diesem Thema werden wir uns ansehen, wie das geht.
Schriftfamilien
Schriftarten sind in Familien unterteilt. Es gibt folgende Schriftfamilien:
Serife - Serife
serifenlos - serifenlos
Monospace - Monospace
kursiv - kursiv
Fantasie - dekorativ
Sichere Schriftarten
Es gibt ziemlich viele Schriftarten. Die Schwierigkeit bei der Verwendung besteht darin, dass jedes Betriebssystem über eigene Schriftarten verfügt. Darüber hinaus zeigen verschiedene Browser möglicherweise nicht alle Schriftarten an. Wenn für ein Textelement eine Schriftart eingestellt ist, die auf dem Betriebssystem des Computers des Benutzers nicht verfügbar ist, wird der Text in einer anderen Schriftart angezeigt. Schriftarten, die auf allen Computern und in allen Browsern angezeigt werden, werden als sichere Schriftarten bezeichnet. Es wird angenommen, dass es keine absolut sicheren gibt. Dennoch gibt es eine Reihe von Schriftarten, die die überwiegende Mehrheit der Benutzer verwendet. Im Folgenden sind sichere Schriftarten und ihre Familien aufgeführt.
Times New Roman, Serife
Arial, serifenlos
Verdana, serifenlos
Tahoma, serifenlos
Impact, serifenlos
Trebuchet MS, serifenlos
Kurier Neu, Monospace
Comic Sans MS, kursiv
Sie können andere Schriftarten finden, wenn Sie in eine Suchmaschine eingeben: Standardschriftarten.
Schriftart einstellen
Um eine Schriftart in CSS zu ändern oder einzubinden, verwenden Sie die Eigenschaft „font-family“. Der Wert dieser Eigenschaft ist der Name der Schriftart. Erstellen wir beispielsweise einen Absatz und legen die Schriftart dafür fest:
Stil:
Mit der Eigenschaft „font-family“ können Sie mehrere durch Kommas getrennte Schriftarten angeben. Sie können auch eine Schriftfamilie angeben. In diesem Fall wird die zuerst angegebene Schriftart verwendet. Ist dies nicht der Fall, wird die nächste Schriftart verwendet und so weiter. Im Grunde ist es das, was sie auf echten Seiten tun. Dies geschieht, um sicherzustellen, dass die Seite wie erwartet angezeigt wird.
15 |
div (Schriftfamilie: Tahoma, Verdana, serifenlos; ) |
So fügen Sie eine benutzerdefinierte Schriftart in CSS ein
Neben den im Betriebssystem des Benutzers enthaltenen Schriftarten können auch andere Schriftarten verwendet werden. Sie können sie im Internet finden oder selbst erstellen. Es gibt viele benutzerdefinierte Schriftarten. Um sie zu finden, müssen Sie Schriftarten in eine Suchmaschine eingeben. Die Schriftartdatei muss heruntergeladen und an die Seite angehängt werden. Bei der Auswahl müssen Sie berücksichtigen, dass einige Schriftarten kostenpflichtig sind. Informationen dazu sollten Sie auf der Seite finden, von der Sie die Schriftart herunterladen.
Die Schwierigkeit bei der Verwendung benutzerdefinierter Schriftarten besteht darin, dass jeder Browser unterschiedliche Formate unterstützt. Daher müssen Sie bei Verwendung einer nicht standardmäßigen Schriftart überprüfen, wie die Seite in verschiedenen Browsern angezeigt wird. Es gibt viele Schriftformate. Am universellsten ist das Woff-Format. Es sollte in den meisten modernen Browsern funktionieren.
Um eine nicht standardmäßige CSS-Schriftart einzuschließen, verwenden Sie die @font-face-Regel. Es muss zwei Eigenschaften enthalten: Die Eigenschaft „font-family“ gibt den Namen der Schriftart an, unter der diese Schriftart auf der Site verwendet wird. Den Namen wählen Sie selbst. Und die Eigenschaft src gibt den Pfad zur nicht standardmäßigen Schriftartendatei an. Danach kann die Schriftart für jeden Selektor verwendet werden. In der Eigenschaft „font-family“ müssen Sie den Namen angeben, den Sie für die Schriftart gewählt haben.
Ich verwende beispielsweise eine Schriftartdatei namens unineue.woff. Es befindet sich im selben Ordner wie die Seite. Ich werde die Schriftart Nfont nennen.
Viele Designer, die seriöse und interessante Layouts erstellen, verfügen über eine Menge einzigartiger und schöner Schriftarten. Dank solcher Schriftarten erhält das Design seine Würze und Exklusivität. Nicht standardmäßige Schriftarten werden jedoch nur auf dem Computer angezeigt, auf dem sie bereits installiert sind. Damit Sie ordnungsgemäß mit ihnen arbeiten können, muss Ihnen der Designer alle Schriftarten zur Verfügung stellen, die er in seinem Layout verwendet. Denn beim Entwerfen des Layouts müssen Sie diese Schriftarten auf Ihrem Computer installieren. Da der Benutzer Ihrer Website jedoch nicht alle Schriftarten herunterlädt und nicht auf seinem Computer installiert, müssen Sie den Browser veranlassen, die erforderlichen Schriftarten selbst aufzurufen. Die Regel hilft hier, es gibt auch Optionen, Cufon zu verwenden oder Schriftarten von Google Webfonts oder Fontsquirrel zu laden, aber Google Webfonts und Fontsquirrel benötigen möglicherweise keine Schriftart, also überlegen wir uns die beste Option – das Verbinden einzigartiger Schriftarten mithilfe von @font-face.
Der einfachste Weg, eine Schriftart zu verbinden, besteht darin, sie in das Stylesheet zu schreiben:
@font-face ( Schriftfamilie: „PF Din CompPro“; src: url(„fonts/pfdintextcomppro-medium-webfont.ttf“); ) body( Schriftfamilie: „PF Din CompPro“, Arial, serifenlos ; )
Hier ist „PF Din CompPro“ der Name der Schriftart, und dann können Sie diese Schriftart für die erforderlichen Elemente der Site angeben, und „fonts/pfdintextcomppro-medium-webfont.ttf“ ist der Pfad zu Ihrer Schriftart, die sich in den Schriftarten befindet Ordner ist es wichtig, dass im Namen keine Leerzeichen vorhanden sind. In der Schriftartdatei ist es besser, diese durch einen Bindestrich zu ersetzen.
Dies ist der einfachste Weg, funktioniert jedoch nicht in allen Browsern und stellt ein großes Problem dar.
Jeder Browser unterstützt seine eigenen Schriftformate:
TrueType Schriftarten für Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
EOT Schriftarten für Internet Explorer 4+
WOFF Schriftarten für Firefox 3.6+, Internet Explorer 9+, Chrome 5+
SVG Schriftarten für iPad und iPhone
Daher müssen Sie aus einer Ihrer Schriftarten im .ttf-Format mehrere weitere derselben Schriftarten nur in einem anderen Format erstellen. Hier kann der Schriftartengenerator von fontsquirrel.com helfen. Laden Sie auf dieser Seite Ihre Schriftart herunter, wählen Sie die optimalen Einstellungen aus, aktivieren Sie das Kontrollkästchen, um die Rechtmäßigkeit der heruntergeladenen Schriftart zu bestätigen (einige Schriftarten kosten viel Geld und Sie müssen die Erlaubnis haben, sie zu verwenden), und klicken Sie dann auf die Schaltfläche „Laden Sie Ihr Kit herunter“. und Sie erhalten das gewünschte Archiv mit allen Ihren Schriftformaten.
Laden Sie aus dem Archiv alle Formate Ihrer Schriftarten herunter. Theoretisch sind dies 4 Dateien mit den Erweiterungen .eot, .svg, .ttf und .woff. Kopieren Sie diese Dateien in den Schriftartenordner auf Ihrer Website. Das Archiv enthält auch die Datei stylesheet.css - sie enthält alle Regeln zum Verbinden von Schriftarten, die Sie bereits aufgeschrieben haben. Sie können sie sicher in Ihr Stylesheet kopieren. Vergessen Sie jedoch nicht, Ihre Pfade zu den Schriftartdateien anzugeben, beispielsweise zum Schriftartenordner . Ein Beispiel dafür, was auf einer meiner Websites passiert ist:
@font-face ( Schriftfamilie: „PF Din CompPro“; src: url(“fonts/pfdintextcomppro-medium-webfont.eot“); src: url(“fonts/pfdintextcomppro-medium-webfont.eot?#iefix“ ) format("embedded-opentype"), url("fonts/pfdintextcomppro-medium-webfont.woff") format("woff"), url("fonts/pfdintextcomppro-medium-webfont.ttf") format("truetype" ), url("fonts/pfdintextcomppro-medium-webfont.svg#pf_din_text_comp_promedium") format("svg"); Arial, Tahoma, Verdana, serifenlos)
Mit diesen Parametern werden Schriftarten in jedem Browser angezeigt, einschließlich aller Lieblings-IE-7-8-9.
Wenn Sie nicht standardmäßige Schriftarten für das kyrillische Alphabet verwenden, d. H. Für russische Zeichen, und die Schriftart auf der Website nicht korrekt angezeigt wird, hilft möglicherweise die Erstellung einer Schriftart mit erweiterten Einstellungen. Laden Sie die Seite http://www.fontsquirrel herunter. com/tools/webfont-generator Ihre Schriftart und wählen Sie „Experten“-Einstellungen. Es gibt dort viele Einstellungen, ich weiß nicht alles, aber lesen Sie es sorgfältig durch und wählen Sie die benötigten aus. Um das kyrillische Alphabet zu unterstützen, wählen Sie im Subsetting-Block: Abschnitt Benutzerdefinierte Subsetting... aus und aktivieren Sie das Kontrollkästchen Kyrillisch. und überprüfen Sie auch die Sprachen und Formate, die Sie benötigen.
Hier ist ein Beispiel dafür, was ich bekommen habe: 
Im nächsten Projekt sehe ich wieder Überschriften und Menüs in einer nicht standardmäßigen Schriftart. Machen Sie es mit Bildern? Scheiße: umständlich, unflexibel, langsam. Blitz? Ich kann ihn nicht ausstehen. Javascript? Im Moment natürlich die beste Lösung, aber es ist immer noch eine Krücke, die uns an die Einschränkungen von Browsern erinnert. Es ist an der Zeit, sich mit den Standards auseinanderzusetzen: Was sie bieten und wo sie bereits funktionieren.
Die Notiz
Im Gegensatz dazu ist eine benutzerdefinierte Schriftart eine Schriftart, die den meisten Website-Besuchern wahrscheinlich fehlt.
Aufgabe
Implementieren Sie eine benutzerdefinierte Schriftart, ohne Bilder, Javascript und Flash zu verwenden. Wir verwenden nur die neuesten Fortschritte in .
Lösung
Aber für den IE ist es nicht so einfach. Obwohl es das erste war, das die Implementierung von Schriftarten von Drittanbietern unterstützte (seit 1997 mit der Veröffentlichung der 4. Version von Internet Explorer!!!), erfordert es ein spezielles Format für die Schriftart – EOT (Embedded OpenType). Das EOT-Format löst gleich zwei Probleme:
- komprimiert die Schriftartendatei, wodurch ihr Gewicht um ein Vielfaches kleiner wird (Tests von Kollegen zufolge komprimiert diese Methode besser als RAR-, ZIP- und gzip-Methoden).
- verschlüsselt die Datei: Informationen werden in die Schriftartdatei geschrieben, wo sie verwendet werden sollen. Diese Schriftart funktioniert außerhalb dieser Adresse nicht.
Als Ergebnis sieht das Verbinden der Schriftart in Stilen wie folgt aus:
/* nur für Internet Explorer */ @font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.eot); ) /* weiter für alle anderen Browser */ @ Schriftart (Schriftfamilie: Scriptorama; src: local("Scriptorama"), URL(Pfad zu/Scriptorama.ttf); ) [...] h1 (Schriftfamilie: Scriptorama, Arial; Schriftstärke: normal;
Anstelle eines Hacks können Sie auch verwenden.
Update 23.08.11 Eine vollständigere Syntax zum Einbetten von Schriftarten, die einige mögliche IE-Fehler und eine bessere Browserunterstützung berücksichtigt:
@font-face ( Schriftfamilie: "JournalRegular"; src: url("journal-webfont.eot"); src: url("journal-webfont.eot?#iefix") format("embedded-opentype"), URL("journal-webfont.woff") Format("woff"), URL("journal-webfont.ttf") Format("truetype"), URL("journal-webfont.svg#JournalRegular") Format("svg "); Schriftstärke: normal; Schriftstil: normal; )
Die Notiz
Update 10.11.10 Im IE funktioniert lokal möglicherweise nicht. Darüber hinaus ist die Schriftart möglicherweise überhaupt nicht verbunden. In unseren Projekten achten wir auf diesen Punkt: Wenn es nicht funktioniert, entfernen wir es einfach für IE Local.
Vorteile:
- Flexibilität – der Websitebesitzer kann beliebige Texte nach Belieben ändern;
- schnelle Ladegeschwindigkeit – eine minimale Anzahl externer Dateien mit beliebiger Textmenge in einer nicht standardmäßigen Schriftart;
- maximale Geschwindigkeit der Site – keine zusätzlichen Elemente in der DOM-Struktur, keine Skripte und Flash-Objekte, die die Site verlangsamen;
- der Text verhält sich wie Text (schließlich bleibt er Text), d.h. fällt auf, reagiert auf Änderungen in Farbe, Kühnheit, Stil usw., ideale SEO;
- Recht einfache Umsetzung auch unter Berücksichtigung von Schriftoptimierungen.
Mängel:
Komprimierung und Konvertierung von Schriftarten
Wenn die Schriftartenentwickler versuchen würden, es allen recht zu machen, wird die Schriftart höchstwahrscheinlich viele, viele Zeichen enthalten und dementsprechend viele, viele wiegen. Die Schriftart Arial Unicode MS enthält also 51.000 Zeichen und wiegt mehr als 23 Megabyte! Es ist an der Zeit, darüber nachzudenken, ob die Website Udmurtische oder finno-ugrische Sprachen verwenden wird. Und auch diverse Zusatzzeichen, Satzzeichen und Zahlen? Sie sollten auch darauf achten, dass jede Schriftart eine bestimmte Anzahl von Stilen hat: normal, kursiv, fett, halbfett. Eine Schriftart kann bis zu 9 Fettschriftarten enthalten (beachten Sie die zulässigen Werte).
Was zu tun ist
Wir schließen aus der Schriftart alles aus, was zur Erfüllung der Aufgabe nicht erforderlich ist. Wird die Schriftart beispielsweise nur für das Menü verwendet, sind Satzzeichen, diverse Zusatzsymbole und Zahlen überflüssig.
Wie macht man
Folgendes kann dabei helfen:
Onlinedienst @font-face Generator
Was kann:
- zwei Betriebsmodi: Easy – für diejenigen, die sich nicht damit befassen möchten und Expert – für maximale Optimierung
- Verschiedene Ergebnisformate und alles an einem Ort! Diese. Es ist nicht erforderlich, True Type zunächst für alle Browser zu komprimieren und dann separat in EOT für IE zu konvertieren
- verschiedene Möglichkeiten, Ergebnisse zu erzielen. Bis hin zum Schutz der Schriftart vor lokaler Verwendung und der Datei für Cufon!
- Präzise Auswahl der Zeichen für eine komprimierte Schriftart. Sie können die Sprache und einen Satz zusätzlicher Zeichen angeben, den Bereich der verwendeten Zeichen angeben, einfach die benötigten Zeichen auflisten oder eine Symbiose aller Methoden verwenden
- Für diejenigen, die in CSS schwach sind, werden sogar Stilregeln gebildet
Für das Experiment habe ich eine 145-KB-Schriftart mit der Testaufgabe „Für Menü verwenden“ komprimiert. Ich habe nur kleine russische Buchstaben hinterlassen. Die endgültige Schriftgröße betrug 8 KB. Toll!
Mängel:
- EOT wird generiert, ohne an eine bestimmte Domäne gebunden zu sein (bei ernsthaften Projekten müssen Sie EOT trotzdem separat durchführen)
- Es können nicht alle lizenzierten Schriftarten verarbeitet werden (das ist ein relativer Nachteil)
Eindruck- fantastisch, ausgezeichnet, super-super, großartig!!! Ich werde mir ein PayPal-Konto zum Spenden besorgen.
Web-Font-Optimierer
Ein Onlinedienst, der es Ihnen ermöglicht, nur die erforderlichen Zeichen zu hinterlassen. Funktioniert.
Vorteile: einfach und klar. Das Ergebnis ist eine komprimierte True Type-Schriftart, eine EOT-Schriftart für IE und CSS-Code für die Verbindung.
Der Nachteil: Der Dienst ist nur für eine streng festgelegte Liste von Schriftarten verfügbar, die sie auf ihrer Website haben.
SCHUSS
Software von Microsoft. Hilft bei der Konvertierung von Schriftarten in EOT. Außerdem ist es unmöglich, die Schriftart außerhalb der angegebenen Site zu verwenden. Sie können das Skript herunterladen und sich auf der dem Skript gewidmeten Seite näher damit vertraut machen.
TTF2EOT
Aus dem Namen geht hervor, dass eine Schriftart von TTF in EOT konvertiert wird. Es funktioniert lokal über die Befehlszeile, was an sich nicht praktisch ist. Sie können das Skript herunterladen und mehr darüber auf der Projektwebsite lesen.
Online-Schriftkonverter
Einfach zu verwenden, ermöglicht die Konvertierung lizenzierter Schriftarten. Verfügbar.
Nachteile: Eine Anmeldung ist erforderlich.
Wie sieht es mit dem Schriftartenschutz aus?
Wenn die Schriftart von hoher Qualität ist, wird sie von hochprofessionellen Fachleuten entwickelt, oft von einem Team aus Fachleuten, oft über einen Zeitraum von mehr als einem Monat. Eine solche Schriftart kann nicht weniger kosten als „Zhiguli“ vom Fließband. Schriftentwickler begannen, sie als Marken einzutragen und sicherten so die Rechte des Urheberrechtsinhabers an der Schrift auf der Ebene des gewerblichen Rechtsschutzes.
Diese. Um eine Schriftart im Web zu verwenden, muss der Websitebesitzer die Schriftart mit dem Recht erwerben, sie im Web zu verwenden. Aber Akquise ist das halbe Problem. Außerdem muss die Schriftart vor illegalem Kopieren geschützt werden. Solche Probleme gibt es fast nicht, wenn die lizenzierte Schriftart auf der Website mit Bildern oder mithilfe von Javascript implementiert wird. Wenn Sie es jedoch über @font-face implementieren, liegt die Schriftart offen auf dem Server, die jeder Benutzer herunterladen kann. Und schon jetzt drohen Klagen.
Die Notiz
Für Millionen kleiner Websites kann und wird die illegale Verwendung von Schriftarten folgenlos bleiben, aber coole, kommerzielle, insbesondere internationale Projekte sollten ernsthaft über den Kauf von Lizenzen nachdenken.
Wie schütze ich eine Schriftart?
Für den IE wurde dieses Problem sofort gelöst – das EOT-Format verschlüsselt die Datei. Daher verfügen wir über eine Schriftart, die nur auf dieser Website funktioniert.
