Zumindest keine typische. Jedes Zeichen ist ein HTML -Element, das mit CSS erstellt wurde. Eine echte Web -Schriftart!
Lass mich näher erläutern. Dies ist eine Möglichkeit, Text zu rendern, ohne überhaupt eine Schriftart zu verwenden. Zufälliger Text wird mit PHP in Wörter und Buchstaben aufgeteilt und dann als HTML -Elemente mit Klassen gerendert. Jedes Element wird mit CSS gestaltet, um die Zeichen zu erstellen. Dies ist "nur" HTML, das mit CSS kontrolliert wird, aber es handelt sich dennoch um Software und erhält die Nachricht durch. Es hat alle Eigenschaften, die eine herkömmliche Schriftart macht, also nennen wir es eine Schriftart. Eine Schrift ohne Format.
Haftungsausschluss: Ich bin kein Experte für HTML, CSS oder PHP. Ich bin bereit zu wetten, dass es eine Abkürzung oder eine einfachere Lösung gibt, um das zu erreichen, was ich hier getan habe, aber da ich mit den Ergebnissen zufrieden bin, werde ich den Prozess und meine Erfahrung vorstellen. Die Präsentation ist kein Tutorial; Es ist ein Experiment, das auf meinen begrenzten Fähigkeiten basiert und als solche behandelt werden sollte.
Das Projekt sollte nie fünf Monate dauern, aber das brauchte es! Alles begann mit einem Spiel mit einem CSS-Symbol mit Pseudoelementen, um Formen herzustellen. Sobald der erste S -Brief beendet war, war der Rest relativ einfach. Ich habe nachgesehen, ob es andere ähnliche Projekte gab, aber nicht viel fand, also war ich motiviert zu sehen, wie weit ich kommen konnte.
Anfangs schien eine mit CSS kontrollierte SVG -Schriftart eine gute Idee zu sein. Dies würde diese Aufgabe erheblich erleichtern (SVG wird zum Zeichnen gemacht) und könnte sich auf Design-spezifische Effekte konzentrieren, aber es hat nicht die Flexibilität eines rohen HTML-Elements. Ein SVG kann je nach Kontext nicht geändert werden, und der Prozess fällt auf das herkömmliche Schriftdesign zurück, bei dem jedes Zeichen eine feste Form und einen festen Code enthält.
Dies ist eine Mischung aus Web- und Schriftart. Jedes Charakter ist wie jedes Webelement erstellt und verwendet Inline, um sich wie eine Schriftart zu verhalten. Metriken, Gewichte, Opentyp -Funktionen und alle anderen Schriftarten werden ausschließlich mit der CSS -Datei gesteuert.
Das Schriftart der Schrift basiert auf der Grenzbreite der Elemente, was es äußerst vielseitig macht. Mit der Befreiung von Skript -Schriftarten können mehrere Stile und Gewichte nur aus randlichen Variationen entstehen, die dieselbe Form verwenden. Bei komplexeren Zeichen wird der Clip-Pfad und der Hintergrund verwendet, um den Ausschnittseffekt zu erzeugen.
Verschachtelte Elemente werden erzeugt, wenn das :: vor und :: nach Pseudo-Element nicht ausreicht, um einen Charakter zu bilden. Die Verwendung von EM -Werten für die Breite, Höhe und Randbreiten hilft später bei der Steuerung der Schriftgröße. Dies ist eine der goldenen Regeln.
Ein Zeichen (links) ist wie jedes CSS -Symbol (rechts) erstellt. Es gibt keine wesentlichen Unterschiede. Manchmal ist ein Brief leichter zu bauen, genau wie ein Stickman, basierend auf Kreisen und Linien. Aber hier können Sie die Rolle des Grenzgeschäfts wirklich schätzen. Persönlich war ich nie ein Fan von abgerundeten Grenzen, aber diese Erfahrung veränderte meine Meinung. Grundsätzlich gibt es keine Begrenzung für das, was ein Radius kann.
Im Folgenden finden Sie die einzigen zwei „realen“ Beispiele der CSS -Schriftart in diesem Artikel. Der Rest der Beispielfiguren werden für eine leichtere Anzeige in einem Blog -Beitrag in SVG konvertiert.
Die SeriF -Vorschau zeigt eine komplexere Situation, aber wie üblich hat eine SANS -Schriftart weniger Elemente, mit denen die Datei kleiner ist und schneller geladen wird. Dies ist nicht wirklich ein Problem und es ist nur logisch-das CSS wird vor einer Schrift mit der @font-face-Regel gelesen.
Am schwierigsten ist es, das Pixelverhältnis zu übertreffen oder die Pseudoelemente auf die Basisform auszurichten. Ausführliche mathematische Formeln scheiterten, als der Charater die Größe der Größe geändert wurde. Ein Browser behandelt jedes Element separat und verschiebt sie auf den nächsten Ganzzahlwert.
Eine Lösung dafür bestand darin, so viele Pseudoelemente wie möglich zu erstellen (auch auch zusätzliche Elemente) und eine einzige Referenz für ein Paar von vor und :: Nachher, nicht mit der Hauptform zu verwenden. In diesem Fall wird der Browser die Elemente mehr oder weniger an die gleiche Position bringen.
Ein Zeichen ohne Referenzpunkt wird mit dem folgenden S -Buchstaben dargestellt. Der obere und untere Abschnitt des Buchstabens sind zwei Pseudoelemente ohne Grundform, auf die man sich verlassen kann (z.
Nachdem Sie ein paar hundert Charaktere erstellt haben, erkennen Sie, dass ein Charakter die Inline -Transformation (dh schug (), rotate () und so) nicht unterstützen kann, weil er nicht auf Geschwister ausgerichtet ist. Dies wird bei der Textauswahl visuell offensichtlicher. Aus diesem Grund ist ein Pseudoelement durchaus sinnvoll. Ich würde sagen, wesentlich: die zweite goldene Regel.
Es erscheint einfacher, einen Stil in CSS zu kreieren als in Font -Software. Sie haben die Möglichkeit, Formen und Größen für mehrere Zeichen gleichzeitig zu steuern. In CSS werden im selben Regeln mehr Zeichen zusammengefasst.
CSS -benutzerdefinierte Eigenschaften sind in dieser Situation äußerst nützlich, insbesondere für die Kontrolle von Grenzen, Breiten und Positionen. Die verschiedenen Gewichte sind das Ergebnis von Änderungen in der Variablen, wobei danach Anpassungen sind. Die Feinabstimmung ist unvermeidlich, da Charakterformen und -größen die randliche Breite berücksichtigen und möglicherweise nicht proportional mit unterschiedlichen Grenzen angezeigt werden, insbesondere bei asymmetrischen Formen.
Der Ausschnittseffekt wird erzeugt, indem dem Überlagerungselement dieselbe Hintergrundfarbe hinzugefügt und dann eine Kombination von Farben und Effekten unter Verwendung des Mix-Blend-Modus verwendet wird.
In CSS ist eine globale Farbvariable erforderlich, um einen Ausschnittseffekt für verschachtelte Elemente zu erzeugen, die sonst der übergeordneten Farbe folgen würden (Überlagerungselemente entsprechen dem Hintergrund).
Die Hintergrund-Image-Eigenschaft funktioniert nicht an Zeichen, die ausschließlich mit Grenzen erstellt wurden, und der Hintergrund wird geändert, wenn das Element Größe oder Positionstransformationen (Skalierung, Drehen oder andere) aufweist.
Wenn ein Hintergrund nicht verwendet werden kann, ist die Lösung Mix-Blend-Mode: Hellen; auf dunklen Hintergründen und Mix-Blend-Mode: verdunkeln; auf leichten Hintergründen.
Der Nachteil ist, dass einige Effekte unerwartete oder sogar entgegengesetzte Ergebnisse bei Elementen mit variablen Eigenschaften haben können. Normalerweise liest ein Filter Elemente als vollständige Objekte. Um Konflikte zu verhindern, sind Grenzen und Transformationseffekte dem Schriftart der Schriftart vorbehalten.
Eine Schriftart macht keinen Text. Die Idee war in erster Linie, einen Text zu erstellen, der zusammen mit dem CSS ohne Abhängigkeiten geladen wird. Dafür ist die beste Option PHP (meine Anmeinung). Neben der Erbringung von HTML mit Inline -Funktionen ist es fast jeder erdenklichen Aufgabe. Ohne PHP wäre dieses Projekt nicht möglich.
Natürlich bestand die erste Aufgabe mit PHP darin, einen zufälligen Text aufzuteilen, zusätzliche Räume zu entfernen und passende Gruppen für jedes Wort und jeden Buchstaben zu erstellen, jeweils mit einer eigenen Klasse. So weit, ist es gut. Ich werde nicht auf dem Teil bestehen, der reibungslos verlief. Es handelt sich um eine grundlegende Funktion, indem ich Split, Explodieren und alle anderen Wörter aus einem Videospiel verwendete.
Da ich noch nie daran gearbeitet habe, musste ich auf die harte Tour lernen. Niemand hat mir gesagt, dass PHP das „0“ (Null) als Null betrachtet, also ist ein Tag weg. Ich konnte nicht herausfinden, warum meine Nullen nicht angezeigt werden.
Für jeden mit diesem Problem ist es vielleicht hilfreich. Anstatt die Funktion leer () zu verwenden, habe ich die folgende verwendet:
Funktion is_blank ($ value) {
leer zurückgeben ($ value) &&! is_numeric ($ value);
}Das andere Hauptproblem war der Charakterbereich. Es scheint, dass es in HTML, der .htaccess -Datei und auf dem Server selbst viel zu viele Einstellungen gibt, um Sonderzeichen zu erkennen. Die Lösung wurde nach einigen Tagen in ThePhP-Dokumentation gefunden, die von Qeremy [Atta] Google Mail [Dotta] com veröffentlicht wurde, offensichtlich jemand, der in einem diakritisch-hörenden Gebiet lebt.
Funktion str_split_unicode ($ str, $ länge = 1) {
$ tmp = preg_split ('~~ u', $ str, -1, preg_split_no_empty);
if ($ länge> 1) {
$ chunks = array_chunk ($ tmp, $ länge);
foreach ($ chunks als $ i => $ chunk) {
$ chunks [$ i] = join ('', (array) $ chunk);
}
$ tmp = $ chunks;
}
Return $ TMP;
}Viele Brocken, wenn Sie mich fragen, aber es funktioniert wie ein Zauber und löst jedes Problem. Die Funktion übersieht im Grunde genommen die Spracheinstellungen und liest einen beliebigen Charakter, sogar die nicht standardmäßigen. Die in den Unicode -Tabellen tief begrabenen Zeichen werden erkannt, wenn die PHP -Funktion diesen Zeichen enthält.
Diese Funktion erzeugt nur die Möglichkeit, jedes Zeichen wie Typed zu generieren, ohne dass HTML -Entitäten erforderlich sind. Diese Option beschränkt die Verwendung von Text im HTML -Format nicht, aber Inline -Codes müssen vermieden oder durch Alternativen ersetzt werden. Anstatt beispielsweise nicht blockierte Räume (& nbsp;) zu verwenden, können Elemente in das
Bei dieser Lösung besteht der nächste Schritt darin, für jedes Zeichen eine bestimmte Struktur zu erstellen. Die Klasse der HTML -Elemente und die Positionen des verschachtelten Elements hängt von einer langen Liste von Zeichen ab, die mit einem oder mehreren Klassen entsprechen. Einige der grundlegendsten Zeichen sind nicht aus dieser Liste ausgeschlossen (z. B. der kleine „A“ -Brief benötigt ein Finial, und das bedeutet ein zusätzliches Element/eine zusätzliche Klasse).
Die Grundstruktur sieht ungefähr so aus, nur um die Idee zu bekommen ...
'Ć' => 'Cacute C akute' '
… Die drei Elemente rendern: Der übergeordnete Kakute, den C -Buchstaben und den akuten Akzent. Das Ergebnis ist unten, wobei das rote Quadrat das übergeordnete Element darstellt, das die beiden anderen voreingestellten Elemente enthält.
Die Technik ist der Art und Weise, wie Diakritik (manchmal Ligaturen) in Schriftsoftware aufgebaut, die auf Paarungen aufgebaut werden. Wenn ein Komponentenelement geändert wird, wird sich jeder andere anpassen.
Da jedes Element mehrere Anwendungen haben kann, werden die IDs vermieden und nur Klassen verwendet.
Die PHP -Funktion wird je nach Kontext unterschiedlich verhalten. Die Charaktererkennung wird so eingestellt, dass sie Paarungen ersetzen und Ligaturen erstellen, wenn der CSS -Text rendert.
Kontextuelle Ligaturen im CSS -Text sind keine eigenständigen Zeichen und haben keine bestimmten Klassen. Anders als herkömmliche Openentyp -Funktionen werden die Zeichen neu gestaltet und nicht ersetzt. Die Interaktion wird in CSS durch Styling des zweiten Elements gesteuert, um ein neues Zeichen zu verschmelzen oder zu bilden.
Die Funktionen werden mit einer bestimmten Klasse aktiviert, die dem übergeordneten Container hinzugefügt wurde. Alternativen werden unter anderen Umständen, unabhängig davon, ob ein Charakter registriert ist oder nicht, in jedem Browser mit oder ohne Schriftfunktionsunterstützung.
Jedes HTML -Element kann die CSS -Schriftart enthalten, so lange es die .css -Klasse neben dem Gewicht der Schriftart hat. Um ein Gewicht auszuwählen, wird das .Hin-, .light, .reguläre oder.
Der Text kann ein HTML -Format haben. Der einfache Text ist nicht obligatorisch.
PHP ignoriert eine Klammer (
Abhängig von Layouteinstellungen können bestimmte Tags - wie , , - als Objekte behandelt werden, um ihr natives Aussehen und ihr natives Verhalten zu emulieren und anzupassen.
CSS -Text ist eine Gruppe von Objekten mit Grenzen, die für Größe und Farbbehandlungen geöffnet sind. Denken Sie an Farbe als Grenzfarbe und umgekehrt. : Erstkind statt: Erster Buchstaben.
Die Schriftgröße befindet sich in der CSS-Datei, die wie jede andere Schriftart unter Verwendung von Ansichtsfenster, Prozentsatz, Pixeln, EM oder REM-Einheiten. Die in Pixel festgelegten Werte funktionieren mit Dezimalwerten.
Die textausrichtung und die textindenten Eigenschaften funktionieren standardmäßig. Der Text entspricht auch ohne Textinhalt auf jedes Setup.
Blockelemente (zB
,
Mit Ausnahme von Elementen der Textformatierung (z. B.
Das obige ist der detaillierte Inhalt vonDie Herstellung (und potenzielle Vorteile) einer CSS -Schriftart. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was passiert, wenn ich keine Verbindung zum Netzwerk herstellen kann?
Verbindung zurücksetzen Lösung
So optimieren Sie eine einzelne Seite
So kaufen und verkaufen Sie Bitcoin auf Huobi.com
So beheben Sie 500 interne Serverfehler
drücke irgendeine Taste zum Neustart
So implementieren Sie die JSP-Paging-Funktion
Einführung in parametrische Modellierungssoftware
So führen Sie ein Shell-Skript aus
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
