@font-face ersetzen

elo22

Hallo (Andreas?),
http://www.administrator.de verwendet mehrfach @font-face was mir überhaupt nicht zusagt:

Code

@font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 300;
      src: local('Roboto Light'), local('Roboto-Light'), url('/fonts/roboto/roboto-light-webfont.woff2') format('woff2'), url('/fonts/roboto/roboto-light-webfont.woff') format('woff'), url('/fonts/roboto/roboto-light-webfont.ttf') format('truetype'), url('/fonts/roboto/roboto-light-webfont.svg#robotolight') format('svg')
}
@font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      src: local('Roboto'), local('Roboto-Regular'), url('/fonts/roboto/roboto-regular-webfont.woff2') format('woff2'), url('/fonts/roboto/roboto-regular-webfont.woff') format('woff'), url('/fonts/roboto/roboto-regular-webfont.ttf') format('truetype'), url('/fonts/roboto/roboto-regular-webfont.svg#robotoregular') format('svg')
}
@font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 700;
      src: local('Roboto Bold'), local('Roboto-Bold'), url('/fonts/roboto/roboto-bold-webfont.woff2') format('woff2'), url('/fonts/roboto/roboto-bold-webfont.woff') format('woff'), url('/fonts/roboto/roboto-bold-webfont.ttf') format('truetype'), url('/fonts/roboto/roboto-bold-webfont.svg#robotobold') format('svg')
}
@font-face {
      font-family: 'Admostile';
      src: url('/fonts/admostile/admostile-bold.eot');
      src: url('/fonts/admostile/admostile-bold.eot?#iefix') format('embedded-opentype'), url('/fonts/admostile/admostile-bold.woff2') format('woff2'), url('/fonts/admostile/admostile-bold.woff') format('woff'), url('/fonts/admostile/admostile-bold.ttf') format('truetype'), url('/fonts/admostile/admostile-bold.svg#eurostilebold') format('svg');
      font-weight: bold;
      font-style: normal
}
@font-face {
      font-family: 'Admostile';
      src: url('/fonts/admostile/admostile-regular.eot');
      src: url('/fonts/admostile/admostile-regular.eot?#iefix') format('embedded-opentype'), url('/fonts/admostile/admostile-regular.woff2') format('woff2'), url('/fonts/admostile/admostile-regular.woff') format('woff'), url('/fonts/admostile/admostile-regular.ttf') format('truetype'), url('/fonts/admostile/admostile-regular.svg#eurostilebold') format('svg');
      font-weight: normal;
      font-style: normal
}

Alles anzeigen

Wie kann ich das durch »meine« Schriften ersetzen? Einfach überschreiben mit !important funktioniert nicht.

Lutz

2002Andreas

Zitat von elo22

Wie kann ich das durch »meine« Schriften ersetzen?

Teste bitte und benutz deine Schrift dazu dann:

CSS

@-moz-document domain("www.administrator.de") {


*{
  font-family: "Arial"!important;}
}

Sören Hentzschel

Zitat von elo22

Wie kann ich das durch »meine« Schriften ersetzen? Einfach überschreiben mit !important funktioniert nicht.

Ich frage mich ja, was genau du mit !important überschreibst. Die @font-face-Deklarationen selbst zu überschreiben, ergibt keinen Sinn, weil diese nur Schrift-Darstellungen definieren, die dadurch noch nirgends verwendet werden. Das heißt, in diesen Blöcken gibt es nichts zum Überschreiben. Die via @font-face definierten Schriften werden in anderen CSS-Blöcken durch die Eigenschaft font-family verwendet und das lässt sich wie alles andere auch überschreiben, dafür gibt es keine Sonderregeln.

elo22

Hallo,
es geht konkret um diese Seite https://www.administrator.de/wissen/netzwer…718.html#toc-39. Mich stört schon der erste Absatz, es sieht einfach schrecklich aus und für meine Augen schwer zu lesen. Ich kriege es nicht geändert.

Lutz

AngelOfDarkness

Also schwarz auf weiß finde ich nun gar nicht so schwer zu lesen, auch nicht durch die verwendete Schrift. Selbst im Lesemodus des Firefox ist es gut lesbar. Screenshot sind mal eben schnell mit dem Mobile Phone gemacht [Blockierte Grafik: https://uploads.tapatalk-cdn.com/20171231/56ae8e46899e125c500a2668a185e3df.jpg][Blockierte Grafik: https://uploads.tapatalk-cdn.com/20171231/6817c9118268124bebc710f4820ce04f.jpg]

Sören Hentzschel

Ich weiß jetzt auch nicht, was daran schwer zu lesen sein soll, da das Konstrastverhältnis zwischen Hintergrund und Text einwandfrei ist und Roboto als eine Schriftart mit guter Lesbarkeit gilt.

Mein Satz "Ich frage mich ja, was genau du mit !important überschreibst" beinhaltete übrigens schon eine Frage, nämlich was genau versucht worden ist, d.h. eine Nennung des verwendeten Codes. Das wurde leider nicht beantwortet. Die Beantwortung würde aber dabei helfen, zu verstehen, an welcher Stelle es scheitert. Dann könnte man wiederum besser helfen.

Speravir

Zitat von elo22

es geht konkret um diese Seite https://www.administrator.de/wissen/netzwer…718.html#toc-39. Mich stört schon der erste Absatz, es sieht einfach schrecklich aus und für meine Augen schwer zu lesen. Ich kriege es nicht geändert.

(Nebenbei: Warum verlinkst du nicht auf #toc-1?)

Wie Sören schon sagte, ist der Kontrast zwischen schwarzer Schrift und weißem Hintergrund eigentlich nicht zu überbieten. Aber die Seite ist viel zu dicht beschrieben und die Schriftgröße könnte eventuell etwas größer sein. Bei einem gedruckten Buch würde man das als Bleiwüste bezeichnen.

Für die Schriftgröße kann man den firefox-internen Zoom benutzen oder die CSS-Eigenschaft font-size, für die Zeilengröße/den Zeilenabstand gibt es line-height als CSS-Eigenschaft.

Wenn Du unbedingt eine andere Schrift verwenden willst, dann suche im website-internen Stil (Stand heute ist es diese Datei mit kryptischem Namen - das lässt darauf schließen, dass er sich jederzeit leicht ändern kann), wo und wie nach der @font-face-Definition die Schrift Roboto verwendet wird, und ersetze die font-family für die entsprechenden Regeln in der userContent.css.

CSS

@-moz-document domain("administrator.de") {
body * {
  font-size: 105% !important; /* das könnte schon zu groß sein */
  line-height: 120% !important; /* eventuell auch 130% oder sogar höher - austesten! */
}
/* hier die weiteren Regeln einfügen */
}

Diese allgemeinen Angaben für Schriftgröße und Zeilenhöhe können als unerwünschten Nebeneffekt bewirken, dass je nach Stilvorgabe in Bereichen mit fest vorgegebenen Grenzen die Schrift über diesen Bereich hinausreicht oder abgeschnitten wird.

elo22

Hat sich erstmal erledigt, so wichig ist die Seite nicht.

Lutz

Sören Hentzschel

Wieso beantwortest du nicht die mehrfach gestellte Frage, wie dein Versuch aussah? Dann hätte man dir sagen können, was du hättest anders machen müssen.