CSS: Probleme mit font-family, font-face, font-size-adjust bei verschiedenen Fonts

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • CSS: Probleme mit font-family, font-face, font-size-adjust bei verschiedenen Fonts

    Hi zusammen!
    Ich habe etwas naiv in meine Seite den nicht Web-standardisierten Font 'Calibri' eingebaut, in der Annahme, dass das schon alles klappt.
    Naja inzwischen weiß ich, dass das doch einige Probleme aufwirft. Ich habe schon fast alles ausprobiert, aber noch keine gute Lösung gefunden. Konvertieren in Bilder oder Flash fällt raus.
    Das Problem ist, dass die Ersatzschrift, z.B. Arial, anders skaliert wird.

    Warum den ganzen Stress? Die Seite schaut mindestens 15% besser aus, sehr gute Lesbarkeit und Übersicht...

    Im Firefox kann man das mit font-size-adjust beeinflussen, für Arial perfekt, Calibri wird dann allerdings deutlich verkleinert.
    Deshalb wäre optimal:

    Quellcode

    1. body{
    2. font-family:Calibri,Arial,sans-serif;
    3. /*font-size-adjust:0.46; Arial so skaliert wie Calibri, Calibri verschiebt sich*/
    4. }

    Quellcode

    1. function adjust(){ //onLoad
    2. if(!IE){
    3. if(Schriftart != 'Calibri'){ /*Hier scheiter ich, CSS auslesen bringt nicht die verwendete Schrift*/
    4. body.setAttribute('font-size-adjust','0.46')
    5. }
    6. } else {
    7. body.setAttribute('font-size','90%') // Notlösung für IE
    8. }
    9. }

    Geht das überhaupt mit Javascript die tatsächlich verwendete Schriftart auszulesen?


    Das hab ich im IE probiert, scheint aber auch nicht zu funktionieren. Muss es nochmal mit eigener WEFT3 Datei versuchen

    Quellcode

    1. <head>
    2. <style type="text/css">
    3. @font-face { font-family:Calibri; src:url(calibri.eot); }
    4. </style>
    5. </head



    Bin für jede Anregung dankbar.
  • Oh man diese Fonts machen mich mehr fertig als jeder noch so komplexe PHP Array Vorgang 8|
    Aber dein Ansatz mit der Vista Prüfung ist sehr gut, den werd ich mal einbauen.

    Ja Verdana hab ich auch testweise ausprobiert aber irgendwie schaut Arial besser aus. Hab gerade ein ganz interessanten Artikel dazu gefunden: Font Size Determines Whether You Should Use Arial or Verdana Fonts.

    Mal schauen was es im Endeffekt wird ;)

    Achso nochmal zu der Methode beim IE mittels @font-face eine WEFT3 Datei einzubinden. Ist das problemlos umsetztbar oder eher suboptimal?
  • ich sag mal für mich eher supoptimal:
    Hier noch ein SelfHTML Artikel zu downloadbaren Schriften: de.selfhtml.org/inter/downloadschriftarten.htm

    Wenn die Schrift so wichtig ist, dass du sie extra zum Download zur Verfügung stellen willst (falls das lizenztechnisch überhaupt möglich ist?!), dann muss die Schrift schon ziemlich wichtig sein.
    Und wenn die Schrift ziemlich wichtig ist, dann leiden doch alle Benutzer, die einen anderen Browser benutzen um so mehr...
  • Wow, die Statistik ist mal deutlich anders, als die die ich bis jetzt gesehen hab. Bei Webhits.de ist aktuell 66.6 % IE zu 27% Firefox! Sonst hab ich noch eine 50%FF 40% IE.
    Sind wohl deutliche Zielgruppen Unterschiede (Developer vs Normal Surfer).

    Also wenn man die Schrift extra downloaden oder bestätigen muss ist klar, dass es rausfällt. Ich dachte, dass der Browser die Schrift automatisch lädt ohne, dass man als User etwas machen muss.

    Mein Problem ist, dass ich gesehen habe wie geil die Seite mit der Schirft ausschaut, und ich gerne so vielen Leuten wie möglich das auch in der Form geben würde.

    Allerdings sehe ich schon auch, dass das viele Probleme aufwirft...

    hmhmhm

    Vielleicht sollte ich warten bis FireFox die Welt übernommen hat, und jeder User FF > 3.1 hat... Da soll es mit den Fonts deutlich leichter gehen.
  • Meiner Meinung nach wäre es auch einfach eine Möglichkeit, den Besucher auf die Schrift hinzuweisen und ihm zu sagen, dass deine Seite mit ihr besser aussieht und noch einen Downloadlink daneben setzen. Somit hätte jeder Benutzer selbst die Wahl, ob er etwas mehr Aufwand eingehen möchte. Und ich meine, dass ein "5 Minuten User" der dich über Google gefunden hat und dich nach kurzer Zeit schon wieder verlässt, nicht wirklich etwas davon hätte, wenn deine Seite eine andere Schrift hätte, mit der sie schicker aussieht.
    Open Source --> Programmieren aus Leidenschaft :!:

    Ich stehe weder für privaten Support per PM noch über einen IM zur Verfügung. Danke.
  • Hm ja das wäre sicher auch eine möglichkeit, obwohl ich selber wohl nie auf so einen Link klicken würde ;)

    So könnte man es für die Vista Leute aktivieren:

    Quellcode

    1. if (navigator.userAgent.indexOf("Windows NT 6.0") > -1) {
    2. document.getElementsByTagName("body")[0].style.fontFamily = 'Calibri,Arial';
    3. }


    Allerdings tendiere ich gerade dazu es einfach in standard Schrift zu machen.

    Damit enthalte ich zwar einigen Usern die ästhetischen Höhenflüge im optischen Bereich des Gehirns vor, aber gesamt gesehen macht es wohl keinen Sinn da groß zu unterscheiden.
    Womit wieder einmal Vernunft über künstlerische Kreativität siegt :D

    PS: Wenn die Seite (hoffentlich bald) fertig ist, lade ich mal beide Versionen hoch, damit ihr versteht was ich meine.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von student2312 ()