Russische Schriftarten für Webdesign. Sichere Schriftarten. Jetzt ist es an der Zeit, das Design Ihrer Roboter mithilfe von Webfonts zu verbessern

Text ist das wichtigste Mittel zur Übermittlung von Informationen in der Welt und daher einer der wichtigsten Bestandteile einer Website. In einer solchen Situation erscheint es natürlich und logisch, dass es die Pflicht jeder Autorität auf der Website ist, dafür zu sorgen, dass ihre Texte nicht zu informativ und langweilig sind, sondern auch gut aussehen. Moderne Webdesign- und Layout-Technologien stellen hierfür ein großes Arsenal an Werkzeugen bereit. Heute werden wir über die wichtigsten davon sprechen – die Schriftart und die Merkmale ihres Designs auf Websites.

Schriftart- Nicht nur ein dekoratives Element auf der Website. Neben der utilitaristischen Funktion der Textvisualisierung spielt Wein eine ästhetische und psychologische Rolle, die alle Aspekte der Interaktion mit dem Kunden beeinflusst. Eine fette Schriftart, die einer ästhetisch ansprechenden Website ähnelt, ist leicht und angenehm zu lesen, während eine unklare oder schlecht gewählte Schriftart das Lesen zu einer Herausforderung macht und dem Leser unangenehme Gefühle nimmt. Einige Beispiele für die Auswahl origineller Schriftartenlösungen bei der Gestaltung von Websites gemeinnütziger Organisationen:

Wenn uns nun die positive Wirkung der Verwendung schöner Schriftarten auf der Website klar wird, liegt die Schuld daran an der Ernährung. „Wie verwenden Sie also nicht standardmäßige Schriftarten auf Ihrer Website?“. Der Schlüssel, dies herauszufinden, liegt im rationalen Funktionsprinzip von Computerschriftarten.

Computerschriftart– eine Datei in einem einzigen Format, die eine Reihe von Buchstaben und Zeichen beschreibt, die von einem Programm oder Betriebssystem verwendet werden, um Zeichen auf dem Bildschirm anzuzeigen. Dies hat, um Wikipedia zu paraphrasieren, eine Reihe wichtiger Aspekte, die für unseren Respekt wichtig sind, wenn wir mit Schriftarten auf einer Website arbeiten.

1. Songdateiformat. Die Datei hat eine Schriftart, sodass sie von dem Programm, mit dem wir arbeiten, geändert werden kann, das möglicherweise im Format eines „synchronen Programms“ vorliegt. Bei Computerschriftformaten gibt es ein Muster, das automatisch das Problem der Inkonsistenz mit sich bringt. Es ist wichtig, auf die Wahl der Schriftart zu achten, da Sie nicht von dem Programm beeinflusst werden, in dem der Text angezeigt wird.
2. Vikorist OS-Programm. Die Schriftartdatei muss für das System physisch zugänglich sein, damit sie zur Anzeige des Textes verwendet werden kann. In den Köpfen des Internets ist dies ein nicht triviales Rätsel. Obwohl die Website auf vielen verschiedenen Computern angezeigt wird, können wir nichts daran auszusetzen haben, dass sie nicht über die erforderlichen Schriftarten verfügen.
3. Beschreibung des Buchstaben- und Zeichensatzes. Wir müssen sicherstellen, dass die Schriftart Glyphen enthält, die alle Zeichen im angezeigten Text beschreiben. Wenn wir beispielsweise versuchen, russischen Text in eine andere Schriftart, beispielsweise kyrillische Glyphen, umzuwandeln, können wir nichts finden.
4. Einstellung zur Darstellung von Symbolen. Es ist notwendig, das Programm über die Teile zu informieren, die möglicherweise in unterschiedlichen Schriftarten angezeigt werden, und dabei den Text zu überprüfen.

Da wir uns nun über die Probleme im Zusammenhang mit der Verwendung von Schriftarten auf Websites im Klaren sind, wollen wir uns ansehen, wie das aktuelle Weblayout damit umgeht.

Suchen Sie nach einer Schriftart für Ihre Website

Das Wichtigste, was wir tun müssen, ist, die geeignete Schriftart zu kennen, auszuwählen und zu gehen:

• es unterstützt die erforderliche Sprache (Zokrema, Russisch)
• Die Lizenz für die Schriftart erlaubt deren Verwendung auf der Website

Dabei können uns verschiedene Online-Bibliotheken, sowohl kommerzielle als auch nichtkommerzielle Schriftarten, dabei helfen, sie zu finden, zu prüfen und zu testen.

• MyFonts ist die größte Online-Schriftartenbibliothek und bietet ein manuelles Suchsystem mit detaillierten Informationen zum Ursprung jeder Schriftart und der Möglichkeit, Optionen auszuwählen oder auszuwählen.
• Google Webfonts- eine von Google erstellte Bibliothek mit zahlreichen Schriftarten. Alle Schriftarten aus dieser Sammlung können auf allen Websites frei angezeigt werden, und Google bietet außerdem eine einfache Benutzeroberfläche für deren Verwendung.
• Adobe Edge Web Fonts ist ein ähnlicher Dienst von Adobe, der einen großen Katalog allgemein verfügbarer Schriftarten bereitstellt, einschließlich Suche und Test sowie der Möglichkeit, diese in eine Website einzubetten.
• free.type.org.ua – eine Sammlung frei gefärbter Schriftarten mit einem Hauch von Kyrillisch.

Yakshcho in der genannten Schriftart Yogo Kirilichna ist offensichtlich nicht eingebettet (Sammlung, Museo Sans Cyrillic), dann ist der Scho im Piditrimsi-Film repariert, der Simal Submiss, der Scho Masive, Abo, reichlich vorhanden, Einige Online-Bibliotheken bieten diese Möglichkeit. Alternativ können Sie Schriftartentestdienste nutzen, zum Beispiel:

• Typetester – Testen und Nivellieren von Schriftarten durch Betrachtung des Testtextes mit Parametern, die konfiguriert werden müssen, wie z. B. Punktgröße, Zeilenabstand usw.
• Wordmark ist ein einfacher Dienst zum Testen von auf einem Computer installierten Schriftarten durch die Anzeige einer Testphrase wie bei der Eingabe

Die Schriftart darf auf der Website nur verwendet werden, wenn die vom Designer oder der Agentur erhaltene Lizenzvereinbarung (EULA) dies zulässt. Viele Schriftartenanbieter (einschließlich kyrillischer Schriftarten, z. B. ParaType) bieten eine solche Lizenz an. Als Alternative zum Kauf einer Weblizenz für eine Schriftart bei einer lokalen Agentur gibt es Web Font Embedding Services. Sie verfügen außerdem über eine Schriftartenbibliothek, um ihren Kunden die Möglichkeit zu geben, Schriftarten anzupassen und sie gegen eine monatliche Gebühr auf ihren Websites zu erwerben (Überprüfung der Beschaffungsdienstleistungen). Die beliebtesten unter ihnen:

Alle diese Dienste sind jedoch aufgrund ihrer Ausrichtung in erster Linie auf den Überseemarkt (der das lateinische Alphabet verwendet) ausgerichtet und die Anzahl der Schriftarten, die das kyrillische Alphabet unterstützen, ist gering. Der Abonnementpreis für diese Dienste ist hoch und kann für ein bestimmtes nichtkommerzielles Projekt unerschwinglich sein. Eine würdige Alternative dazu ist die Verwendung frei erweiterter Schriftarten, beispielsweise von Google Webfonts oder Adobe Edge Web Fonts, die bereits erfunden wurden und auch von mehreren Designern und Agenturen veröffentlicht werden (ein Bericht zur Problematik der Lizenzierung von Schriftarten für die web ist im Artikel A List Apart veröffentlicht).

Schriftformate für das Web

Es gibt eine Reihe von Desktop- und Web-Font-Formaten, die in verschiedenen Systemen unterschiedlich funktionieren und für unterschiedliche Aufgaben geeignet sind. Hunderte unserer Websites nutzen die neuesten Formate:

TTF- TrueType ist ein Format für Computerschriftarten, das von Apple seit den 1980er Jahren entwickelt wurde und derzeit von Apple und Microsoft in ihren Betriebssystemen verwendet wird. Schriftartdateien können erweitert werden .ttf.

OTF- OpenType ist ein Dateiformat für Schriftarten, das gemeinsam von Microsoft und Adobe zur Verwendung auf ihren Betriebssystemen entwickelt wurde. OpenType verfügt über mehr Rechenleistung als TrueType und unterstützt einen größeren Zeichensatz bei kleinerer Dateigröße. Plattformübergreifendes OpenType wird dadurch erreicht, dass sowohl Windows- als auch Mac OS-Versionen der Schriftart in einer Datei enthalten sind. Schriftartdateien können erweitert werden .ttf oder aber otf.

EOT- Embedded OpenType – ein kompaktes Schriftformat, das auf OpenType-Websites verbreitet wird und von Microsoft entwickelt wurde. Dateien solcher Schriftarten können erweitert werden .eot. Das Embedded OpenType-Format ist proprietär und wird vom Internet Explorer-Browser unterstützt.

WOFF- Web Open Font Format – ein Format einer komprimierten OpenType- oder TrueType-Schriftart, einschließlich eines Containerbilds, das Originalschriftarten im OpenType- oder TrueType-Format enthält. In diesem Fall werden die ausgegebenen Schriftarten komprimiert, um die Übertragung zu erleichtern, und werden von einer Reihe von Daten begleitet, die Einblicke in die Schriftart ermöglichen.

SVG- Skalierbare Vektorgrafiken – eine Sprache für das Layout skalierter Vektorgrafiken, die zur Beschreibung und Bereitstellung der Schriftart verwendet werden kann.

Websites werden in unterschiedlichen Browsern betrachtet, die auch auf unterschiedlichen Betriebssystemen laufen (Windows, Mac OS, Linux, Android, iOS, etc.). Mit einer benutzerdefinierten Schriftart können wir sicherstellen, dass sie in den meisten (idealerweise allen) Situationen angezeigt wird. Da diese Optionen nicht vollständig plattformübergreifend sind, müssen sie angepasst werden, um das gleiche Ziel zu erreichen. Es wird empfohlen, eine Kombination von Formaten zum Einfügen auf der Website zu wählen: TTF, WOFF, EOT, SVG. Ob eine TTF- oder OTF-Schriftart, Sie können sie konvertieren, vikoryst zum Beispiel, der Fontsquirrel-Generator – ein Dienst, der es Ihnen ermöglicht, eine Schriftart zu importieren und in die benötigten Formate zu konvertieren. Darüber hinaus wird CSS-Code generiert, der zur weiteren Installation von Schriftarten auf der Website verwendet werden kann.

Wenn Sie die Google-Bibliothek oder Adobe Edge verwenden, müssen Sie sich keine Gedanken über Formate machen. Der von Unternehmen bereitgestellte Softwaredienst bietet Unterstützung für die Schriftart in den meisten Schriftarten.

Hinzufügen von Schriftarten zur Website

Die Möglichkeit, Schriftarten für Inhalte auf der Website zu erstellen (ähnlich wie wir Bilder oder Videos erstellen), wird durch meine CSS-Stile gewährleistet, die für die Gestaltung aller Elemente auf der Seite, einschließlich Text, verantwortlich sind. In den frühen Stadien der Entwicklung dieser Technologie konnte angegeben werden, welche Schriftart für die Verzerrung des Erscheinungsbilds derselben oder anderer Elemente verantwortlich ist. Es wurde jedoch festgestellt, dass diese Schriftart für Installationen auf dem Computer des Koristuvach verantwortlich sei. Als Option zur „Absicherung“ gegen die Verfügbarkeit einer bestimmten Schriftart war es möglich, eine Reihe von Schriftarten in der Reihenfolge ihrer „Priorität“ festzulegen, sodass das System Suchanfragen konsistent auswählte und die erste gefundene Option in der Liste auswählte. Aus diesem Ansatz ist das Konzept entstanden sicher für Web-Schriftarten(Web-Save-Schriftarten) – eine Reihe von Schriftarten, die auf Computern von Computerbenutzern weit verbreitet sind, beispielsweise im Installationspaket des Betriebssystems enthalten sind oder einfach von ihrer großen Beliebtheit profitieren.

Statistiken über die „Breite“ solcher Schriftarten können mit dem Zusatzdienst cssfontstack.com abgerufen werden, der auch dabei hilft, für jede von ihnen eine Sequenz von „Sicherheits“-Schriftarten zu erstellen.

Anscheinend waren alle Fähigkeiten der Web-Tools dieser Zeit in den Dutzenden von Schriftarten konzentriert, die im „sicheren“ Satz enthalten waren. Mit der Entwicklung von CSS wurde es dann möglich, Schriftarten auf der Website zu „implementieren“. Legen Sie die Schriftartdatei zusammen mit einer anderen Site auf dem Server ab und verwenden Sie sie im Vorlagencode, um vom Browser zum Betrachten der Site angeregt zu werden und so für die Verwendung auf dem Computer des Benutzers verfügbar zu werden. Durch die Verwendung der zusätzlichen @font-face-Direktive wird es von aktuelleren Browsern unterstützt und auf mehr Websites angezeigt. Wenn Sie sich entscheiden, vergessen Sie auch nicht, die „Sicherheits“-Schriftartoptionen anzugeben, die möglicherweise verfügbar sind, wenn die Hauptschriftart aus irgendeinem Grund nicht verfügbar ist. Otje, Die Schriftart wird auf dem offiziellen Server erstellt und geändert.

1. Wir kennen die erforderliche Schriftart für das TTF- oder OTF-Format und überprüfen, ob sie die von uns benötigte Sprache unterstützt.
2. Der Fontsquirrel-Generator von Wikorist zum Konvertieren von Schriftarten aus verschiedenen Webformaten.

1. Wir müssen mit dem Generator ein @font-face-Paket erstellen, das Schriftartdateien enthält (sie müssen zusammen mit anderen Elementen der Vorlage auf dem Server abgelegt werden) und @font-face-Regeln vorbereiten, die abgelegt werden müssen Ganz am Anfang der Style-Datei auf Ihrer eigenen Website, nach erneuter Konvertierung, damit die Anweisungen zu den Schriftartdateien korrekt angegeben werden.

@font-face ( Schriftfamilie: 'myfont'; src: url('myfont-webfont.eot'); src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#myfont') format('svg '); Schriftstärke: normal; Schriftstil: normal;

2. In den Stilen wird darauf hingewiesen, dass für einige Elemente zusätzlich zur regulären CSS-Syntax die Verwendung einer Schriftart erforderlich ist.

Es kann zu einer desintegrierenden Wirkung kommen. Wir können uns auch ein wenig verzeihen Vikorist und Drittanbieter-Service zum Importieren von Schriftarten, Zum Beispiel Google Webfonts.

1. Wir wählen eine Schriftart aus der Bibliothek aus und prüfen, ob sie die von uns benötigte Sprache unterstützt.
2. Im „Swedish Victorial“-Modus wählen wir die benötigte Bildoption und die zu unterstützenden Zeichensätze aus. Je mehr Optionen wir nutzen möchten, desto wichtiger ist die Schriftartdatei und desto wichtiger ist unser Interesse. Wählen Sie also keinen Gierigen.
3. Wir kopieren den vom System generierten Code und fügen ihn zwischen den Tags in den Code der Site-Vorlage ein vor anderen Nachrichten an .css Dateien.
4. Bei Stilen wird deutlich, dass einige Elemente für die Verwirrung bei der Verwendung der Schriftart zusätzlich zur regulären CSS-Syntax verantwortlich sind, und zwar in erster Linie.

Der Preis für die Möglichkeit, nicht standardmäßige Schriftarten zu verwenden, ist ein Produktivitätsverlust – die Website wird überfüllter und erfordert mehr Rechenressourcen. Daher wird davon abgeraten, viele nicht standardmäßige Schriftarten auf einer Seite zu verwenden und diese auch in den Haupttext zu packen, umgeben von angrenzenden Gestaltungselementen wie Überschriften oder Navigationselementen (ein Bericht über das Problem der Produktivität mit bösartige Schriftarten (Sie können es auf Habré lesen).

Am Ende unserer Diskussion über die praktische Verwendung von Webfonts auf Websites gibt es eine Reihe von Websites, die Webfonts eine Schlüsselrolle einräumen

• Übersetzung

Jetzt ist es an der Zeit, das Design Ihrer Roboter mithilfe von Webfonts zu verbessern

Ohne Unterbrechung durchlebt die Merezheva Drukarna eine stotternde Phase ihres Lebens. Die jüngsten technologischen Fortschritte haben uns der virtuellen Welt des Internets einen Schritt näher gebracht. Croc, was für einen Schnurrbart haben sie schon so lange untersucht?

Die Freiheit, Web-Schriftarten sicher auf allen kabelgebundenen Betriebssystemen zu verwenden, ist durch den großen Einfluss von drei wichtigen, vielleicht unmittelbaren technologischen Faktoren möglich geworden: der weit verbreiteten Übernahme von @font-face-Regeln in Browsern; das Auftauchen solcher „Schriftmonstrositäten“ wie Typekit und Fontdeck; Erstellung eines neuen Schriftformats – einer archivierten WOFF-Schriftartdatei.

* Nur wenige dieser Schriftarten sind für Kyrillisch, daher ist diese Auswahl eher für „Outsourcer“ geeignet. Wir hoffen, dass einige davon bald erscheinen und nicht weniger Schriftarten für slowenische Sprachen in Kyrillisch. Tags hinzufügen

Wenn Sie mit der Gestaltung eines Layouts beginnen, müssen Sie in CSS sorgfältig die Schriftarten angeben, die auf der Seite verwendet werden sollen. Meistens schreibt der Designer in verschiedenen Schriftarten nicht nur den Haupttext der Seite, sondern auch verschiedene Überschriften, Logos und Monogramme:

Ein guter Designer und ein guter Layouter wissen, dass der Browser zur Anzeige der Seite dieselben Schriftarten verwenden kann, die auf dem Computer des Designers installiert sind. Dann lassen sich Schriftarten intelligent in zwei Kategorien einteilen:

1. Schriftarten, die von den meisten Entwicklern problemlos angezeigt werden können.
2. Schriftarten, die täglich einer großen Gruppe von Künstlern zur Verfügung stehen.

Wenn ein Designer für die Gestaltung Schriftarten einer anderen Kategorie verwendet hat, beispielsweise für ein Logo oder große statische Überschriften, können Sie diese Technik bedenkenlos anwenden. Der Mangel an Stagnation dieser Methode ist ihre Inflexibilität. Wenn Sie den Text ändern, müssen Sie das Bild überarbeiten und das CSS ändern (z. B. wenn die Größe des neuen Bildes nicht mit der alten übereinstimmt).

Wir können sagen, dass die Gefahr der Stagnation in der Zuverlässigkeit der Textänderung liegt. Daher ist es beispielsweise unmöglich, den schmutzigen Text einer Geschichte mit nicht standardmäßigen Schriftarten zu vermeiden! Ein kompetenter Designer kann das so nicht reparieren. Und wenn der Designer im Grünen stecken geblieben ist, möchte der Garniy-Satzdesigner einfach seinen Fehler korrigieren – im Layout diese Schriftart ersetzen, die der Standardschrift so ähnlich wie möglich ist.

Wie kann ich Schriftarten der ersten Gruppe von anderen unterscheiden? Es ist klar, dass Sie die Eingabe von Schriftarten, die direkt auf Ihrem Computer installiert sind, nicht verbergen können! Lass uns miteinander auskommen.

Standardschriftarten

Standardschriftarten sind eine Reihe von Schriftarten, die gleichzeitig mit dem Betriebssystem installiert werden. Es gibt verschiedene Teile des Betriebssystems und ihr Schriftartensatz ist unterschiedlich. Eine Liste der Standardschriftarten für verschiedene Windows-Versionen finden Sie beispielsweise im Artikel Standard-Windows-Schriftarten und eine Liste der Standardschriftarten für Mac OS auf der Seite Schriftarten, die mit Mac OS geliefert werden. Da es Unix/Linux-Betriebssysteme gibt, verfügen diese über einen einzigen Satz Schriftarten. Viele Linux-Benutzer verwenden den DejaVu-Schriftsatz, insbesondere unter Ubuntu, der im Hintergrund installiert wird. Basierend auf den Statistiken von http://www.codestyle.org haben viele Unix/Linux-Benutzer auch URW, Free und andere Schriftarten installiert. Basierend auf diesen Statistiken verwenden mehr als 60 % der Unix-/Linux-Benutzer auf ihren Computern die Core-Fonts für das Web-Fontset, das bis 2002 offiziell zum kostenlosen Download auf der Microsoft-Website verfügbar war.

Damit die Seite unabhängig vom Betriebssystem so angezeigt wird, wie es der Designer beabsichtigt hat, ist es in CSS möglich, eine Reihe von Schriftarten anzugeben, die durch ein Komma gerendert werden.

Diese Befugnis legt eine Prioritätenliste von Schriftfamiliennamen und/oder generischen Familiennamen fest. Basierend auf der CSS2-Spezifikation gibt es zwei Arten von Schriftfamiliennamen:

1. Name der Schriftfamilie zur Auswahl. Zum Beispiel „Times New Roman“, „Arial“ und andere. Die Namen von Schriftfamilien, die helfen sollen, die Lücken zu schließen, geraten in die Fänge. Da es sich um tägliche Pads handelt, werden alle Leerzeichen vor und nach dem Schriftartnamen ignoriert und jede Leerzeichenfolge in der Mitte des Schriftartnamens wird in ein einzelnes Leerzeichen umgewandelt.
2. Familie (Hintergrund) Familie. Die Spezifikation umfasst die folgenden generischen Familien:
   • Serifen – Schriftarten mit Serifen an den Enden;
   • serifenlos – serifenlose Schriftart;
   • cursive – Schriftart für kursive Bilder;
   • Fantasie – dekorative Schriftarten;
   • Monospace - Monospace-Schriftart (mit Buchstaben gleicher Breite).
   Die Namen der Ahnenfamilien sind Schlüsselwörter und müssen nicht zwingend am Fuße liegen.

Für das Design wird also eine Standardschriftart des Betriebssystems Windows übernommen, eine ähnliche für Mac OS und Unix/Linux ausgewählt, die ursprüngliche Heimat der Schriftarten angegeben und schon ist es fertig.

Aber so einfach ist es nicht. Schauen wir uns den Bericht genauer an.

Suche nach websicheren Schriftarten

Im Internet gibt es seit jeher das Konzept „sichere“ Webfonts. Eine sichere Schriftart kann als Schriftart bezeichnet werden, die in allen Betriebssystemen Standard ist. Die Reste eines solchen Lagers der Gerechtigkeit werden dann dem Untergang geweiht sein Es gibt keine absolut sicheren Schriftarten!

Einige der Schriftarten können mit einer gewissen Sicherheit als sicher bezeichnet werden.

Grundlage für die Bezeichnung „sicherer“ Schriftarten waren die Schriftarten des gängigsten Windows-Betriebssystems, die auch in anderen Betriebssystemen verwendet werden. Ein Beispiel für eine solche Ressource ist das Font-Paket „Core Fonts for the Web“, das den Statistiken zufolge, wie Sie sich vorstellen können, von unzähligen Unix/Linux-Benutzern heruntergeladen wurde.

Dieses Paket enthält die folgenden Schriftarten: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Alle Gerüche unterstützen das für RuNet wichtige kyrillische Alphabet.

Der Schriftartensatz, der in der Standardinstallation von Mac OS

Basierend auf Windows-Schriftarten, die in anderen Betriebssystemen verwendet werden, wurde daher eine neue Liste sogenannter „sicherer“ Web-Schriftarten erstellt:

• Arial
• Arial schwarz
• Comic ohne MS
• Kurier Neu
• Georgia
• Auswirkungen
• Times New Roman
• Trebuchet MS
• Verdana

Die Webdings-Schriftart ist für die Eingabe von Symbolen irreführend und kann daher nicht für Inhalte verwendet werden. Andale Mono erfordert keinen weit verbreiteten Einsatz, da es nicht für das alltägliche Lesen von Texten vom Bildschirm geeignet ist und nicht für alle Windows-Benutzer verfügbar ist.

Alle diese Schriftarten sind auf allen Windows-, Mac OS

Aber was ist damit? Ich möchte, dass die Idee des Designers von mehr als einem der besten Leute beeinflusst wird!

Lesen Sie darüber in einem anderen Teil der Publikation.

Der erste Teil dieses Abschnitts ist dem Erlernen von CSS-Schriftarten gewidmet. Auf dieser Seite erfahren Sie, wie Sie Schriftarten vor CSS einbinden, was Webfonts sind und wie Sie mit ihnen arbeiten, welche Schriftartformate es gibt und wie Google Fonts verwendet wird. Schauen wir uns zunächst die einfache Möglichkeit an, eine CSS-Schriftart zu verbinden:

P (Schriftfamilie: Verdana; )

Dieser kleine Code bedeutet, dass bis zu allen Tags

Die Schriftart Verdana wurde versteift. Die Leistung von Font-Family legt fest, welche Schriftart oder Schriftart verwendet wird. Der richtige Anzeigestil im Browser des Benutzers hängt von der Art der auf Ihrem Computer installierten Aufgabenschriftart ab. Wenn Sie eine tägliche Verdana-Schriftart auf Ihrem Computer haben, zeigt Ihr Browser die Schriftart an und installiert die Einstellungen.

Heutzutage mussten Designer eine Reihe von Ersatzschriftarten für die zusätzliche Verwendung angeben, da der Computer des Benutzers nicht der Hauptcomputer war. Möglicherweise möchten Sie den Text in der Schriftart Verdana formatieren und als Backup die Schriftart Trebuchet MS, Geneva oder eine andere serifenlose Schriftart installieren. Melden Sie sich auf diese Weise an:

P (Schriftfamilie: Verdana, „Trebuchet MS“, Geneva, serifenlos;)

Vor der Verarbeitung dieses Codes sollte der Browser unverzüglich prüfen, ob die Schriftart Verdana auf dem Computer des Benutzers verfügbar ist. Als aktuelle Schriftart anstelle von Tags

Erscheint in dieser Schriftart. Wenn es sich um eine tägliche Schriftart handelt, prüft der Browser, ob die Schriftart in der Liste verfügbar ist – Trebuchet MS. Da es sich bei dieser Schriftart um denselben Typ handelt, wird das Vorhandensein der Originalschriftart „Genf“ überprüft. Wenn der Computer des Benutzers nicht über Geneva verfügt, wählt der Browser eine andere verfügbare serifenlose Schriftart aus und zeigt den Text darin an.

Respekt wiederherstellen: Im Code haben wir den Namen der Trebuchet MS-Schriftart in den Pads notiert. Es ist notwendig, den Namen der Schriftart in Doppel- oder Einzelzweigen zu verwenden, wenn darin Aussparungen vorhanden sind.

Über diese Schriftarten mit Serifen (Serif) und ohne (Sans-Serif) können Sie auf der Wikipedia-Seite nachlesen.

Web-Schriftart

Eine bessere Möglichkeit zur Auswahl von Schriftarten zu finden, hat einen großen Nachteil: Sie sind durch die Anzahl der Schriftarten begrenzt. Sie werden nur mit diesen Optionen zufrieden sein, da dies höchstwahrscheinlich auf den meisten Computern installiert ist.

Wie können Sie die Auswahl an Schriftarten erweitern, um das Seitendesign individueller zu gestalten und Originalität zu verleihen? Dabei helfen Webfonts. Lesen Sie den folgenden Abschnitt und erfahren Sie, wie Sie damit umgehen können.

Um die benötigte Schriftart im Browser anzuzeigen, muss diese außerdem auf dem Computer installiert sein. Es ist einfach, Maßnahmen zu ergreifen. Diese Methode, Schriftarten vor CSS zu verbinden, eröffnet Designern vielfältige Möglichkeiten. Erinnern wir uns an einen Löffel Honig in einem Fass Honig: Erstens unterstützt der Browser nicht dasselbe Format für die Schriftart (was dazu führt, dass die Schriftart nicht angezeigt wird), und andererseits, da die Datei mit dem Schriftart enthält großen Wert, Sie können interessante Seite helfen.

Unterstützung von Formaten

Wie geht man mit dem Problem der Inkompatibilität mit dem Dateiformat um? Werfen Sie einen Blick auf die Tabelle mit den beliebtesten Schriftformaten und den Browsern, die sie unterstützen:

Notiz: Aktuelle Informationen zu unterstützten Schriftformaten finden Sie auf der Website caniuse.com. Für die Suche müssen Sie einen Namen für das Format eingeben (z. B. ttf).

Wenn Sie auf moderne Browser abzielen, müssen Sie das TTF-Schriftartformat verwenden – das umfangreichste und beliebteste. Wenn Sie schließlich mehrere Formate für eine Schriftart benötigen, können Sie schnell spezielle Online-Konverter von einem Format in ein anderes verwenden und dann alle Dateien darüber verbinden. Auf diese Weise kann der Browser das Format der Schriftart auswählen, in der er arbeitet.

Wir binden eine Web-Schriftart mit @font-face ein

Sie platzieren beispielsweise Ihre einzigartige Schriftart unter dem Namen MyUniqueFont im TTF-Format und möchten, dass der Haupttext der Webseite in dieser Schriftart angezeigt wird. Als Erstes müssen Sie die Schriftartdatei in den Ordner kopieren, in dem sich alle anderen Dateien auf der Site befinden. Um ein Durcheinander zu vermeiden, können Sie einen Ordner speziell für Schriftarten erstellen und ihn beispielsweise Schriftarten nennen.

@font-face ( Schriftfamilie: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

Die Macht von „font-family“ spielt in diesem Fall eine andere Rolle: Wir weisen der Schriftart auch einen Namen zu, sodass wir diesen Namen dann beim Schreiben des Stils verwenden können:

P (Schriftfamilie: MyUniqueFont; )

Die andere Zeile gibt den Pfad zur Dateischriftart an. In unserer Anwendung befindet sich die Datei MyUniqueFont.ttf im Schriftartenordner. Ihre URLs können abweichen.

Google-Schriftarten

Mit Google können Sie ganz einfach beliebige Schriftarten mit der Google Fonts-Sammlung verbinden. Um eine benutzerdefinierte Schriftart zu verwenden, die zu Ihnen passt, müssen Sie lediglich die Schriftart in Google eingeben, dann die spezielle Nachricht für diese Schriftart kopieren und sie Ihrem Webdokument hinzufügen.

Notiz: Die gesamte Sammlung von Google-Schriftarten ist auf der Website verfügbar Google-Schriftarten. Auf der Seite können Sie mithilfe verschiedener Filter schnell nach Schriftarten nach Kategorie, Produkt und Alphabet suchen.

Im Folgenden wird die Vorgehensweise zur Verbindung mit der Google-Schriftart beschrieben. Um eine Vorstellung davon zu bekommen, was vor sich geht, wählen Sie eine Schriftart auf der Google Fonts-Seite aus und öffnen Sie sie, indem Sie auf die Schaltfläche „Schnellverwendung“ klicken.

Schritt 1: Bild auswählen

Auf der Seite der ausgewählten Schriftart sehen Sie die Sitzoption sowie das Tachosymbol, was nichts weniger als die Fließfähigkeit der Schriftart bedeutet. Je mehr Stile Sie für die Schriftart auswählen, desto mehr Zeit wird für die Gestaltung benötigt. Es wird daher empfohlen, nur die Bildoptionen auszuwählen, die Sie verwenden möchten.

Croc 2: Alphabet auswählen

Weiter auf der Seite können Sie einen Zeichensatz auswählen: Latein, Kyrillisch usw. Je nach Schriftart sind möglicherweise nicht alle Alphabetoptionen darin verfügbar. Ähnlich wie im vorherigen Punkt aktivieren Sie einfach das Kontrollkästchen neben dem gewünschten Alphabet.

Schritt 3: Fügen Sie den Code zur Site hinzu

Die erste Methode besteht darin, sicherzustellen, dass der HTML-Code an den Google-Server gesendet und die Schriftart importiert wird. Sie müssen den fertigen Code kopieren und zwischen den Tags platzieren in Ihrem HTML-Dokument. Hintern:

...

Eine andere Möglichkeit besteht darin, die Schriftart mit der zusätzlichen @import-Direktive zu verbinden. Den fertigen Code finden Sie in einem weiteren Tab, Punkt 3, auf der Seite der ausgewählten Google-Schriftart. Dies muss zur Basis Ihres Stylesheets hinzugefügt werden (andernfalls wird die Datei nicht importiert). Der Code sieht in etwa so aus:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

Die Besonderheit der ersten Methode besteht darin, dass Sie im Titel jeder Seite, auf der Sie sie bearbeiten möchten, Anmerkungen zur Schriftart hinzufügen müssen. Dies ist auf Websites mit einer geringen Seitenanzahl einfach durchzuführen, bei großen Ressourcen jedoch problematisch. Eine andere manuelle Möglichkeit besteht darin, dass der Code oben auf dem vorhandenen Stylesheet platziert werden kann und dann alle Seiten, mit denen diese Tabelle verbunden ist, die erforderliche Schriftart auswählen, die durch eine zusätzliche @import-Direktive erforderlich ist.

Krokodil 4: Erstellen Sie einen Stil

Nach den Führungslinien können Sie beginnen, die Schrift zu versteifen. Wie man diese CSS-Regel schreibt, haben Sie bereits geschrieben:

P (Schriftfamilie: „Roboto“, serifenlos; )

Da Sie im ersten Schritt eine Reihe von Bildoptionen ausgewählt haben (z. B. haben Sie die Fettschriftoption „Bold 700“ hinzugefügt), ändert sich im dritten Schritt der Code ein wenig:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Um der Schriftart anschließend ein fettes Bild zu verleihen, schreiben Sie den CSS-Stil wie folgt:

P (Schriftfamilie: „Roboto“, serifenlos; Schriftstärke: 700; )

Notiz: In Google Fonts werden zur Angabe der Dichte einer Schriftart nur mentale Einheiten im Bereich von 100 bis 900 verwendet. Daher entspricht ein normales Bild (hinter den Zeilen) 400 (normal) und ein Standardbild in Fettdruck entspricht 700 (deutlich).

Die Hauptvorteile des Google Fonts-Dienstes sind:

• Benutzerfreundlichkeit (Sie können den Dienst auch als Anfänger nutzen und der gesamte erforderliche Code wird automatisch generiert – es ist nicht erforderlich, ihn zu kopieren);
• Verfügbarkeit von Schriftarten (es besteht keine Notwendigkeit, dafür zu bezahlen);
• Übertragung aller Schriftformate (d. h. der Browser kann ihm das gleiche Schriftformat zuweisen, mit dem er arbeitet).

Zu den Mängeln des Dienstes gehört die Vielfalt der Schriftarten, insbesondere der kyrillischen Schriftarten. Bevor wir sprechen, gibt es im Internet andere ähnliche Dienste, zum Beispiel TypeKit (kostenpflichtig).

Beutel

Heutzutage stehen uns eine Reihe von Optionen zur Verfügung, um Original- und Nicht-Standard-Schriftarten in Webseiten einzubinden. Jede dieser Methoden hat ihre eigenen Vor- und Nachteile. Welche Option besser ist als die Alternative, müssen Sie selbst entscheiden. Meistens ist es notwendig, von der Situation abhängig zu bleiben, und in verschiedenen Situationen kann es unterschiedliche Ansätze geben. Zu diesem Zeitpunkt müssen Sie lediglich wissen, wie Sie Schriftarten in CSS ändern.