Veränderte Schriftdarstellung seit 5.4

Cadeyrn · July 21, 2021 at 12:35 PM

Auf Wunsch von Tim Düsterhus eröffne ich ein separates Thema für ein Problem, welches möglicherweise mit (Regression) Benötigte Schriftstärke von Open Sans wird nicht geladen zusammenhängt, in jedem Fall auch die Schriftdarstellung betrifft, aber doch nicht das gleiche Problem ist. Folgendes Feedback habe ich von einem Nutzer nach dem Upgrade erhalten:

Quote

habe eben festgestellt, dass sich hier im Forum das Schriftbild bei Themenüberschriften und dem Usernamen in die Richtung verändert haben, dass jetzt die Ränder der einzelnen Zeichen ausgefranzter und pixeliger als vorher sind. Alle anderen Bereiche im Forum scheinen hingegen normal, mit glatten Rändern, dargestellt zu werden

Es hat nicht lange gedauert, dass das von einer anderen Nutzerin bestätigt worden ist:

Quote

Dito. ist mir heute auch aufgefallen und schon überlegt dafür ein Thema zu erstellen.

Ich habe auch Screenshots erhalten, die ich mal übereinander gelegt und als Video angehängt habe. Besonders auffällig ist die unterschiedliche Positionierung vom "i"-Punkt im Inhaltsbereich vom Zitat und die Veränderung des Schriftbilds des Begriffes "Zitat", insbesondere das "a" darin.

Die verwendete Schriftart ist Open Sans, die wie im anderen Thema erwähnt wurde, seit der WoltLab Suite 5.4 eine variable Schrift ist.

Cadeyrn · July 23, 2021 at 9:53 AM

Da wir weiterhin Fehlerberichte von Nutzern erhalten - gibt es einen Workaround, um bis zu weiteren Erkenntnissen die Schrift als nicht variable Schrift zu laden? Vielleicht liegt hier ja der Hund begraben.

**Tim Düsterhus** · July 23, 2021 at 9:57 AM Official Post

Hallo,

du kannst den kompletten font/families/Open Sans-Ordner mit dem aus 5.3 austauschen: https://github.com/WoltLab/WCF/tr…ies/Open%20Sans

Nachtrag: Danach den Stil einmal neu abspeichern.

Cadeyrn · July 23, 2021 at 10:14 AM

Danke, werde ich dann später probieren!

Ich sehe, dass es dort eh nur für Open Sans einen Ordner gibt. Dann hab ich wahrscheinlich eh das "Glück", mir die einzige Schrift ausgesucht zu haben, die Probleme macht. Hat das einen Grund, dass diese Schrift besonders behandelt wird?

**Tim Düsterhus** · July 23, 2021 at 10:17 AM Official Post

Hallo,

Google Fonts werden dynamisch in den Ordner heruntergeladen, sobald diese in einem Stil verwendet werden. Open Sans wird im Standardumfang mitgeliefert, da es bis 5.3 die Standardschrift war, der System-Font-Stack kam erst recht spät im Entwicklungsprozess von 5.4.

Theoretisch könnte man die Schrift wohl mittlerweile aus dem git entfernen, aber recht viele Stile werden sie noch referenzieren, sodass man sich so einen Download beim Stil-Import erspart.

Donner · July 23, 2021 at 11:46 AM

Quote from Tim Düsterhus

mit dem aus 5.3 austauschen

Handelt man sich dadurch Nachteile ein? Könnte man nicht in der neuen 5.4er font.css die fehlenden font-weight-Werte nachtragen?

**Tim Düsterhus** · July 23, 2021 at 11:48 AM Official Post

Hallo,

durch die größere Menge an Dateien müssen mehr Daten übertragen werden. Außerdem unterstützt das CSS für Open Sans in 5.3 noch kein Preloading.

Donner · July 23, 2021 at 11:51 AM

Siehe nochmal kurz meinen nachgetragenen Satz bezüglich font.css - Danke

Donner · July 23, 2021 at 12:01 PM

Wenn ich mir per FTP die Dateigrößen der Fonts anschaue, dann frage ich mich, wo da Datenmengen durch das neue System gespart werden sollen:

Die beiden neuen Dateien für Normal und Italic haben jeweils circa 300 KByte - also gesamt circa 600 KByte.

Die alten Dateien haben für Normal 5 x 60 KByte + für Italic 5 x 60 KByte - also gesamt ebenso circa 600 KByte.

Wo ist also (außer des Preloadings) der Unterschied in der Datenmenge, die vom Browser geladen werden muss?

Ein Screenshot zur Veranschaulichung für andere User:

Donner · July 23, 2021 at 12:07 PM

Quote from Cadeyrn

Da wir weiterhin Fehlerberichte von Nutzern erhalten

Ich sehe das Phänomen übrigens auch auf meiner Website - vor allem an "runden" Buchstaben. Es scheint aber auch jeweils vom Zoom im Browser abzuhängen. Fest steht jedoch für mich, dass es im WSC 5.3 das Problem (ebenfalls mit OpenSans) bei mir ebenfalls nicht gab.

Donner · July 23, 2021 at 12:16 PM

Eine weitere Frage in dem Zusammenhang:

Ist die doppelte font-weight-Zeile überhaupt legitim im CSS?

Code

@font-face {
    /* Copyright: Copyright 2020 The Open Sans Project Authors (https://github.com/googlefonts/opensans) */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-weight: 300 800;
    font-stretch: 75 100;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(getFont("OpenSans%5Bwdth%2Cwght%5D.woff2", "Open%20Sans", "1626469114")) format('woff2 supports variations'), url(getFont("OpenSans%5Bwdth%2Cwght%5D.woff2", "Open%20Sans", "1626469114")) format('woff2-variations'), url(getFont("OpenSans%5Bwdth%2Cwght%5D.woff2", "Open%20Sans", "1626469114")) format('woff2');
}

**Tim Düsterhus** · July 23, 2021 at 12:51 PM Official Post

Hallo,

Quote from Donner

[Könnte man nicht in der neuen 5.4er font.css die fehlenden font-weight-Werte nachtragen?] Siehe nochmal kurz meinen nachgetragenen Satz bezüglich font.css - Danke

das CSS innerhalb der font.css ist nach meinem Verständnis der Spezifikation korrekt. Es wird korrekt der Bereich der unterstützten Gewichte angegeben (300 bis 800). Siehe: https://web.dev/variable-fonts/#loading-variable-font-files. Browser die das nicht unterstützen sehen nur die 400.

Quote from Donner

Wo ist also (außer des Preloadings) der Unterschied in der Datenmenge, die vom Browser geladen werden muss?

Durch die zusätzlichen HTTP-Anfragen entsteht ein Overhead. Ansonsten ist der reguläre Schriftschnitt in „variabel“ mit 274kB immerhin 10% kleiner als die Einzelgewichte zusammen.

Donner · July 23, 2021 at 1:12 PM

Quote from Tim Düsterhus

zusätzlichen HTTP-Anfragen entsteht ein Overhead

Ich verstehe.

Quote from Tim Düsterhus

Es wird korrekt der Bereich der unterstützten Gewichte angegeben (300 bis 800).

Ahh okay, jetzt verstehe ich dies auch.

Bleibt letztlich die Frage, warum haben wir mit Open Sans scheinbar ein Problem seit WSC 5.4.

Cadeyrn · July 23, 2021 at 1:25 PM

Quote from Tim Düsterhus

Durch die zusätzlichen HTTP-Anfragen entsteht ein Overhead.

Der Overhead zusätzlicher Anfragen ist natürlich da, spielt ehrlicherweise aber in Zeiten von HTTP/2 und HTTP/3 auch nicht mehr den großen Faktor wie früher einmal. Zumal wohl die wenigsten Foren zehn verschiedene Schrift-Dateien laden müssen, es dürfte in der Regel also um eine überschaubare Zahl gehen.

Insofern bleibt natürlich die Frage nach der Ursache, aber wenn diese nicht gefunden werden kann, sollte die korrekte Darstellung höher gewichtet werden als ein paar Millisekunden, die man sparen kann.

**Tim Düsterhus** · July 23, 2021 at 1:29 PM Official Post

Hallo,

Quote from Cadeyrn

sollte die korrekte Darstellung höher gewichtet werden als ein paar Millisekunden, die man sparen kann.

die Änderung ist nicht bewusst durch uns erfolgt, wir entnehmen die Schriftarten von Google Fonts. Dort wurde Open Sans am 10. Februar auf Version 3.000 aktualisiert und in diesem Zug auf eine Variable Font umgestellt:

Open Sans: Version 3.000 added (#2997) · google/fonts@4ebf835

* [gftools-packager] Open Sans: Version 3.000 added * Open Sans Version 3.000 taken from the upstream repo https://github.com/googlefonts/opensans at commit…

github.com

Donner · July 23, 2021 at 1:40 PM

Somit würde uns als Workaround doch folgende Möglichkeit bleiben:

Alte Fonts aus WSC 5.3 im Verzeichnis belassen und die fonts.css mit der Preload-Angabe ausstatten.

Black Rider · July 23, 2021 at 2:11 PM

Quote from Tim Düsterhus

Durch die zusätzlichen HTTP-Anfragen entsteht ein Overhead. Ansonsten ist der reguläre Schriftschnitt in „variabel“ mit 274kB immerhin 10% kleiner als die Einzelgewichte zusammen.

Das gilt aber auch nur dann, wenn sämtliche oder viele Schriftschnitte auf einer Seite Verwendung finden.

Cadeyrn · July 23, 2021 at 7:51 PM

Quote from Tim Düsterhus

du kannst den kompletten font/families/Open Sans-Ordner mit dem aus 5.3 austauschen: https://github.com/WoltLab/WCF/tr…ies/Open%20Sans
Nachtrag: Danach den Stil einmal neu abspeichern.

Das hat das Problem für uns gelöst, meine Nutzer sind wieder glücklich.

Quote from Tim Düsterhus

die Änderung ist nicht bewusst durch uns erfolgt, wir entnehmen die Schriftarten von Google Fonts. Dort wurde Open Sans am 10. Februar auf Version 3.000 aktualisiert und in diesem Zug auf eine Variable Font umgestellt:

Das heißt in der Konsequenz, dass von eurer Seite aus keine Möglichkeit besteht, das Problem zu umgehen. Andere Betreiber mit diesem Problem müssen also auch darauf kommen oder Google muss eine neue Version der Schrift bereitstellen, welche nicht dieses Problem verursacht. Ist das so richtig?

Black Rider · July 23, 2021 at 8:56 PM

Kann ich mir irgendwie nicht vorstellen. Der Google Webfonts Helper schafft es beispielsweise auch, die Schriften so wie bisher auch herunterzuladen.

**Tim Düsterhus** · July 26, 2021 at 10:16 AM Official Post

Hallo,

Quote from Cadeyrn

Das heißt in der Konsequenz, dass von eurer Seite aus keine Möglichkeit besteht, das Problem zu umgehen. Andere Betreiber mit diesem Problem müssen also auch darauf kommen oder Google muss eine neue Version der Schrift bereitstellen, welche nicht dieses Problem verursacht. Ist das so richtig?

Das weiß ich nicht. Wir nehmen eine gewisse Verarbeitung der von Google bereitgestellten Fonts vor. Die Umwandlung in woff2 erfolgt durch uns und auch das CSS stammt von uns. Als Basis nehmen wir die Informationen in der METADATA.pb und die .ttf-Dateien im google/fonts-Repository: https://github.com/google/fonts/tree/main/apache/opensans

Interessant wäre, ob die Original-TTF das gleiche Problem hat. Hast du den Fehler bei dir selbst gesehen, oder hast du da nur Benutzermeldungen zu?

Quote from Black Rider

Kann ich mir irgendwie nicht vorstellen. Der Google Webfonts Helper schafft es beispielsweise auch, die Schriften so wie bisher auch herunterzuladen.

Der Google Webfonts-Helper verwendet (unzulässigerweise, aber wohl geduldet) die für Browser gedachte API mit gefälschten User-Agents. Google liefert je nach User-Agent und angeforderten Schriftschnitten optimierte Dateien aus. Insbesondere habe ich noch nicht gesehen, dass die API tatsächlich Variable Fonts ausliefert.

Participate now!