Keine typische, zumindest nicht. Jedes Zeichen ist ein HTML-Element, das mit CSS erstellt wurde. Eine echte Webfont!
Lassen Sie mich das näher erläutern. Dies ist eine Methode, Text darzustellen, ohne überhaupt eine Schriftart zu verwenden. Zufälliger Text wird mit PHP in Wörter und Buchstaben zerlegt, dann als HTML-Elemente mit Klassen gerendert. Jedes Element wird mit CSS gestaltet, um die Zeichen zu erzeugen. Dies ist „nur“ HTML, das mit CSS gesteuert wird, aber es ist dennoch Software und vermittelt die Botschaft. Es hat alle Eigenschaften einer herkömmlichen Schriftart, daher nennen wir es eine Schriftart. Eine Schriftart ohne Format.
Haftungsausschluss: Ich bin kein Experte für HTML, CSS oder PHP. Ich wette, es gibt eine Abkürzung oder eine einfachere Lösung, um das zu erreichen, was ich hier getan habe, aber da ich mit den Ergebnissen zufrieden bin, werde ich den Prozess und meine Erfahrungen darlegen. Die Präsentation ist kein Tutorial; es ist ein Experiment, das auf meinen begrenzten Fähigkeiten basiert und so behandelt werden sollte.
Die Idee
Das Projekt sollte nie fünf Monate dauern, aber so lange hat es gedauert! Alles begann mit dem Experimentieren mit einem CSS-Icon, bei dem Pseudo-Elemente verwendet wurden, um Formen zu erzeugen. Nachdem der erste Buchstabe S fertig war, waren die restlichen relativ einfach. Ich prüfte, ob es ähnliche Projekte gab, fand aber nicht viel, und war daher motiviert, zu sehen, wie weit ich kommen konnte.
Anfänglich schien eine SVG-Schrift, die mit CSS gesteuert wird, eine gute Idee zu sein. Dies hätte diese Aufgabe erheblich erleichtert (SVG ist zum Zeichnen gedacht) und hätte den Fokus auf designspezifische Effekte gelegt, aber es fehlt die Flexibilität eines rohen HTML-Elements. Eine SVG kann nicht kontextabhängig modifiziert werden, und der Prozess fällt auf das herkömmliche Schriftendesign zurück, bei dem jedes Zeichen eine feste Form und einen festen Code hat.
Wie es funktioniert
Dies ist eine hybride Form von Web- und Schriftendesign. Jedes Zeichen wird wie jedes Web-Element aufgebaut und inline verwendet, um wie eine Schriftart zu funktionieren. Metriken, Schriftschnitte, OpenType-Features und alle anderen Schriftarteigenschaften werden ausschließlich über die CSS-Datei gesteuert.
Das Schriftendesign basiert auf der Randbreite der Elemente, was es extrem vielseitig macht. Mit Ausnahme von Skriptschriften können mehrere Stile und Schriftschnitte allein durch Randvariationen mit derselben Form erzielt werden. Bei komplexeren Zeichen werden `clip-path` und der Hintergrund verwendet, um den Ausschnitteffekt zu erzeugen.
Verschachtelte Elemente werden generiert, wenn die Pseudo-Elemente `::before` und `::after` nicht ausreichen, um ein Zeichen zu formen. Die Verwendung von `em`-Werten für Breite, Höhe und Randbreiten hilft später bei der Steuerung der Schriftgröße. Dies ist eine der goldenen Regeln.
Ein Zeichen (links) wird wie jedes CSS-Icon (rechts) aufgebaut. Es gibt keine wesentlichen Unterschiede. Manchmal ist ein Buchstabe leichter zu erstellen, ähnlich wie bei einer Strichfigur, basierend auf Kreisen und Linien. Aber hier kann man wirklich die Rolle der `border-radius`-Eigenschaft wertschätzen. Persönlich war ich nie ein Fan von abgerundeten Rändern, aber diese Erfahrung hat meine Meinung geändert. Grundsätzlich gibt es keine Grenzen für das, was ein Radius leisten kann.
Unten sind die einzigen beiden „echten“ Beispiele der CSS-Schrift in diesem Artikel, die restlichen Beispielbilder wurden für eine einfachere Anzeige in einem Blogbeitrag in SVG konvertiert.
Meistens muss man auf den gewünschten Effekt bestehen, aber am Ende möchte man dieses Symbol in seiner Brieftasche tragen. Symbol erstellt mit einer einzigen Form, das Pseudo-Element wird nur verwendet, um die Drehung des Hauptelements zu vermeiden, falls es inline verwendet wird.
Die Serifen-Vorschau präsentiert eine komplexere Situation, aber wie üblich hat eine serifenlose Schrift weniger Elemente zu verarbeiten, was die Datei kleiner macht und schneller lädt. Dies ist eigentlich kein Problem und ist nur logisch – die CSS wird gelesen, bevor eine mit der `@font-face`-Regel eingebettete Schrift.
Die Herausforderung
Naiver Anfang, unter Einbeziehung aller mathematischen Berechnungen und Logik. Keiner der Werte funktioniert, wenn ein Pixel das entscheidet. Die endgültige Lösung in diesem Fall war, ein zweites übergeordnetes Element einzufügen, das die „untergeordneten“ Elemente ordentlich hält.
Der schwierigste Teil ist, das Pixel-Verhältnis zu schlagen oder die Pseudo-Elemente an die Grundform anzupassen. Ausgefeilte mathematische Formeln versagten, als das Zeichen verkleinert wurde. Ein Browser behandelt jedes Element separat und verschiebt es auf den nächsten Ganzzahlwert.
Eine Lösung hierfür war, so viele Pseudo-Elemente wie möglich zu erstellen (auch zusätzliche Elemente einzuschließen) und eine einzige Referenz für ein Paar von `::before` und `::after` zu verwenden, die nicht mit der Hauptform zusammenhängen. In diesem Fall rendert der Browser die Elemente mehr oder weniger an derselben Position.
Ein Zeichen ohne Referenzpunkt wird unten am Beispiel des S-Buchstabens dargestellt. Der obere und untere Teil des Buchstabens sind zwei Pseudo-Elemente, ohne eine Grundform, auf die sie sich stützen können (z.B. der graue Bereich in der Serife oben oder hier in der Ziffer zwei).
Nachdem einige hundert Zeichen erstellt wurden, stellt man fest, dass ein Zeichen keine Inline-Transformationen unterstützt (d.h. `skew()`, `rotate()` und ähnliches), da es sich nicht an Geschwister anpasst. Dies wird visuell bei der Textauswahl deutlicher. Aus diesem Grund ist ein Pseudo-Element sinnvoll. Ich würde sagen, essenziell: die zweite goldene Regel.
Die Grafik zeigt das Grundprinzip der Konstruktion. Wenn Aperturen nicht einfach mit der `{border: 0;}`-Regel gesteuert werden können, wird `clip-path` verwendet.
In diesem Fall benötigt der S-Buchstabe eine kleinere Apertur, daher wird der Rand beibehalten und mit `clip-path` auf die gewünschte Entfernung zugeschnitten.
CSS-Benutzereigenschaften
Es scheint einfacher zu sein, einen Stil in CSS zu erstellen als in Schriftprogrammen. Sie haben die Möglichkeit, Formen und Größen für mehrere Zeichen gleichzeitig zu steuern. In CSS werden mehr Zeichen im selben Regelwerk zusammengefasst.
CSS-Benutzerdefinierte Eigenschaften sind in dieser Situation äußerst nützlich, insbesondere zur Steuerung von Rändern, Breiten und Positionen. Die verschiedenen Schriftschnitte sind das Ergebnis von Änderungen in der Variablen, mit anschließenden Anpassungen. Feinabstimmung ist unvermeidlich, da Zeichenformen und -größen die Randbreite berücksichtigen und bei unterschiedlichen Rändern, insbesondere bei asymmetrischen Formen, möglicherweise nicht proportional angezeigt werden.
Ausschnitteffekt, erzeugt durch Hinzufügen derselben Hintergrundfarbe zum überlagernden Element. Kombination von Farben und Effekten mit `mix-blend-mode`.
Der Ausschnitteffekt wird erzeugt, indem dieselbe Hintergrundfarbe zum überlagernden Element hinzugefügt wird, und dann eine Kombination von Farben und Effekten mit `mix-blend-mode` verwendet wird.
Eine globale Farbvariable ist in CSS erforderlich, um einen Ausschnitteffekt für verschachtelte Elemente zu erzeugen, die ansonsten die Elternfarbe übernehmen würden (überlagernde Elemente passen zum Hintergrund).
Die `background-image`-Eigenschaft funktioniert nicht bei Zeichen, die ausschließlich aus Rändern aufgebaut sind, und der Hintergrund ändert sich, wenn das Element Größen- oder Transformationstransformationen (Skalieren, Drehen oder andere) aufweist.
Wo ein Hintergrund nicht verwendet werden kann, ist die Lösung `mix-blend-mode: lighten;` auf dunklen Hintergründen und `mix-blend-mode: darken;` auf hellen Hintergründen.
Nebeneffekte
Der Nachteil ist, dass einige Effekte unerwartete oder sogar gegenteilige Ergebnisse bei Elementen mit variablen Eigenschaften haben können. Normalerweise liest ein `filter` Elemente als vollständige Objekte. Um Konflikte zu vermeiden, sind Ränder und Transformationseffekte für das Schriftendesign reserviert.
Schriftart zu Text
Eine Schriftart macht noch keinen Text. Die ursprüngliche Idee war, einen Text zu erstellen, der zusammen mit dem CSS geladen wird, ohne Abhängigkeiten. Dafür ist die beste Option PHP (meine Anfänger-Meinung). Neben dem Rendern von HTML mit Inline-Funktionen ist es für fast jede denkbare Aufgabe geeignet. Ohne PHP wäre dieses Projekt nicht möglich gewesen.
Natürlich war die erste Aufgabe mit PHP, einen zufälligen Text zu zerlegen, zusätzliche Leerzeichen zu entfernen und passende Gruppen für jedes Wort und jeden Buchstaben zu erstellen, jeder mit seiner eigenen Klasse. Bisher gut. Ich werde nicht auf den Teil eingehen, der reibungslos verlief, es ist eine grundlegende Funktion, die `split`, `explode` und all die anderen Wörter aus einem Videospiel verwendet.
Dennoch musste ich, da ich das noch nie zuvor gemacht hatte, den harten Weg lernen. Niemand sagte mir, dass PHP „0“ (Null) als null betrachtet, also ging ein Tag verloren. Ich konnte nicht herausfinden, warum meine Nullen nicht angezeigt wurden.
Für jeden, der dieses Problem hat, ist es vielleicht hilfreich. Anstatt die `empty()`-Funktion zu verwenden, habe ich die folgende verwendet
Das andere Hauptproblem war der Zeichenbereich. Es scheint, dass es viel zu viele Einstellungen in HTML, der `.htaccess`-Datei und auf dem Server selbst gibt, nur um Sonderzeichen zu erkennen. Die Lösung fand sich nach ein paar Tagen in der PHP-Dokumentation, gepostet von qeremy [atta] gmail [dotta] com, offensichtlich jemand, der in einer Region mit vielen diakritischen Zeichen lebt.
Viele Brocken, wenn Sie mich fragen, aber es funktioniert wie am Schnürchen und löst jedes Problem. Die Funktion ignoriert im Grunde die Spracheinstellungen und liest jedes Zeichen, auch die nicht standardmäßigen. Zeichen, die tief in den Unicode-Tabellen vergraben sind, werden erkannt, wenn die PHP-Funktion dieses Zeichen enthält.
Diese Funktion schafft nur die Möglichkeit, jedes Zeichen so zu generieren, wie es eingegeben wurde, ohne dass HTML-Entitäten benötigt werden. Diese Option schränkt die Verwendung von Text im HTML-Format nicht ein, aber Inline-Codes müssen vermieden oder durch Alternativen ersetzt werden. Anstatt zum Beispiel Non-Breaking Spaces (` `) zu verwenden, können Elemente in den ``-Tag eingewickelt werden.
Die HTML-Entitäten werden nicht dekodiert, was aus meiner Sicht ein Vorteil ist. Standardsystemschrift auf der linken Seite. Auf der rechten Seite ist CSS-Text ohne Änderungen gerendert.
Struktur
Damit ist der nächste Schritt die Erstellung einer spezifischen Struktur für jedes Zeichen. Die Klasse der HTML-Elemente und die Positionen der verschachtelten Elemente hängen von einer langen Liste von Zeichen ab, die einer oder mehreren Klassen entsprechen. Einige der grundlegendsten Zeichen sind von dieser Liste nicht ausgenommen (z.B. benötigt das kleine „a“ eine Akzentmarkierung, was ein zusätzliches Element/eine zusätzliche Klasse bedeutet).
Die Grundstruktur sieht ungefähr so aus, nur um die Idee zu vermitteln ...
'Ć' => 'Cacute C acute'
... was drei Elemente rendert: das übergeordnete Cacute, den Buchstaben C und die Akzentmarkierung. Das Ergebnis ist unten, wobei das rote Quadrat das übergeordnete Element darstellt, das die anderen beiden voreingestellten Elemente enthält.
Cacute – eine klassische Kombination aus einem einfachen Buchstaben und einem Akzent.
Die Technik ähnelt stark der Art und Weise, wie Diakritika (manchmal Ligaturen) in Schriftprogrammen erstellt werden, basierend auf Paarungen. Wenn ein Komponentenelement geändert wird, passen sich alle anderen an.
Da jedes Element mehrere Anwendungen haben kann, werden IDs vermieden und nur Klassen verwendet.
OpenType-Features
Die PHP-Funktion ist so eingestellt, dass sie sich je nach Kontext unterschiedlich verhält. Die Zeichenerkennung ist so eingestellt, dass Paarungen ersetzt und Ligaturen beim Rendern des CSS-Textes erstellt werden.
Kontextuelle Ligaturen im CSS-Text sind keine eigenständigen Zeichen und haben keine spezifischen Klassen. Im Gegensatz zu herkömmlichen OpenType-Features werden die Zeichen umgestaltet, nicht ersetzt. Die Interaktion wird in CSS gesteuert, indem das zweite Element gestylt wird, um zu verschmelzen oder ein neues Zeichen zu bilden.
Die Features werden mit einer bestimmten Klasse aktiviert, die dem übergeordneten Container hinzugefügt wird. Alternativen werden unter allen Umständen gerendert, unabhängig davon, ob ein Zeichen registriert ist oder nicht, in jedem Browser, mit oder ohne Unterstützung für Schriftmerkmale.
Beispiel für das Ordinalindikator-Feature, aktiviert mit der Klasse `.ordn`. Die Zeichen werden inline gestylt und ändern ihr Aussehen entsprechend der Klasse und ihres vorherigen Geschwisters. Dieselbe Vorgehensweise wird für Stilistische Alternativen (`salt`), Ziffern nach alter Art (`onum`), durchgestrichene Nullen (`slsh`), hochgestellte Zeichen (`sups`), tiefgestellte Zeichen (`subs`) und Brüche (`frac`) angewendet. Klassen mit ähnlichen Funktionen wie OpenType sind nach den Registrierten Features von Microsoft/Adobe benannt.
HTML-Syntax
Jedes HTML-Element kann die CSS-Schriftart enthalten, solange es die Klasse `.css` neben dem Schriftschnitt hat. Um einen Schriftschnitt auszuwählen, wird die Klasse `.thin`, `.light`, `.regular` oder `.bold` verwendet, etwa `
` (das `
`-Tag ist nur eine Sicherheitsmaßnahme, um Stilinterferenzen zu vermeiden).
Verfügbare Schriftschnitte: Dünn, Leicht, Regular und Fett.
Der Text kann ein HTML-Format haben. Klartext ist nicht zwingend erforderlich.
PHP ignoriert eine Klammer (`<`), wenn diese einen schließenden Partner hat, was bedeutet, dass jedes HTML-Tag in einem Text aktiv bleibt und nur der Textinhalt als CSS-Schriftart gerendert wird. URLs, Dateipfade oder andere zusätzliche Informationen im Tag werden vom Browser genauso kodiert. Derselbe Tag kann Gruppen von Buchstaben oder ganze Sätze stylen, wenn sie in CSS gesetzt sind.
CSS-Text ist eine Gruppe von Objekten mit Rändern, offen für Größen- und Farbbehandlungen. Denken Sie an Farbe als `border-color` und umgekehrt. `:first-child` anstelle von `:first-letter`.
Die `font-size` wird wie bei jeder anderen Schriftart in der CSS-Datei festgelegt, unter Verwendung von Viewport-, Prozent-, Pixel-, `em`- oder `rem`-Einheiten. Werte in Pixeln funktionieren mit Dezimalwerten.
Die Eigenschaften `text-align` und `text-indent` funktionieren standardmäßig. Der Text wird auch ohne Textinhalt an jede Einstellung angepasst.
Block-Level-Elemente (z.B. `
`, `
`, `
`) innerhalb von Texten führen zu einem Zeilenumbruch, wie es normalerweise der Fall wäre. Das ` `-Tag funktioniert wie erwartet.
Mit Ausnahme von Textformatierungselementen (z.B. `
`-`
`, ``, ``, ``, ``, ``, etc.), die neue Regeln benötigen, um den richtigen Effekt auf den Text zu erzielen, funktionieren die meisten semantischen Elemente (z.B. `
Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.
Ich könnte mir vorstellen, dass jemand das mit CSS-Übergängen für die Erstellung von Motion Graphics verwendet. Eine weitere Anwendung könnte eine neuartige Website sein, auf der ein Benutzer Text eingibt, einige Einstellungen vornimmt, auf eine Schaltfläche klickt und ihm der HTML- und CSS-Code angezeigt wird, mit dem er dann machen kann, was er will.
Interessant, und glauben Sie mir, ich habe viele Experimente durchgeführt, nur um zu sehen, ob sie durchgeführt werden könnten, daher habe ich diese Lektüre genossen und das Experiment gelobt, aber es gibt so viele Probleme hier bei den Dingen, die Sie als „Vorteile“ auflisten.
Barrierefreiheit war das Erste, was mir in den Sinn kam, als ich den Titel des Beitrags las.
Ich habe auch ernsthafte Zweifel, ob Suchmaschinen die von Ihnen erwähnten Attribute tatsächlich indizieren werden – Sie sagen, sie seien wie img alt-Tags, aber das bedeutet nicht, dass sie gelesen werden.
Und obwohl es „cachable“ ist, ist es nicht unabhängig vom Seiteninhalt cachbar. Zumindest bei Schriftarten cache ich die Schriftartdatei und verwende sie dann bei zweiten und nachfolgenden Seitenaufrufen wieder. Dies muss doch bei jedem Seitenaufruf die vollständigen Daten für alles herunterladen, oder?
Außerdem ist der Code, den dies generiert, wenn ich mich nicht irre, tatsächlich größer als die Schriftartdaten, die er ersetzen würde. Die Datenmenge, die zur Darstellung eines einzelnen Zeichens im Markup benötigt wird, ist weitaus größer als ein reguläres Zeichen, und das muss für jede Instanz dieses Zeichens auf der Seite wiederholt werden. Und dann haben Sie noch das gesamte zugehörige CSS.
Wieder technisch interessant und danke für das Teilen, aber ich denke, dies könnte einen Hinweis „nicht für den Produktionseinsatz geeignet“ oben benötigen.
„Keine Barrierefreiheit“ sollte in der Liste der Nachteile für ein Projekt wie dieses viel weiter oben stehen. Es ist eine *wirklich* wichtige Überlegung, die oft nur als „nett zu haben“ behandelt wird. Dies ist ein wirklich cooles Projekt aus technischer/experimenteller Sicht; Ich bin ehrlich gesagt erstaunt über die kreative Anwendung von Stilen, die erforderlich war, um die Zeichen nicht nur lesbar, sondern auch wirklich attraktiv und kohärent als Schriftart zu machen. Aber seien wir ehrlich: Niemand sollte jemals aus irgendeinem Grund eine CSS-basierte Schriftart in der Produktion verwenden.
Das erinnert mich ein wenig an sIFR, das für diejenigen von Ihnen, die nicht älter als Dreck sind, eine Möglichkeit war, Text durch ein Adobe Flash-Objekt zu ersetzen, da wir damals keine Google Fonts und Font Squirrel und all die anderen wirklich guten Webfont-Ressourcen hatten.
sIFR nahm wichtige Seiteninhalte (z. B. einen Titel) und verwandelte sie in etwas, das nicht mehr auswählbar, durchsuchbar, kopierbar usw. war. Im Wesentlichen nahm es Inhalte (und Kontext) von der Seite weg und machte sie für den Benutzer weniger zugänglich. Es machte aus etwas Informativem etwas Dekorativem.
… als Proof of Concept ist das brillant. Als Beispiel für die Flexibilität von CSS ist das erstaunlich! Aber als etwas, das auf einer tatsächlichen Website eingesetzt wird? Dort zögere ich, weil es sich wie ein Rückschritt in Bezug auf Benutzererfahrung und Barrierefreiheit anfühlt.
Ich möchte auch darauf hinweisen, dass einige der Vorteile nicht mehr so relevant sind wie noch vor ein paar Jahren. @font-face wird breit unterstützt, und die Anzahl webfreundlicher Schriftressourcen ist in den letzten Jahren explodiert. Und da so viele prominente Stimmen in der Webentwicklungsbranche die Bedeutung von Leistung betonen, haben sich Schriftartentwickler auch darauf konzentriert, uns die performantesten Schriftarten zu liefern, die sie generieren können.
Schön zu lesen. Eigenartige Projekte wie dieses machen oft (zumindest anfangs) Spaß und man lernt eine Menge dabei.
„PHP betrachtet „0“ (null) als null“
Das ist stark vereinfacht. PHP betrachtet generell 0 nicht als null. Die von Ihnen verwendete Funktion empty() wird zum Testen von falsy-Werten verwendet, wozu auch null gehört.
„Viele Brocken, wenn Sie mich fragen“
Sie haben wahrscheinlich Recht. Ich *vermute*, Sie möchten einfach einen (mehrzeichenkodierten/utf-xx/unicode)-String in ein Array einzelner Zeichen aufteilen, sodass Sie die Arbeit mit etwas wie diesem erledigen könnten
Vielen Dank für Ihre Kommentare. Ich schätze das besonders, weil ich daraus lernen kann. Ansonsten ist das Projekt tatsächlich zum Spaß, nicht um eine neue Sache zu starten =)
Sehr interessante Übung, vielleicht ist sie als Wortkunst-Generator oder Logo-Generator nützlich? Wie Sie erwähnt haben, nicht für Textblöcke geeignet, aber spaßig für Überschriften.
Nicht auswählbar – Das ist der Knackpunkt für uns
Man könnte doch eine Funktion und einen Prozess erstellen, um das vielleicht mit JS zu ermöglichen? Das wäre interessant.
Liebe dieses Projekt, sehr cool
Es ist eine nette Idee, aber ich erwarte nicht, dass sich das jemals durchsetzt, da ein Screenreader es nicht einmal als Text erkennen würde.
Ich könnte mir vorstellen, dass jemand das mit CSS-Übergängen für die Erstellung von Motion Graphics verwendet. Eine weitere Anwendung könnte eine neuartige Website sein, auf der ein Benutzer Text eingibt, einige Einstellungen vornimmt, auf eine Schaltfläche klickt und ihm der HTML- und CSS-Code angezeigt wird, mit dem er dann machen kann, was er will.
Ähm. Aber warum?
Ich sehe keine wirklichen Vorteile außer der Tatsache, dass die Schriftart sofort mit der CSS-Datei verfügbar ist.
Sie wissen, dass Sie Ihre Schriftart base64-kodieren und in die CSS-Datei einbetten können, oder?
Interessant, und glauben Sie mir, ich habe viele Experimente durchgeführt, nur um zu sehen, ob sie durchgeführt werden könnten, daher habe ich diese Lektüre genossen und das Experiment gelobt, aber es gibt so viele Probleme hier bei den Dingen, die Sie als „Vorteile“ auflisten.
Barrierefreiheit war das Erste, was mir in den Sinn kam, als ich den Titel des Beitrags las.
Ich habe auch ernsthafte Zweifel, ob Suchmaschinen die von Ihnen erwähnten Attribute tatsächlich indizieren werden – Sie sagen, sie seien wie img alt-Tags, aber das bedeutet nicht, dass sie gelesen werden.
Und obwohl es „cachable“ ist, ist es nicht unabhängig vom Seiteninhalt cachbar. Zumindest bei Schriftarten cache ich die Schriftartdatei und verwende sie dann bei zweiten und nachfolgenden Seitenaufrufen wieder. Dies muss doch bei jedem Seitenaufruf die vollständigen Daten für alles herunterladen, oder?
Außerdem ist der Code, den dies generiert, wenn ich mich nicht irre, tatsächlich größer als die Schriftartdaten, die er ersetzen würde. Die Datenmenge, die zur Darstellung eines einzelnen Zeichens im Markup benötigt wird, ist weitaus größer als ein reguläres Zeichen, und das muss für jede Instanz dieses Zeichens auf der Seite wiederholt werden. Und dann haben Sie noch das gesamte zugehörige CSS.
Wieder technisch interessant und danke für das Teilen, aber ich denke, dies könnte einen Hinweis „nicht für den Produktionseinsatz geeignet“ oben benötigen.
„Keine Barrierefreiheit“ sollte in der Liste der Nachteile für ein Projekt wie dieses viel weiter oben stehen. Es ist eine *wirklich* wichtige Überlegung, die oft nur als „nett zu haben“ behandelt wird. Dies ist ein wirklich cooles Projekt aus technischer/experimenteller Sicht; Ich bin ehrlich gesagt erstaunt über die kreative Anwendung von Stilen, die erforderlich war, um die Zeichen nicht nur lesbar, sondern auch wirklich attraktiv und kohärent als Schriftart zu machen. Aber seien wir ehrlich: Niemand sollte jemals aus irgendeinem Grund eine CSS-basierte Schriftart in der Produktion verwenden.
Das erinnert mich ein wenig an sIFR, das für diejenigen von Ihnen, die nicht älter als Dreck sind, eine Möglichkeit war, Text durch ein Adobe Flash-Objekt zu ersetzen, da wir damals keine Google Fonts und Font Squirrel und all die anderen wirklich guten Webfont-Ressourcen hatten.
sIFR nahm wichtige Seiteninhalte (z. B. einen Titel) und verwandelte sie in etwas, das nicht mehr auswählbar, durchsuchbar, kopierbar usw. war. Im Wesentlichen nahm es Inhalte (und Kontext) von der Seite weg und machte sie für den Benutzer weniger zugänglich. Es machte aus etwas Informativem etwas Dekorativem.
… als Proof of Concept ist das brillant. Als Beispiel für die Flexibilität von CSS ist das erstaunlich! Aber als etwas, das auf einer tatsächlichen Website eingesetzt wird? Dort zögere ich, weil es sich wie ein Rückschritt in Bezug auf Benutzererfahrung und Barrierefreiheit anfühlt.
Ich möchte auch darauf hinweisen, dass einige der Vorteile nicht mehr so relevant sind wie noch vor ein paar Jahren.
@font-facewird breit unterstützt, und die Anzahl webfreundlicher Schriftressourcen ist in den letzten Jahren explodiert. Und da so viele prominente Stimmen in der Webentwicklungsbranche die Bedeutung von Leistung betonen, haben sich Schriftartentwickler auch darauf konzentriert, uns die performantesten Schriftarten zu liefern, die sie generieren können.Schön zu lesen.
Eigenartige Projekte wie dieses machen oft (zumindest anfangs) Spaß und man lernt eine Menge dabei.
Das ist stark vereinfacht. PHP betrachtet generell 0 nicht als null. Die von Ihnen verwendete Funktion
empty()wird zum Testen von falsy-Werten verwendet, wozu auch null gehört.Sie haben wahrscheinlich Recht. Ich *vermute*, Sie möchten einfach einen (mehrzeichenkodierten/utf-xx/unicode)-String in ein Array einzelner Zeichen aufteilen, sodass Sie die Arbeit mit etwas wie diesem erledigen könnten
(es ist im Wesentlichen das, was qeremys Code tut, abzüglich der Option zum Gruppieren mehrerer Zeichen)
Vielen Dank für Ihre Kommentare.
Ich schätze das besonders, weil ich daraus lernen kann.
Ansonsten ist das Projekt tatsächlich zum Spaß, nicht um eine neue Sache zu starten =)
Sehr interessante Übung, vielleicht ist sie als Wortkunst-Generator oder Logo-Generator nützlich? Wie Sie erwähnt haben, nicht für Textblöcke geeignet, aber spaßig für Überschriften.
Andere zuvor erstellte CSS-Schriftarten.
– 2004 http://www.cssplay.co.uk/menu/cssfont
– 2010 https://web.archive.org/web/20100414205534/https://desandro.com/resources/curtis-css-typeface
– 2015 https://yusugomori.com/projects/css-sans/fonts
Danke! Es ist gut zu wissen, dass ich die Kritik mit anderen Leuten teilen kann. Die 2015 erstellte ist meiner Vorgehensweise ähnlich. Großartig!