Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern
bearbeitet von
Und schon wieder eine (Folge-)Frage bezüglich dem Anlegen des "@font-face" ...
> > Hast du denn die Arvo lokal auf deinem System installiert? Wenn nicht, kein Wunder, dass du keine Änderung siehst. Wenn der Browser den Font nicht findet, kann er den Text nicht in dieser Schrift darstellen und nimmt sich halt die nächste Schrift aus dem *font stack*{:@en}.
> Ne, ich habe weder die "Arvo", noch eine der inzwischen favorisierten Schriftarten (also "IBM Plux Sans", oder die "Fira Sans") auf meinem System (openSUSE Tumbleweed) installiert. Daher sehe ich sie nicht! 🙄
> >
> > Wenn *du* den Text in Arvo gesetzt sehen willst, installiere die Schriftart auf deinem System. Wenn alle (naja, fast alle) Besucher deiner Seite den Text in Arvo gesetzt sehen sollen, packe die Fontdateien auf deinen Webserver und binde Arvo als Webfont ein (`@font-face`-Regeln).
>
> Na ja, natürlich will nicht nur *ich* den Text in der bevorzugten Schriftart (ist inzwischen wohl die "IBM Plex Sans", bzw. die "Fira Sans" - beides serifenlose) sehen. Vor allem die Besucher der Homepage sollen die Schrift nutzen.
>
> Also werde ich mich bezüglich "@font-face" weiterbilden.
> Diese Seite hier, nicht?
> [https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face](https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face)
Ja und nun frage ich mich, wie genau das für mich umgesetzt werden kann.
Wäre das so richtig? Ich habe mich für die beiden serifenlosen Schriften "IBM Plex Sans" und "Fira Sans" entschieden, da sie immerhin fünf Darstellungen bieten (von light bis bold) und weil die erste zu einer internationalen Schriftenfamilie gehört. Beide scheinen gut lesbar. Hier nun der CSS-Code:
~~~CSS
html {
font-family: "IBM Plex Sans", "Fira Sans", sans-serif;
line-height: 1.5;
}
@font-face {
font-family: "IBM Plex Sans";
}
~~~
Im Link oben ([https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face](https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face)) heißt es ja,
~~~CSS
font-familiy: 'meine-schrift';
~~~
Da habe ich die von mir gewählte (und bevorzugte) Schriftart eingetragen. Und zwar ohne die hochgestellten Semikolon ('...') und dafür mit den einschließenden Gänsefüßchen, da der Name ja Leerzeichen beinhaltet.
Bei
~~~CSS
src: local('meine-schrift')
~~~
bin ich mir unsicher, denn es gibt ja das Problem der Versionsunterschiede. Warum also überhaupt lokal installieren? Kann ich also "src:" weglassen; und damit natürlich auch die url?
Und falls ich die das "local" (und evtl. die CSS-"url" weglassen kann, so doch wohl nicht das "format" ('woff2')?
Wie also muss dass in meiner CSS aussehen? ~~Finde ansonsten keine Beispiele auf selfhtml ...~~
Oder doch? Gleich die nächste Überschrift ("Einbindung und Verwendung") in obigem Link!
Demnach müsste mein Code so aussehen
~~~CSS
html {
font-family: "IBM Plex Sans", "Fira Sans", sans-serif;
line-height: 1.5;
}
@font-face {
font-family: 'meine-schrift;
src: url('pfad/zu/meinerschrift.woff2') format('woff2'),
url('pfad/zu/meinerschrift.woff') format('woff');/*konnte ich hier runterladen: https://software.opensuse.org//download.html?project=M17N%3Afonts&package=ibm-plex*/
}
p {
font-family: meine-schrift, "IBM Plex Sans", sans-serif;
}
~~~
**?**
Übrigens: meine beiden Schriftarten-Favoriten sind doch hoffentlich keine Google-Fonts? Denn ich habe irgendwo im Wiki gelesen, dass die Daten abgreifen, was ich keinem Besucher der Website zumuten möchte.
Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern
bearbeitet von
Und schon wieder eine (Folge-)Frage bezüglich dem Anlegen des "@font-face" ...
> > Hast du denn die Arvo lokal auf deinem System installiert? Wenn nicht, kein Wunder, dass du keine Änderung siehst. Wenn der Browser den Font nicht findet, kann er den Text nicht in dieser Schrift darstellen und nimmt sich halt die nächste Schrift aus dem *font stack*{:@en}.
> Ne, ich habe weder die "Arvo", noch eine der inzwischen favorisierten Schriftarten (also "IBM Plux Sans", oder die "Fira Sans") auf meinem System (openSUSE Tumbleweed) installiert. Daher sehe ich sie nicht! 🙄
> >
> > Wenn *du* den Text in Arvo gesetzt sehen willst, installiere die Schriftart auf deinem System. Wenn alle (naja, fast alle) Besucher deiner Seite den Text in Arvo gesetzt sehen sollen, packe die Fontdateien auf deinen Webserver und binde Arvo als Webfont ein (`@font-face`-Regeln).
>
> Na ja, natürlich will nicht nur *ich* den Text in der bevorzugten Schriftart (ist inzwischen wohl die "IBM Plex Sans", bzw. die "Fira Sans" - beides serifenlose) sehen. Vor allem die Besucher der Homepage sollen die Schrift nutzen.
>
> Also werde ich mich bezüglich "@font-face" weiterbilden.
> Diese Seite hier, nicht?
> [https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face](https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face)
Ja und nun frage ich mich, wie genau das für mich umgesetzt werden kann.
Wäre das so richtig? Ich habe mich für die beiden serifenlosen Schriften "IBM Plex Sans" und "Fira Sans" entschieden, da sie immerhin fünf Darstellungen bieten (von light bis bold) und weil die erste zu einer internationalen Schriftenfamilie gehört. Beide scheinen gut lesbar. Hier nun der CSS-Code:
~~~CSS
html {
font-family: "IBM Plex Sans", "Fira Sans", sans-serif;
line-height: 1.5;
}
@font-face {
font-family: "IBM Plex Sans";
}
~~~
Im Link oben ([https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face](https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face)) heißt es ja,
~~~CSS
font-familiy: 'meine-schrift';
~~~
Da habe ich die von mir gewählte (und bevorzugte) Schriftart eingetragen. Und zwar ohne die hochgestellten Semikolon ('...') und dafür mit den einschließenden Gänsefüßchen, da der Name ja Leerzeichen beinhaltet.
Bei
~~~CSS
src: local('meine-schrift')
~~~
bin ich mir unsicher, denn es gibt ja das Problem der Versionsunterschiede. Warum also überhaupt lokal installieren? Kann ich also "src:" weglassen; und damit natürlich auch die url?
Und falls ich die das "local" (und evtl. die CSS-"url" weglassen kann, so doch wohl nicht das "format" ('woff2')?
Wie also muss dass in meiner CSS aussehen? Finde ansonsten keine Beispiele auf selfhtml ...