Schriftanwendung im Webdesign

Viele Leute haben kürzlich die Frage angesprochen, wie man Schriftarten auf Webseiten auswählt. Obwohl das Problem gering ist, ist es in der Front-End-Entwicklung von grundlegender Bedeutung, da aktuelle Webseiten immer noch von Textinformationen dominiert werden und Schriftarten als einer der wichtigsten Parameter des Textausdrucks natürlich eine sehr wichtige Rolle spielen.

Hallo, alle zusammen~ In letzter Zeit haben viele Leute die Frage angesprochen, wie man Schriftarten auf Webseiten auswählt. Obwohl das Problem gering ist, ist es in der Front-End-Entwicklung von grundlegender Bedeutung, da aktuelle Webseiten immer noch von Textinformationen dominiert werden und Schriftarten als einer der wichtigsten Parameter des Textausdrucks natürlich eine sehr wichtige Rolle spielen. Schade, dass der Bedeutung von Schriftarten schon lange nicht mehr genügend Aufmerksamkeit geschenkt wird. Das Schriftkonzept vieler Menschen steckt immer noch in der Schriftfamilie fest: „宋体“, Arial, Helvetica, Serif, aber sie verstehen nicht, warum diese Einstellung vorgenommen wird, ob diese Einstellung sinnvoll ist usw. Lassen Sie mich nun über die Besonderheiten von Schriftarten sprechen.

- Schriftfamilie

Jeder weiß, dass die Definition von Schriftarten in CSS-Regeln durch die Regel Schriftfamilie erreicht wird. Ich habe die CSS-Dokumentation sorgfältig durchgesehen, aber keine Regeln gefunden, die eine bestimmte Schriftart angeben.

Stellen Sie sich vor, dass Sie vor zehn Jahren überall Code sehen konnten, der diesem ähnelt:

< Schriftart Gesicht="Frankin Gothic Book">Lorem IpsumSchriftart>

Fast niemand würde denken, dass Frankin Gothic Book eine reine Windows-Schriftart ist. Auf einem Mac ist die Wirkung der Schriftart „Frankin Gothic Book“ überhaupt nicht erkennbar. Da das System diese Schriftart nicht finden kann, wird für die Anzeige die Standardschriftart des Mac verwendet. Dadurch unterscheidet sich der Stil der Webseite völlig vom Original und kann überhaupt nicht die Wirkung von Frankin Gothic Book erzielen. Deshalb hat das W3C das Konzept des Schriftsatzes vorgeschlagen – eine Reihe ähnlicher Schriftarten werden in der Reihenfolge ihrer Priorität zu einer Liste zusammengefasst; der Browser beginnt mit dem Abgleich vom Kopf der Liste, bis er die erste verfügbare Schriftart findet und verwendet Die Schriftart wird angezeigt.

Zum Beispiel können wir im obigen Beispiel einen Schriftartensatz wie diesen erstellen:

<span style='font-family: „Franklin Gothic Book“, „Lucida Grande“'>Lorem Ipsumspan>

• Schauen wir uns einmal an, wie der Browser diesen Text darstellt:

• 
  

• Unter Windows: der Browser beginnt bei Die Suche beginnt mit der ersten Schriftart in der Liste – Frankin Gothic Book ist im System vorhanden und wird mit der Schriftart Frankin Gothic Book angezeigt.

• Unter Mac: Der Browser beginnt mit der Suche ab der ersten Schriftart in der Liste – Frankin Gothic Book ist nicht im System vorhanden und die Suche schlägt fehl. Suchen Sie weiter nach der nächsten Schriftart – Lucida Grande. Die Schriftart Lucida Grande ist im System vorhanden, die Suche wird abgebrochen und die Schriftart Lucida Grande wird angezeigt.

Auf diese Weise kann der Mac diesen Text in der Schriftart Lucida Grande ähnlich dem Frankin Gothic Book anzeigen.

Aber es kann sein, dass ein Computer weder über die Schriftart „Frankin Gothic Book“ noch über die Schriftart „Lucida Grande“ verfügt und daher den obigen Text trotzdem nicht korrekt anzeigen kann. Infolgedessen müssen Entwickler dieser Schriftartenliste kontinuierlich Schriftarten hinzufügen, um sie an verschiedene Systeme anzupassen, wodurch dieser Schriftartensatz seine ursprüngliche Funktion, „ähnliche Schriftarten zu organisieren“, verliert. Deshalb wurde „Universelle Schriftfamilie“ in den Schriftartensatz eingeführt, bei dem es sich um die Serifen und Sans-Serifen handelt, die wir oft sehen. Ich werde diese beiden sowie einige andere allgemeine Schriftfamilien in zukünftigen Artikeln ausführlich vorstellen. Hier können wir sie einfach als „Eine endgültige Ersatzschriftart, die vom Browser angegeben wird, wenn alle angegebenen Schriftarten ungültig sind, verstehen.“

Verbessern wir zum Beispiel den obigen Beispieltext:

<span Stil='Schriftfamilie: „Franklin Gothic Book“, „Lucida Grande“, serifenlos“> Lorem Ipsumspan>

• Sehen wir uns an, wie der Browser diesen verbesserten Text darstellt:

• 
  

• Unter Windows: Der Browser beginnt mit der Suche ab der ersten Schriftart in der Liste. Frankin Gothic Book ist im System vorhanden und wird mit der Schriftart Frankin Gothic Book angezeigt.

• Unter Mac: Der Browser beginnt mit der Suche ab der ersten Schriftart in der Liste – Frankin Gothic Book ist nicht im System vorhanden und die Suche schlägt fehl. Suchen Sie weiter nach der nächsten Schriftart – Lucida Grande. Die Schriftart Lucida Grande ist im System vorhanden, die Suche wird abgebrochen und die Schriftart Lucida Grande wird angezeigt.

• Einiges System: Der Browser beginnt mit der Suche ab der ersten Schriftart in der Liste – Frankin Gothic Book ist im System nicht vorhanden und die Suche schlägt fehl. Suchen Sie weiter nach der nächsten Schriftart – die Schriftart Lucida Grande ist ebenfalls nicht auf dem System vorhanden. Suchen Sie weiter nach der nächsten Schriftart – der Universalschrift ohne Serifen. Der Browser verwendet zur Anzeige dieses Textes seine standardmäßige serifenlose Schriftart „Arial“.

Bitte beachten Sie zwei Punkte. Welcher Schriftart eine universelle Schriftfamilie entspricht, bestimmt zunächst der Browser. Im obigen Beispiel hat der Browser Arial als serifenlose Schriftart angegeben, es ist jedoch durchaus möglich, dass ein anderer Browser Helvetica als serifenlose Schriftart angegeben hat. Welche Schriftart letztendlich verwendet wird, ist nicht vorhersehbar. Zweitens ist eine universelle Schriftfamilie nur eine Ersatzlösung, wenn andere Schriftarten im Schriftartensatz ungültig sind. Deshalb - Designer sollten ihr Bestes geben, um einen vollständigen Schriftsatz bereitzustellen, der alle Systeme so weit wie möglich abdeckt, und sollten sich nicht auf universelle Schriftfamilien verlassen .

Zwei Schreibweisen ähnlich der folgenden sind falsch:

<span Stil="font-family:sans-serif" >Lorem Ipsumspan>
<span Stil="font-family:sans-serif,Arial"> Lorem Ipsumspan>

Der Fehler bei der ersten Schreibweise besteht darin, dass sie gleichbedeutend damit ist, die Schriftart überhaupt nicht anzugeben, und es dennoch dem Browser überlässt, die Schriftart auszuwählen. Schreiben ist gleichbedeutend mit Nichtschreiben.

Der Fehler der zweiten Schreibweise liegt in der Reihenfolge. Denn eine universelle Schriftfamilie sollte nur wirksam werden, wenn alle anderen Schriften in einem Schriftsatz deaktiviert sind. Wenn Sie daher die angegebene Schriftart nach der universellen Schriftart platzieren, wird die universelle Schriftart verwendet, wenn die angegebene Schriftart nicht mit ihr übereinstimmt. Daher sollten Sie sicherstellen, dass die universelle Schriftart an letzter Stelle im Schriftartensatz steht .

Außerdem gibt es hier zwei Dinge zu erklären.

Obwohl die Regeln dafür, welche Schriftarten im Schriftartensatz vom Browser verwendet werden, einfach erscheinen, sind sie in Wirklichkeit sehr knifflig. Ich werde in zukünftigen Artikeln spezifische Anweisungen geben.

Zweitens: Obwohl der Name der Schriftart-CSS-Regel „font-family“ lautet, handelt es sich im Wesentlichen um einen Schriftartsatz und nicht um eine Schriftartfamilie im Sinne des Drucks. Als Schriftfamilie im Druck bezeichnet man eine Reihe unterschiedlicher Intensitätskombinationen derselben Schriftart, beispielsweise die Lucida-Familie (einschließlich Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande usw.) und die Arial-Familie (Arial, Arial Black, Arial Rounded). MT usw.), aber offensichtlich sind diese Schriftfamilien nicht für die direkte Verwendung als Schriftsatz geeignet.

Das obige ist der detaillierte Inhalt vonSchriftanwendung im Webdesign. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!