So verbinden Sie CSS-Schriften: Anleitung

Computer

Wenn Sie ein Designer oder Webmaster sind, dann, eherAlles, weißt du, wie man die CSS-Fonts verbindet. Wenn Sie der Besitzer eines kleinen Blogs sind und beschließen, Ihre Ressource zu dekorieren und sie einzigartig zu machen, dann sollte Ihnen dieses Wissen helfen. Aber es ist besser, von Anfang an zu beginnen, um zu verstehen, was Cascading Stylesheets sind, wo man die Fonts bekommt und wo man sie installiert.

Beschreibung

Also, die Antwort, wie man die CSS-Schriftart an verbindetDie Site muss mit einer Beschreibung einer direkt formalen Sprache beginnen. CSS ist ein Cascading Stylesheet. Diese Sprache wird als Beschreibung des Aussehens des Dokuments verwendet. Es funktioniert in Verbindung mit der Auszeichnungssprache.

CSS verweist auf die visuellen Merkmale von Seiten im Internet. Letzteres sollte auf Basis der speziellen Auszeichnungssprachen HTML oder XHTML erstellt werden.

Verwenden

Wer braucht CSS?Verbinden Sie Schriftarten, legen Sie Farben fest, ordnen Sie Blöcke usw. für Webmaster, Programmierer, die an der Erstellung der Site arbeiten. Die Hauptaufgabe von Cascading Stylesheets besteht darin, die Strukturierung visuell zu unterteilen. Das heißt, wenn HTML einen festen Textblock bildet, hilft CSS, diesen Block bedingt zu dekorieren, Elemente auszuwählen, Parameter zuzuweisen.

Die Trennung bietet dem Dokument Zugänglichkeit, größere Flexibilität und Verwaltungsfunktionen. Ermöglicht Ihnen, komplexe und wiederholbare Inhaltselemente loszuwerden.

Konnektivität

Bevor Sie verstehen, wie Sie richtig verbindenSchriftarten in CSS müssen Sie verstehen, wie die Cascading Stylesheets mit der Datei synchronisiert werden. Ihre Regeln sind in der gleichen Sprache implementiert. Das Stylesheet selbst hat CSS-Regeln, die es verwendet. Tabellen können sich in einem visuell bearbeiteten Dokument oder in einer separaten Datei mit der Erweiterung befinden. In einer solchen Datei befinden sich normalerweise nur die Befehle und Hinweise zu ihnen.

So verbinden Sie eine Schriftart mit der Site css

So wird deutlich, dass Sie Stylesheets auf verschiedene Arten verbinden können. Betrachten Sie sie weiter.

Methoden

Es gibt vier Optionen, die helfenCSS-Schriftarten verbinden, Farbtöne zuweisen, Blöcke definieren usw. Wie bereits erwähnt, kann eine Reihe von Regeln in einer in HTML geschriebenen Datei enthalten sein. Aber diese Option gefällt vielen Designern nicht. Dies ist darauf zurückzuführen, dass es schwierig ist, beschreibende Parameter im gesamten Befehlsbereich zu finden und alles zu tun. Es ist viel einfacher, Stile in einem separaten Dokument zuzuweisen.

Wenn sich das CSS separat befindet, werden sie über das Tag <link> verbunden. Es muss innerhalb von <head> und </ head> platziert werden. In dieser Markierung müssen Sie das href-Attribut angeben, das die Adresse der Datei mit CSS anzeigt.

Wenn die Befehle erneut in einer separaten Datei gesammelt werden,Wir verbinden sie über die Direktive @import mit dem Webdokument. Es sollte zwischen den Markierungen <style> und </ style> stehen. Direkt nach <style> setzen wir die Direktive und geben in Klammern nach der URL den Link zur Datei mit CSS an. In beiden Fällen gelten die Regeln für das gesamte Dokument.

Die folgenden zwei Methoden beziehen sich auf die Situationwenn das CSS direkt in das zu dekorierende Dokument eingefügt wird. Das Stylesheet kann in diesem Fall zwischen den Markierungen <style> und </ style> liegen. Bei der vierten Methode werden die Regeln über das style-Attribut in die Basis eines der Tags eingefügt. Die Regeln wirken sich dann auf einen separaten Parameter aus, der sich innerhalb der Grenzen eines bestimmten Textes befindet.

Bei den ersten beiden Methoden wurde das Aussehen von externen Stylesheets und die zweite - interne - festgelegt.

Schriftarten

Wofür werden Schriftarten verwendet? Natürlich möchte jeder Websitebesitzer, dass seine Ressource nicht nur schön, sondern auch einzigartig aussieht. Ich möchte auf den Seiten besondere Elemente platzieren, die sich unter allen anderen hervorheben könnten. Oft bemerken Sie auch Überschriften oder das Menü des nicht standardmäßigen Schreibens.

Es gibt viele Fragen dazu. Vielleicht haben die Webmaster das in "Photoshop" gezeichnete Bild verwendet. Möglicherweise kam diese Option von Flash. Es gibt eine Option, die Javascript verwendet. Wie die Praxis zeigt, ist die erste Option unbequem und langsam, die zweite ist veraltet und die dritte ist zu verwirrt. Um etwas Neues und Schönes zu erstellen, können Sie versuchen, die CSS-Schriftarten miteinander zu verbinden.

Eigenschaften

Es versteht sich, dass in unserem Fall die Schriftarten sindNicht nur ein bestimmter Stil, sondern auch eine Reihe von Eigenschaften, die erforderlich sind, um das Erscheinungsbild des Texts zu steuern. Sie können mehrere Optionen verwenden. Weisen Sie dem Titel, Absatz, Zitat, Haupttext, Menü usw. eine bestimmte Schriftart zu.

Trotz der Tatsache, dass der Benutzer Zugriff auf eine riesige hatBei verschiedenen Ausführungen, Größen, Sättigungen usw. sollte die Lesbarkeit nicht vergessen werden. Es ist besser, einen großen Haufen verschiedener Stile zu vermeiden. Es werden ausreichend zwei Schriftarten auf der Seite vorhanden sein.

Familien

Um den Stil wählen zu könnenverwenden Sie die Schriftfamilie. Es ist sehr schwer zu verstehen, ob eine bestimmte Schriftart auf dem PC des Lesers Ihrer Ressource vorhanden ist. Es ist besser, alle gleichen Typoptionen einzugeben. In diesem Fall wählt der Browser den im System des Benutzers gefundenen aus.

Diese Familie hat eine Reihe von Bedeutungen. Familienname wird beispielsweise durch den Namen der Schriftfamilie dargestellt. Der generische Familienwert definiert die fünf wichtigsten Schriftfamilien.

Die Schriftfamilie ist für die Auswahl der Schriftart verantwortlich. Dieser Stil wird auch wie der vorherige vererbt. Unter den Werten sind einfach oder schräg und kursiv. Die Schriftartvariante ist für kleine Großbuchstaben verantwortlich. Verwenden Sie zur Sättigung Schriftgewicht usw. Sie können der Schrift die Größe und Farbe zuweisen.

Nicht-Standard-Lösung

Neben Standardschriftarten können Sie auch verwendennicht standardisierte Lösungen. Normalerweise sind sie einzigartiger und Sie werden sie höchstwahrscheinlich auf den Seiten der Mitbewerber nicht bemerken. Dazu müssen Sie keine Bilder, Javascript und Flash verwenden. Es reicht aus, die Regel @ font-face zu übernehmen. Damit kann der Benutzer eine externe Datei in ein Dokument laden.

Diese Methode ermöglicht das Verbinden der CSS-SchriftOTF und TTF. Dies sind spezielle Formate, die bei ähnlichen Aufgaben gute Arbeit leisten. Probleme können nur mit Internet Explorer auftreten. Trotz der Tatsache, dass er 1997 erstmals mit Schriftarten von Drittanbietern begann, stellt er nun strikte Anforderungen.

Er tut viel, um deinen Job zu verderben. Es kann oft eine Schriftartdatei komprimieren, manchmal auch verschlüsseln. Daher gibt es alle möglichen Hacks.

Formate

Es gibt jetzt verschiedene Schriftformatemuss wissen Andernfalls werden Sie eine Reihe von Inkonsistenzen und Inkompatibilitäten feststellen. Sie können eine CSS-TTF-Schriftart anschließen. Dieses Format wird jetzt von allen Webbrowsern unterstützt. Eine Ausnahme kann Internet Explorer Version 8 und niedriger sowie Opera Mini 5.0-8.0 sein.

So verbinden Sie die CSS-Schriftart aus einem Ordner

Nur EOT kann mit EOT arbeiten. Die Situation bei WOFF ist die gleiche wie bei TTF. SVG funktioniert jedoch in Chrome-Browsern bis zur Version 37 sowie in Safari, iOS Safari und Android Browser. Wie die Praxis zeigt, ist es am besten, TTF zu verwenden. Dies ist die vielseitigste Option, die selten Probleme verursacht. Er ist der häufigste.

Regel

Also, um die Schrift von einem zu verbindenBei den obigen Formaten reicht es aus, die rule @ font-face zu verwenden, über die wir zuvor gesprochen haben. Um klar zu sein, müssen Sie einem bestimmten Algorithmus folgen. Sie haben eine font.ttf-Schriftartdatei. Um es für den Haupttext zu verwenden, müssen Sie zunächst die Datei selbst in den Ordner kopieren, in dem sich alle Site-Dateien befinden.

Wenn Sie mehr als eine Schriftart verwenden möchten, können Sie einen speziellen Ordner erstellen, in den Sie die Schriftart hochladen können. So ist es für Sie viel einfacher, sie zu finden und den Inhalt eines solchen Ordners zu ändern.

Jetzt müssen wir den Browser dazu bringen, unsere Schriftart von selbst herunterzuladen. Dafür müssen Sie ihm einen Hinweis geben. Verwenden Sie die @ font-face-Direktive. Das Team wird so aussehen:

@ font-face {

Schriftfamilie: MyUniqueFont;

src: url ("fonts / font.ttf");

}

Das Font-Family-Team ist dafür verantwortlich, dass die Schriftart festgelegt wirdbekam seinen Namen und konnte danach im Schreibstil verwendet werden. Die zweite Zeile enthält den Pfad, unter dem der Browser den Stil finden und verbinden muss. Dies ist keine universelle Adresse. Je nachdem, wo Sie die Schriftdatei ablegen, unterscheidet sich dieser Pfad ebenfalls. So lernen Sie, wie Sie die CSS-Schrift aus dem Ordner verbinden.

Verbindungen

Wenn Sie nicht wissen, wie Sie mehrere verbindenCSS-Schriften, dazu gibt es auch eine Anleitung. Sie können mehrere Dateien gleichzeitig angeben. Zum Beispiel können sie mit einem Dutzend verbunden werden. Dazu müssen Sie die obige Regel @ font-face verwenden. Folgen Sie dem Beispiel, wie Sie zuvor eine Datei aus einem Ordner auf dieselbe Weise mit einer neuen Zeile verbunden haben, Verknüpfungen zu anderen Optionen für die Schriftart.

Wenn Ihre Site auf WordPress basiert,Verbinden Sie Stile noch einfacher. Wenn Sie den Headerstil ersetzen müssen, rufen Sie einfach das Administrationsfenster auf. Dort nach "Theme Settings" suchen. Im Bereich "Typografie" wird eine ganze Liste verschiedener Optionen angezeigt. Sie müssen nur die Änderung auswählen und speichern.

Andere Optionen

Sehr oft werden Schriftarten miteinander verbundenGoogle Fonts-Dienst. Dies ist ein beliebtes Werkzeug zum Auswählen und Verbinden von Stilen. Es gibt eine große Anzahl von Zeichensätzen. Um sie zu verbinden, gehen Sie einfach auf die offizielle Website.

Sie sehen eine Liste mit Beispielen undGelegenheit zum Experimentieren. Vergessen Sie nach dem Hinzufügen des gewünschten Stils nicht, Kyrillisch zu wählen, wenn Ihre Ressource auf Russisch ist. Sie können dann die Größe, den Stil oder mehrere Optionen für alle Gelegenheiten auswählen.

Danach haben Sie den Code, den Sie benötigensetze auf css datei. In diesem Fall gilt auch die Regel zum Hinzufügen von Methoden. Wenn Stylesheets beispielsweise durch ein separates Dokument dargestellt werden, wird der Befehl an die erste Zeile gesendet. Wenn Sie die Stylesheets direkt in der HTML-Datei haben, müssen Sie sie dem Hauptteil der Tags <style> und </ style> hinzufügen.

Schlussfolgerungen

Das Hinzufügen neuer Schriftarten zu Ihrer Site ist einfach. Es ist wichtig, sofort mit den Methoden und Optionen zu bestimmen. Je nachdem, auf welchem System sich Ihre Site befindet, müssen Sie diese Aktionen durchdenken. Wenn Sie über eine handgeschriebene Ressource verfügen, gibt es in diesem Fall einige Optionen. Wenn zum Beispiel WordPress, dann ist dieser Vorgang viel einfacher als es den Anschein hat.